事件流

描述的是在頁面中接受事物的順序

接收事物的順序

• 事件冒泡

　　由最具體的元素接收，然后逐級向上傳播至最不具體的元素節點（文檔）

• 事件捕獲

　　最不具體的節點接收事件，而最集體的節點應該是最后接收事件

事件處理

HTML事件處理

直接添加到HTML結構中

<button id="btn1" οnclick="demo()">按鈕</button> <script>function demo(){alert("Hello");} </script>

?

這種處理方式，存在修改函數名，需要到html中修改事件調用的函數名的問題

DOM0級事件處理

把一個函數賦值給一個事件處理程序屬性

解決了HTML事件處理的問題

<button id="btn1">按鈕</button> <script>var btn1=document.getElementById(btn1);btn1.onclick=function(){alert("Hello");};//這樣寫的話，前面的事件會被覆蓋btn1.οnclick=function(){alert("Hello2");};//清除事件btn1.οnclick=null; </script>

仍然存在問題，當有多個事件時，前面的事件會被覆蓋，只執行最后一個事件處理

DOM2級事件處理

• addEventListener("事件名", "事件處理函數", "布爾值");

　　　　true：事件捕獲

　　　　false：事件冒泡

• removeEventListener();

<div id="divid"><button id="btn1">按鈕</button> </div> //這樣寫就不會覆蓋前面的事件 <script>var btn1 = document.getElementById(btn1)btn1.addEventListener("click", function(){alert("Hello")});btn1.addEventListener("click", function(){alert("Hello2")}); </script>

?

存在IE8及以下版本不支持該事件處理方法

IE事件處理程序

• attachEvent
• detachEvent

一個支持各瀏覽器的的事件處理demo

<button id="btn1">按鈕</button> <script>var btn1 = document.getElementById("btn1");if (btn1.addEventListener){btn1.addEventListener("click", demo);} else if (btn1.attachEvent){btn1.attachEvent("onclick", demo);} else {btn1.onclick = demo();}function demo() {alert("Hello");} </script>

?

轉載于:https://www.cnblogs.com/xiaobaizhiqian/p/8414048.html

總結

以上是生活随笔為你收集整理的JavaScript---事件详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。