js：事件（註冊、解綁、DOM事件流、事件物件、事件委託）
阿新 • • 發佈：2020-07-27
1、註冊事件
（1）傳統方式註冊事件
<body>
<button id="b1">請點選</button>
<script>
var b=document.getElementById("b1");
b.onclick=function(){
alert("hello");
}
b.onclick=function(){
alert("你好");
}
- 存在唯一性，同一個元素，同一個事件只能設定一個處理函式，後面註冊的處理函式會覆蓋前面的處理函式
（2）方法監聽註冊方式（IE9以上）
<body>
<button id="b1">請點選</button>
<script>
var b=document.getElementById("b1");
b.addEventListener("click", function(){
alert(
- 註冊事件的型別是字串，必須加引號，且不帶on
- 同一個元素同一個時間可以註冊多個監聽器
2、解綁事件
（1）傳統方式
<body>
<button id="b1">請點選</button>
<script>
var
點過一次按鈕後事件就失效了
（2）方法監聽註冊事件後解綁事件
<body>
<button id="b1">請點選</button>
<script>
var b=document.getElementById("b1");
b.addEventListener("click", fn);//不需要寫小括號
function fn(){
alert("hello");
b.removeEventListener("click",fn);
}
</script>
</body>
3、DOM事件流
（1）概念
事件流是從頁面中接收事件的順序
事件發生時會在元素結點之間按照特定的順序傳播，這個傳播過程即DOM事件流
從document到html再到元素搜尋事件的階段為捕獲階段，相反，為冒泡階段
（2）演示
捕獲階段：
<body id="body"> <button id="b1">請點選</button> <script> var b=document.getElementById("b1"); b.addEventListener("click", function(){ alert("hello"); },true); var mybody=document.getElementById("body"); mybody.addEventListener("click", function(){ alert("body"); },true); </script> </body>
- js程式碼中執行捕獲或者冒泡中的一個階段
- onclick和attachEvent只能得到冒泡階段
- 引數為false或者省略則為冒泡階段捕獲
冒泡階段：
<body id="body"> <button id="b1">請點選</button> <script> var b=document.getElementById("b1"); b.addEventListener("click", function(){ alert("hello"); },false); var mybody=document.getElementById("body"); mybody.addEventListener("click", function(){ alert("body"); },false); </script> </body>
阻止冒泡：
<body id="body"> <button id="b1">請點選</button> <script> var b=document.getElementById("b1"); b.addEventListener("click", function(){ alert("hello"); event.stopPropagation(); },false); var mybody=document.getElementById("body"); mybody.addEventListener("click", function(){ alert("body"); },false); </script> </body>
- 冒泡被阻止後只能點選一次確定，點選後不會再跳出來新的頁面
- event是事件物件
4、事件物件
（1）獲取事件物件
<body id="body"> <button id="b1">請點選</button> <script> var b=document.getElementById("b1"); b.onclick=function(event){ console.log(event); } </script> </body>
- event就是一個事件物件，寫到偵聽函式內部的小括號裡面當形參來看
- 事件物件只有有了事件才會存在，是系統自動建立的不需要我們傳遞引數
- 事件物件是我們的事件的一系列相關資料的集合，跟事件相關
（2）事件物件的屬性和方法
<body>
<button id="b1">請點選</button>
<script>
var b=document.getElementById("b1");
b.onclick=function(event){
console.log(event.target);//觸發事件的元素
console.log(this);//繫結事件的物件
console.log(event.type);//事件的型別
}
</script>
</body>
5、事件委託（代理、委派）
<body id="body"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <script> var ul=document.querySelector("ul"); ul.addEventListener("click",function(){ alert("helo"); }) </script> </body>
不是每一個子結點設定事件監聽器，而是將事件的監聽器設定到父節點上，然後利用冒泡原理影響到設定的子結點上
事件委託的作用：只操作了一次dom，提高了程式的效能