好程序員web前端教程分享JavaScript學(xué)習(xí)筆記之Event事件二

好程序員web前端教程分享JavaScript 學(xué)習(xí)筆記之 Event 事件二，今天來聊一聊事件的執(zhí)行機(jī)制。

成都創(chuàng)新互聯(lián)"三網(wǎng)合一"的企業(yè)建站思路。企業(yè)可建設(shè)擁有電腦版、微信版、手機(jī)版的企業(yè)網(wǎng)站。實現(xiàn)跨屏營銷，產(chǎn)品發(fā)布一步更新，電腦網(wǎng)絡(luò)+移動網(wǎng)絡(luò)一網(wǎng)打盡，滿足企業(yè)的營銷需求！成都創(chuàng)新互聯(lián)具備承接各種類型的網(wǎng)站設(shè)計制作、成都網(wǎng)站建設(shè)項目的能力。經(jīng)過十年的努力的開拓，為不同行業(yè)的企事業(yè)單位提供了優(yōu)質(zhì)的服務(wù)，并獲得了客戶的一致好評。

什么是事件的執(zhí)行機(jī)制呢？

思考一個問題？

當(dāng)一個大盒子嵌套一個小盒子的時候，并且兩個盒子都有點擊事件

你點擊里面的小盒子，外面的大盒子上的點擊事件要不要執(zhí)行

好程序員web前端教程分享JavaScript學(xué)習(xí)筆記之Event事件二

事件的傳播

就像上面那個圖片一樣，我們點擊在紅色盒子身上的同時，也是點擊在了粉色盒子上
這個是既定事實，那么兩個盒子的點擊事件都會觸發(fā)
這個就叫做 事件的傳播
當(dāng)元素觸發(fā)一個事件的時候，其父元素也會觸發(fā)相同的事件，父元素的父元素也會觸發(fā)相同的事件
就像上面的圖片一樣
點擊在紅色盒子上的時候，會觸發(fā)紅色盒子的點擊事件
也是點擊在了粉色的盒子上，也會觸發(fā)粉色盒子的點擊事件
也是點擊在了 body 上，也會觸發(fā) body 的點擊事件
也是點擊在了 html 上，也會觸發(fā) html 的點擊事件
也是點擊在了 document 上，也會觸發(fā) document 的點擊事件
也是點擊在了 window 上，也會觸發(fā) window 的點擊事件
也就是說，頁面上任何一個元素觸發(fā)事件，都會一層一層最終導(dǎo)致 window 的相同事件觸發(fā)，前提是各層級元素得有注冊相同的事件，不然不會觸發(fā)

在事件傳播的過程中，有一些注意的點：

只會傳播同類事件
只會從點擊元素開始按照 html 的結(jié)構(gòu)逐層向上元素的事件會被觸發(fā)
內(nèi)部元素不管有沒有該事件，只要上層元素有該事件，那么上層元素的事件就會被觸發(fā)

到現(xiàn)在，我們已經(jīng)了解了事件的傳播，我們再來思考一個問題
事件確實會從自己開始，到 window 的所有相同事件都會觸發(fā)
是因為我們點在自己身上，也確實逐層的點在了直至 window 的每一個元素身上
但是到底是先點在自己身上，還是先點在了 window 身上呢
先點在自己身上，就是先執(zhí)行自己的事件處理函數(shù)，逐層向上最后執(zhí)行 window 的事件處理函數(shù)
反之，則是先執(zhí)行 window 的事件處理函數(shù)，逐層向下最后執(zhí)行自己身上的事件處理函數(shù)
我們剛才聊過了，每一個事件，都是有可能從自己到 window ，有可能要執(zhí)行多個同類型事件
那么這個執(zhí)行的順序就有一些說法了
你是點擊在哪個元素身上了，那么這個事件的 目標(biāo) 就是什么
就是從事件 目標(biāo) 的事件處理函數(shù)開始，依次向外，直到 window 的事件處理函數(shù)觸發(fā)
也就是從下向上的執(zhí)行事件處理函數(shù)
就是從 window 的事件處理函數(shù)開始，依次向內(nèi)，只要事件 目標(biāo) 的事件處理函數(shù)執(zhí)行
也就是從上向下的執(zhí)行事件處理函數(shù)
就是在事件的傳播中，多個同類型事件處理函數(shù)的執(zhí)行順序不同
就是把我要做的事情委托給別人來做
因為我們的冒泡機(jī)制，點擊子元素的時候，也會同步觸發(fā)父元素的相同事件
所以我們就可以把子元素的事件委托給父元素來做
點擊子元素的時候，不管子元素有沒有點擊事件，只要父元素有點擊事件，那么就可以觸發(fā)父元素的點擊事件

冒泡、捕獲、目標(biāo)

目標(biāo)

冒泡

捕獲

冒泡和捕獲的區(qū)別

事件委托

事件觸發(fā)

<body>

<ul>

</ul>

