mouseover 事件的一個(gè)替代是mouseenter,區(qū)別是對(duì)事件冒泡的處理:mouseenter只會(huì)在綁定對(duì)象上觸發(fā),而mouseover后代節(jié)點(diǎn)也會(huì)導(dǎo)致事件觸發(fā)
2017-08-27
第三個(gè)例子這樣寫(xiě)可能容易理解一點(diǎn)
$("button:eq(2)").click(1111, function(e){
alert(e.data);
})
$("button:eq(2)").click(1111, function(e){
alert(e.data);
})
2017-08-27
e.target.textContent == this.textContent
2017-08-23
一樓的評(píng)論說(shuō)反了,event.target是給哪個(gè)元素綁定事件,是不變的。this則是當(dāng)前觸發(fā)事件的元素。
所以event.target是ul ,this是li
所以event.target是ul ,this是li
2017-08-21
事件委托原理:
事件委托就是利用事件冒泡原理實(shí)現(xiàn)的!
事件冒泡:就是事件從最深節(jié)點(diǎn)開(kāi)始,然后逐步向上傳播事件;
例:頁(yè)面上有一個(gè)節(jié)點(diǎn)樹(shù),div > ul > li > a
比如給最里面的a 加一個(gè)click 事件,那么事件就會(huì)一層一層的往外執(zhí)行,執(zhí)行順序 a > li > ul > div, 有這樣一個(gè)機(jī)制,當(dāng)我們給最外層的div 添加點(diǎn)擊事件,那么里面的ul , li , a 做點(diǎn)擊事件的時(shí)候,都會(huì)冒泡到最外層的div上,所以都會(huì)觸發(fā),這就是事件委托,委托他們父集代為執(zhí)行事件
事件委托就是利用事件冒泡原理實(shí)現(xiàn)的!
事件冒泡:就是事件從最深節(jié)點(diǎn)開(kāi)始,然后逐步向上傳播事件;
例:頁(yè)面上有一個(gè)節(jié)點(diǎn)樹(shù),div > ul > li > a
比如給最里面的a 加一個(gè)click 事件,那么事件就會(huì)一層一層的往外執(zhí)行,執(zhí)行順序 a > li > ul > div, 有這樣一個(gè)機(jī)制,當(dāng)我們給最外層的div 添加點(diǎn)擊事件,那么里面的ul , li , a 做點(diǎn)擊事件的時(shí)候,都會(huì)冒泡到最外層的div上,所以都會(huì)觸發(fā),這就是事件委托,委托他們父集代為執(zhí)行事件
2017-08-21
為什么要用事件委托?事件委托有什么好處?
一般來(lái)說(shuō),dom是需要有事件處理程序的,我們會(huì)直接給他事件處理程序就好了,那么如果是很多dom元素需要添加事件處理呢?
比如 100個(gè)li,每個(gè)li 都有相同的click點(diǎn)擊事件,可能我們會(huì)有for循環(huán)的方法,來(lái)遍歷所有l(wèi)i,然后為每個(gè)li添加綁定事件。
這么做毫無(wú)疑問(wèn)對(duì)性能有很大的影響;
在js中,訪(fǎng)問(wèn)dom次數(shù)越多,引起瀏覽器重繪與重排的次數(shù)也就越多,就會(huì)延長(zhǎng)整個(gè)頁(yè)面的交互就緒時(shí)間
如果采用事件委托,就會(huì)將所有的操作放到j(luò)s程序里面,與dom的操作就只交互一次,這樣減少了dom交互次數(shù),性能就會(huì)提升;
一般來(lái)說(shuō),dom是需要有事件處理程序的,我們會(huì)直接給他事件處理程序就好了,那么如果是很多dom元素需要添加事件處理呢?
比如 100個(gè)li,每個(gè)li 都有相同的click點(diǎn)擊事件,可能我們會(huì)有for循環(huán)的方法,來(lái)遍歷所有l(wèi)i,然后為每個(gè)li添加綁定事件。
這么做毫無(wú)疑問(wèn)對(duì)性能有很大的影響;
在js中,訪(fǎng)問(wèn)dom次數(shù)越多,引起瀏覽器重繪與重排的次數(shù)也就越多,就會(huì)延長(zhǎng)整個(gè)頁(yè)面的交互就緒時(shí)間
如果采用事件委托,就會(huì)將所有的操作放到j(luò)s程序里面,與dom的操作就只交互一次,這樣減少了dom交互次數(shù),性能就會(huì)提升;
2017-08-21
借鑒其他大牛的一個(gè)例子:收快遞例子
有三個(gè)同事預(yù)計(jì)會(huì)在周一收到快遞。為簽收快遞,有兩種辦法:一是三個(gè)人在公司門(mén)口等快遞;二是委托給前臺(tái)MM代為簽收?,F(xiàn)實(shí)當(dāng)中,我們大都采用委托的方案(公司也不會(huì)容忍那么多員工站在門(mén)口就為了等快遞)。前臺(tái)MM收到快遞后,她會(huì)判斷收件人是誰(shuí),然后按照收件人的要求簽收,甚至代為付款。這種方案還有一個(gè)優(yōu)勢(shì),那就是即使公司里來(lái)了新員工(不管多少),前臺(tái)MM也會(huì)在收到寄給新員工的快遞后核實(shí)并代為簽收。
兩層意思:
1.現(xiàn)在委托前臺(tái)的同事是可以簽收的,即程序中的現(xiàn)有的dom節(jié)點(diǎn)是有事件的;
2.新員工也是可以被前臺(tái)mm代為簽收的,即程序中新添加的dom節(jié)點(diǎn)也是有事件的;
有三個(gè)同事預(yù)計(jì)會(huì)在周一收到快遞。為簽收快遞,有兩種辦法:一是三個(gè)人在公司門(mén)口等快遞;二是委托給前臺(tái)MM代為簽收?,F(xiàn)實(shí)當(dāng)中,我們大都采用委托的方案(公司也不會(huì)容忍那么多員工站在門(mén)口就為了等快遞)。前臺(tái)MM收到快遞后,她會(huì)判斷收件人是誰(shuí),然后按照收件人的要求簽收,甚至代為付款。這種方案還有一個(gè)優(yōu)勢(shì),那就是即使公司里來(lái)了新員工(不管多少),前臺(tái)MM也會(huì)在收到寄給新員工的快遞后核實(shí)并代為簽收。
兩層意思:
1.現(xiàn)在委托前臺(tái)的同事是可以簽收的,即程序中的現(xiàn)有的dom節(jié)點(diǎn)是有事件的;
2.新員工也是可以被前臺(tái)mm代為簽收的,即程序中新添加的dom節(jié)點(diǎn)也是有事件的;
2017-08-21
http://libs.baidu.com/jquery/1.9.1/jquery.js
2017-08-20
你們可以把e.target換成$(this)看看 結(jié)果輸出的的是underfined說(shuō)明function中的this是指綁定觸發(fā)的對(duì)象ul event 是實(shí)際觸發(fā)事件的元素
2017-08-17
老師講的不錯(cuò) $('elem').on('click','elem2',function(){}) 給元素elem綁定點(diǎn)擊事件 原本該事件應(yīng)該由elem去觸發(fā) 現(xiàn)在由于第二層seletor的作用下委托elem2去做
2017-08-17