javascript
JS高级:事件冒泡和事件捕获;
1、事件:瀏覽器客戶端上客戶觸發(fā)的行為成為時(shí)事件;所有的事件都是天生自帶的,不需要我們?nèi)ソ壎?#xff0c;只需要我們?nèi)ビ|發(fā)
當(dāng)用戶觸發(fā)一個(gè)事件時(shí),瀏覽器的所有詳細(xì)信息都存在一個(gè)叫做event的對象上,我們把它叫做事件對象
2、獲取鼠標(biāo)的坐標(biāo)
event.clientX;event.clientY
document.οnclick=function(){
event.clientX
event.clientY
}
3、關(guān)于event的兼容性
標(biāo)準(zhǔn):event是undefined
非標(biāo)準(zhǔn):null
解決兼容: var e=e||windoe.event
4、事件冒泡:
當(dāng)給父子元素同一事件綁定方法的時(shí)候,觸發(fā)了子元素的事件,執(zhí)行完畢后,也會觸發(fā)父級元素的相同時(shí)間,這種傳播機(jī)制叫做事件冒泡
取消事件冒泡:event.cancelBubble=true
5、事件捕獲:
給父子元素用addEventLIstener()綁定統(tǒng)一個(gè)事件,會先觸發(fā)父元素,然后再傳遞給子元素,這種傳播機(jī)制叫做事件捕獲
(1)IE低版本沒有事件捕獲
(2)普通的事件綁定寫法沒有事件捕獲
給元素綁定事件,有兩種
(1)常用的寫法:
obj.οnclick=function(){}
這個(gè)寫法有缺點(diǎn),如果一個(gè)元素綁定相同的事件多次,后者會覆蓋前者,因此這個(gè)寫法相當(dāng)于給obj的onclick的屬性賦值
(2)第二種寫法
標(biāo)準(zhǔn)瀏覽器用:addEventListener()
非標(biāo)準(zhǔn)用:attachEvent()
addEventListener(參數(shù)1,參數(shù)2,參數(shù)3)
參數(shù)1:事件名,并且不帶"on"
參數(shù)2:事件函數(shù)
參數(shù)3:布爾值,代表捕獲不捕獲,默認(rèn)值是false,不捕獲單冒泡
attathEvent()和addEventListener()的區(qū)別
(1)attachEvent()只用在IE8以下,addEventListener()適合標(biāo)準(zhǔn)瀏覽器
(2)attachEvent()的事件名帶on,addEventListener()的事件名不帶on
(3)attachEvent()函數(shù)里面的this是undefined,addEventListener()的函數(shù)里面的this是當(dāng)前元素對象
(4)attachEvent()只有冒泡沒有捕獲,addEventListener()有冒泡也有捕獲
call和apply
都是改變this的指向的方法,而且是函數(shù)對象、類、構(gòu)造函數(shù)?
call和apply的第一個(gè)參數(shù)是null的時(shí)候,函數(shù)里面的this還是指向原來的指向不變
所有的事件都是異步的!!!
轉(zhuǎn)載于:https://www.cnblogs.com/qinlinkun/p/10055085.html
總結(jié)
以上是生活随笔為你收集整理的JS高级:事件冒泡和事件捕获;的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: [react] 怎样有条件地渲染组件?
- 下一篇: POST型SQL注入教学