var oUl = docuemnt.querySelector('ul')

oUl.addEventListener('click', function (e) {

console.log('我是 ul 的點擊事件，我被觸發(fā)了')

})

</script></body>

像上面一段代碼，當(dāng)你點擊 ul 的時候肯定會觸發(fā)
但是當(dāng)你點擊 li 的時候，其實也會觸發(fā)
target 這個屬性是事件對象里面的屬性，表示你點擊的目標(biāo)
當(dāng)你觸發(fā)點擊事件的時候，你點擊在哪個元素上，target 就是哪個元素
這個 target 也不兼容，在 IE 下要使用 srcElement

target

<body>

<ul>

</ul>

var oUl = docuemnt.querySelector('ul')

oUl.addEventListener('click', function (e) {

e = e || window.event

var target = e.target || e.srcElement

console.log(target)

})

</script></body>

上面的代碼，當(dāng)你點擊 ul 的時候，target 就是 ul
當(dāng)你點擊在 li 上面的時候，target 就是 li
這個時候，當(dāng)我們點擊 li 的時候，也可以觸發(fā) ul 的點事件
并且在事件內(nèi)不，我們也可以拿到你點擊的到底是 ul 還是 li
這個時候，我們就可以把 li 的事件委托給 ul 來做

委托

<body>

<ul>

</ul>

var oUl = docuemnt.querySelector('ul')

oUl.addEventListener('click', function (e) {

e = e || window.event

var target = e.target || e.srcElement

// 判斷你點擊的是 li if (target.nodeName.toUpperCase === 'LI') {

// 確定點擊的是 li // 因為當(dāng)你點擊在 ul 上面的時候，nodeName 應(yīng)該是 'UL' // 去做點擊 li 的時候該做的事情了 console.log('我是 li，我被點擊了')

}

})

</script></body>

上面的代碼，我們就可以把 li 要做的事情委托給 ul 來做
為什么要用事件委托
我頁面上本身沒有 li
我通過代碼添加了一些 li
添加進(jìn)來的 li 是沒有點擊事件的
我每次動態(tài)的操作完 li 以后都要從新給 li 綁定一次點擊事件
比較麻煩
這個時候只要委托給 ul 就可以了
因為新加進(jìn)來的 li 也是 ul 的子元素，點擊的時候也可以觸發(fā) ul 的點擊事件

總結(jié)

事件委托的書寫
元素的事件只能委托給結(jié)構(gòu)父級或者再結(jié)構(gòu)父級的同樣的事件上
li 的點擊事件，就不能委托給 ul 的鼠標(biāo)移入事件
li 的點擊事件，只能委托給 ul 或者在高父級的點擊事件上
默認(rèn)行為，就是不用我們注冊，它自己就存在的事情
比如我們點擊鼠標(biāo)右鍵的時候，會自動彈出一個菜單
比如我們點擊 a 標(biāo)簽的時候，我們不需要注冊點擊事件，他自己就會跳轉(zhuǎn)頁面
...

默認(rèn)行為

這些不需要我們注冊就能實現(xiàn)的事情，我們叫做 默認(rèn)事件

阻止默認(rèn)行為

有的時候，我們不希望瀏覽器執(zhí)行默認(rèn)事件
比如我給 a 標(biāo)簽綁定了一個點擊事件，我點擊你的時候希望你能告訴我你的地址是什么
而不是直接跳轉(zhuǎn)鏈接
那么我們就要把 a 標(biāo)簽原先的默認(rèn)事件阻止，不讓他執(zhí)行默認(rèn)事件

我們有兩個方法來阻止默認(rèn)事件
e.preventDefault() : 非 IE 使用
e.returnValue = false ：IE 使用

我們阻止默認(rèn)事件的時候也要寫一個兼容的寫法

<a href ="https://www.baidu.com"> 點擊我試試</a><script>

var oA = document.querySelector('a')

a.addEventListener('click', function (e) {

e = e || window.event

console.log( this.href)

e.preventDefault ? e.preventDefault() : e.returnValue = false

})</script>

這樣寫完以后，你點擊 a 標(biāo)簽的時候，就不會跳轉(zhuǎn)鏈接了
而是會在控制臺打印出 a 標(biāo)簽的 href 屬性的值

文章題目：好程序員web前端教程分享JavaScript學(xué)習(xí)筆記之Event事件二
網(wǎng)站鏈接：http://www.rwnh.cn/article8/pgssip.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站收錄、搜索引擎優(yōu)化、網(wǎng)站維護(hù)、虛擬主機(jī)、企業(yè)網(wǎng)站制作

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

好程序員web前端教程分享JavaScript學(xué)習(xí)筆記之Event事件二

事件的傳播

冒泡、捕獲、目標(biāo)

目標(biāo)

冒泡

捕獲

冒泡和捕獲的區(qū)別

事件委托

事件觸發(fā)

target

委托

總結(jié)

默認(rèn)行為

阻止默認(rèn)行為