-
委托機(jī)制:$('elem').on('click', 'selector', function(e)是委托機(jī)制 ? ?在點(diǎn)擊selector這個(gè)元素時(shí) ?事件向上傳遞(冒泡) ?直到與第二個(gè)參數(shù)相等 ?事件被消費(fèi) ?并產(chǎn)生回調(diào)函數(shù) ?就這個(gè)函數(shù)
運(yùn)用場景:? 當(dāng)然委托機(jī)制和直接綁定selector標(biāo)簽效果也是一樣 內(nèi)部實(shí)現(xiàn)不同 ?但是如果selector標(biāo)簽的祖父級(jí)要拿到selector標(biāo)簽的點(diǎn)擊事件或者selector標(biāo)簽的內(nèi)容就可以用這個(gè)函數(shù)
查看全部 -
keydown事件觸發(fā)在文字還沒敲進(jìn)文本框,這時(shí)如果在keydown事件中輸出文本框中的文本,得到的是觸發(fā)鍵盤事件前的文本,而keyup事件觸發(fā)時(shí)整個(gè)鍵盤事件的操作已經(jīng)完成,獲得的是觸發(fā)鍵盤事件后的文本
查看全部 -
表單中的blur和focus方法在元素本身,該元素設(shè)置了該方法,點(diǎn)擊該元素就會(huì)觸發(fā)該方法。
focusin和focusout方法支持冒泡方法,在元素包含的元素中產(chǎn)生,點(diǎn)擊某個(gè)元素,會(huì)往上查找父元素是否有這個(gè)方法,有就觸發(fā)。
查看全部 -
1:點(diǎn)擊指定點(diǎn)擊事件后直接彈出
2:點(diǎn)擊某個(gè)指定點(diǎn)擊事件,觸發(fā)里面自定義的點(diǎn)擊事件
3:點(diǎn)擊某個(gè)指定的點(diǎn)擊事件,里面放一個(gè)數(shù)據(jù),和一個(gè)方法,方法接受那個(gè)數(shù)據(jù)
查看全部 -
$('textarea').select(function(e) {
? ? ? ? console.log( window.getSelection());
? ? });
獲取textarea選中時(shí)選中的文字
查看全部 -
$(
'.target1'
).change(
function
(e)?{????????
$(
"#result"
).html(e.target)????
});會(huì)出問題待解決
查看全部 -
鼠標(biāo)按下觸發(fā)mousedown按鈕,離開元素不會(huì)觸發(fā)mouseup事件
鼠標(biāo)左鍵按下,觸發(fā)鼠標(biāo)左鍵mousedown事件,不放按下鼠標(biāo)右鍵觸發(fā)鼠標(biāo)右鍵的mousedown事件,左鍵松開觸發(fā)左鍵mouseover,以此類推
共有8種騷操作(左中右)
查看全部 -
事件冒泡的問題,p元素觸發(fā)了mouseover,他會(huì)一直往上找父元素上的mouseover事件,如果父元素有mouseover事件就會(huì)被觸發(fā)
查看全部 -
冒泡事件及捕獲事件
1、冒泡現(xiàn)象其實(shí)可以理解為:遇到“問題”找“爸爸”。
?“問題”:就是一些特定的事件。?
“爸爸”:就是父級(jí)元素。?
舉例:focusin案例中第二個(gè)綠盒子里的input元素被我們點(diǎn)擊時(shí),就觸發(fā)了focusin事件。
?但是input表示:我很方啊,我沒有這個(gè)事件的處理方法??!咋整?找老爸,問他有沒有!
?綠盒子老爸說:莫方,我有,讓我來! 最終就調(diào)用了綠盒子老爸的方法。
?PS:如果綠盒子老爸自己也沒有呢?他會(huì)問他的老爸,以此類推,一直問到老祖宗window,都沒有的話就只好啥也不做啦!
2、mouseenter?(鼠標(biāo)進(jìn)入)和mousesleave(鼠標(biāo)離開)是由內(nèi)像外進(jìn)行事件冒泡。
mouseover(鼠標(biāo)進(jìn)入)和mouseout(鼠標(biāo)離開)是由外像內(nèi)進(jìn)行捕獲,
所以當(dāng)父元素添加了mouseover(鼠標(biāo)進(jìn)入)和mouseout(鼠標(biāo)離開)時(shí)子元素也會(huì)觸發(fā)聚焦或者失焦事件
總結(jié)
冒泡:mouseenter?(鼠標(biāo)進(jìn)入)、mousesleave(鼠標(biāo)離開)
捕獲:mouseover(鼠標(biāo)進(jìn)入)、mouseout(鼠標(biāo)離開)
查看全部 -
冒泡事件及捕獲事件
1、冒泡現(xiàn)象其實(shí)可以理解為:遇到“問題”找“爸爸”。
?“問題”:就是一些特定的事件。?
“爸爸”:就是父級(jí)元素。?
舉例:focusin案例中第二個(gè)綠盒子里的input元素被我們點(diǎn)擊時(shí),就觸發(fā)了focusin事件。
?但是input表示:我很方啊,我沒有這個(gè)事件的處理方法?。≌φ??找老爸,問他有沒有!
?綠盒子老爸說:莫方,我有,讓我來! 最終就調(diào)用了綠盒子老爸的方法。
?PS:如果綠盒子老爸自己也沒有呢?他會(huì)問他的老爸,以此類推,一直問到老祖宗window,都沒有的話就只好啥也不做啦!
2、focus(獲得焦點(diǎn))和blur(失去焦點(diǎn))是由內(nèi)像外進(jìn)行事件冒泡。focusin(獲得焦點(diǎn))和focusout(失去焦點(diǎn))是由外像內(nèi)進(jìn)行捕獲,所以當(dāng)父元素添加了focusin和focusout時(shí)子元素也會(huì)觸發(fā)聚焦或者失焦事件
總結(jié)
冒泡:focus(獲得焦點(diǎn))、blur(失去焦點(diǎn))
捕獲:focusin(獲得焦點(diǎn))、focusout(失去焦點(diǎn))
查看全部 -
1, input添加的是focus事件,?#accident添加的是click事件
2,?trigger()會(huì)冒泡,??當(dāng)左邊按鈕點(diǎn)擊后觸發(fā)$("a").trigger("click")---a點(diǎn)擊事件(自定義事件,我們沒有點(diǎn)擊a,只點(diǎn)擊了按鈕),a點(diǎn)擊后冒泡到擁有click事件的祖先元素, 于是#accident的click事件執(zhí)行,alert出"trigger觸發(fā)的事件會(huì)在 DOM 樹中向上冒泡"這句話,彈框關(guān)閉后$("input").trigger("focus")會(huì)讓input的光標(biāo)聚集--即focus事件.
3,triggerHandler()不會(huì)冒泡,且不會(huì)觸發(fā)瀏覽器的默認(rèn)行為,所以右邊按鈕點(diǎn)擊后1, 不會(huì)alert出彈框;2, input不會(huì)focus;
查看全部 -
第一大段代碼$("button:first").click(function(event,bottonName)你只要點(diǎn)擊按鈕1就會(huì)觸發(fā)點(diǎn)擊事件.click(function(event,bottonName)由于一開始的bottonName這個(gè)參數(shù)是不存在的所以bottonName=bottonName|| 'first';這個(gè)語句的返回值是'first'? 然后再調(diào)用update這個(gè)函數(shù) update($("span:first"),$("span:last"),‘first’);? 解釋完第一段代碼的含義我們來看第三段代碼 用得出的參數(shù)去替換第三段代碼函數(shù)的三個(gè)參數(shù)可得 $("span:first").text('first')??????? var n=parseInt($("span:last").text(), 10);?????? $("span:last").text(n+1);??????? 你看原文第31行的代碼 原文結(jié)構(gòu)體中定義著<div><span></span><span>0</span>點(diǎn)擊次數(shù)</div>?? 所以點(diǎn)擊按鈕一執(zhí)行一次這三個(gè)語句后?? <div><span>first</span><span>1</span>點(diǎn)擊次數(shù)</div>? 按照這個(gè)道理你可以去看第二段代碼的應(yīng)用
查看全部 -
//點(diǎn)擊更新次數(shù)
? ? $("button:first").click(function(event,bottonName) {
? ? ? ? bottonName = bottonName || 'first';
? ? ? ? update($("span:first"),$("span:last"),bottonName);
? ? });
? ? //通過自定義事件調(diào)用,更新次數(shù)
? ? $("button:last").click(function() {
? ? ? ? $("button:first").trigger('click','last');
? ? });
? ? function update(first,last,bottonName) {
? ? ? ? first.text(bottonName);
? ? ? ? var n = parseInt(last.text(), 10);
? ? ? ? last.text(n + 1);
? ? }
查看全部 -
event.type:獲取事件的類型
event.pageX 和 event.pageY:獲取鼠標(biāo)當(dāng)前相對(duì)于頁面的坐標(biāo)
event.preventDefault() 方法:阻止默認(rèn)行為(可以用 event.isDefaultPrevented() 來確定這個(gè)方法是否(在那個(gè)事件對(duì)象上)被調(diào)用過了)
event.stopPropagation() 方法:阻止事件冒泡
event.which:獲取在鼠標(biāo)單擊時(shí),單擊的是鼠標(biāo)的哪個(gè)鍵
event.currentTarget : 在事件冒泡過程中的當(dāng)前DOM元素
.this和event.target都是dom對(duì)象查看全部 -
var n? = 0;
? ? //綁定事件
? ? $(".aaron:last").on('mousedown mouseup', function(e) {
? ? ? ? $(this).text( '觸發(fā)類型:' +? (e.type) + ",次數(shù)" + ++n)
? ? ? ? ++n;
? ? })
? ? //刪除事件
? ? $("button:last").click(function() {
? ? ? ? $(".aaron:last").off()
? ? })
查看全部
舉報(bào)