好程序員web前端教程分享JavaScript學習筆記之Event事件二
好程序員web前端教程
分享JavaScript
學習筆記之
Event
事件二，今天來聊一聊事件的執行機制。
什么是事件的執行機制呢？
思考一個問題？
當一個大盒子嵌套一個小盒子的時候，并且兩個盒子都有點擊事件
你點擊里面的小盒子，外面的大盒子上的點擊事件要不要執行
事件的傳播
-
就像上面那個圖片一樣，我們點擊在紅色盒子身上的同時，也是點擊在了粉色盒子上
-
這個是既定事實，那么兩個盒子的點擊事件都會觸發
-
這個就叫做
事件的傳播
-
當元素觸發一個事件的時候，其父元素也會觸發相同的事件，父元素的父元素也會觸發相同的事件
-
就像上面的圖片一樣
-
點擊在紅色盒子上的時候，會觸發紅色盒子的點擊事件
-
也是點擊在了粉色的盒子上，也會觸發粉色盒子的點擊事件
-
也是點擊在了 body 上，也會觸發 body 的點擊事件
-
也是點擊在了 html 上，也會觸發 html 的點擊事件
-
也是點擊在了 document 上，也會觸發 document 的點擊事件
-
也是點擊在了 window 上，也會觸發 window 的點擊事件
-
也就是說，頁面上任何一個元素觸發事件，都會一層一層最終導致 window 的相同事件觸發，前提是各層級元素得有注冊相同的事件，不然不會觸發
-
只會傳播同類事件
-
只會從點擊元素開始按照 html 的結構逐層向上元素的事件會被觸發
-
內部元素不管有沒有該事件，只要上層元素有該事件，那么上層元素的事件就會被觸發
-
到現在，我們已經了解了事件的傳播，我們再來思考一個問題
-
事件確實會從自己開始，到 window 的所有相同事件都會觸發
-
是因為我們點在自己身上，也確實逐層的點在了直至 window 的每一個元素身上
-
但是到底是先點在自己身上，還是先點在了 window 身上呢
-
先點在自己身上，就是先執行自己的事件處理函數，逐層向上最后執行 window 的事件處理函數
-
反之，則是先執行 window 的事件處理函數，逐層向下最后執行自己身上的事件處理函數
-
我們剛才聊過了，每一個事件，都是有可能從自己到 window ，有可能要執行多個同類型事件
-
那么這個執行的順序就有一些說法了
-
你是點擊在哪個元素身上了，那么這個事件的
目標 就是什么
-
就是從事件
目標 的事件處理函數開始，依次向外，直到 window 的事件處理函數觸發
-
也就是從下向上的執行事件處理函數
-
就是從 window 的事件處理函數開始，依次向內，只要事件
目標 的事件處理函數執行
-
也就是從上向下的執行事件處理函數
-
就是在事件的傳播中，多個同類型事件處理函數的執行順序不同
-
就是把我要做的事情委托給別人來做
-
因為我們的冒泡機制，點擊子元素的時候，也會同步觸發父元素的相同事件
-
所以我們就可以把子元素的事件委托給父元素來做
-
點擊子元素的時候，不管子元素有沒有點擊事件，只要父元素有點擊事件，那么就可以觸發父元素的點擊事件
冒泡、捕獲、目標
目標
冒泡
捕獲
冒泡和捕獲的區別
事件委托
事件觸發
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
var oUl
= docuemnt.querySelector('ul')
oUl.addEventListener('click',
function (e) {
console.log('我是 ul 的點擊事件，我被觸發了')
})
</script></body>
-
像上面一段代碼，當你點擊 ul 的時候肯定會觸發
-
但是當你點擊 li 的時候，其實也會觸發
- target 這個屬性是事件對象里面的屬性，表示你點擊的目標
-
當你觸發點擊事件的時候，你點擊在哪個元素上，target 就是哪個元素
-
這個 target 也不兼容，在 IE 下要使用 srcElement
target
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
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>
-
上面的代碼，當你點擊 ul 的時候，target 就是 ul
-
當你點擊在 li 上面的時候，target 就是 li
-
這個時候，當我們點擊 li 的時候，也可以觸發 ul 的點事件
-
并且在事件內不，我們也可以拿到你點擊的到底是 ul 還是 li
-
這個時候，我們就可以把 li 的事件委托給 ul 來做
委托
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
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
// 因為當你點擊在 ul 上面的時候，nodeName 應該是 'UL'
// 去做點擊 li 的時候該做的事情了 console.log('我是 li，我被點擊了')
}
})
</script></body>
-
上面的代碼，我們就可以把 li 要做的事情委托給 ul 來做
-
為什么要用事件委托
-
我頁面上本身沒有 li
-
我通過代碼添加了一些 li
-
添加進來的 li 是沒有點擊事件的
-
我每次動態的操作完 li 以后都要從新給 li 綁定一次點擊事件
-
比較麻煩
-
這個時候只要委托給 ul 就可以了
-
因為新加進來的 li 也是 ul 的子元素，點擊的時候也可以觸發 ul 的點擊事件
總結
-
事件委托的書寫
-
元素的事件只能委托給結構父級或者再結構父級的同樣的事件上
- li 的點擊事件，就不能委托給 ul 的鼠標移入事件
- li 的點擊事件，只能委托給 ul 或者在高父級的點擊事件上
-
默認行為，就是不用我們注冊，它自己就存在的事情
-
比如我們點擊鼠標右鍵的時候，會自動彈出一個菜單
-
比如我們點擊 a 標簽的時候，我們不需要注冊點擊事件，他自己就會跳轉頁面
- ...
默認行為
-
這些不需要我們注冊就能實現的事情，我們叫做
默認事件
阻止默認行為
-
有的時候，我們不希望瀏覽器執行默認事件
-
比如我給 a 標簽綁定了一個點擊事件，我點擊你的時候希望你能告訴我你的地址是什么
-
而不是直接跳轉鏈接
-
那么我們就要把 a 標簽原先的默認事件阻止，不讓他執行默認事件
-
我們有兩個方法來阻止默認事件
- e.preventDefault() : 非 IE 使用
- e.returnValue = false ：IE 使用
<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 標簽的時候，就不會跳轉鏈接了
-
而是會在控制臺打印出 a 標簽的 href 屬性的值
