事件

JavaScript 和 HTML 之間的交互是通過事件實現(xiàn)的。
事件就是通過文檔或瀏覽器窗口發(fā)生的一些特定的交互瞬間。
可以使用 監(jiān)聽器 (或者事件處理程序) 來預(yù)定事件，以便來執(zhí)行相應(yīng)的代碼

事件流

描述的是頁面中事件傳播的順序。
當(dāng)事件發(fā)生的時候，會在元素節(jié)點之間按照特定的順序傳播，這個傳播的過程叫做 DOM 的事件流。
這個傳播過程是：事件捕獲 -- 事件目標 -- 事件冒泡。
而早期的 IE 和 NetScape 提出了完全相反的事件流概念，IE 是事件冒泡，而 NetScape 的事件流就是事件捕獲。

事件冒泡、事件捕獲

• IE 提出的事件流是事件冒泡，即從下到上，從目標觸發(fā)的元素逐級往下向上傳播，直到 window 對象。
• 而 NetScape 的事件流就是事件捕獲，即從 document 對象逐級向下傳播到目標元素。由于 IE 低版本瀏覽器不支持，所以很少使用事件捕獲。
• 后來 ECMAScript 在 DOM2 中對事件流進行了進一步規(guī)范，基本上就是上述二者的結(jié)合，

DOM2 中事件規(guī)定的事件流包括三個階段：

1. 事件 捕獲 階段：事件從Document節(jié)點上 自上而下 向目標節(jié)點傳播的階段
2. 處于目標階段：真正的目標節(jié)點正在處理事件的階段
3. 事件 冒泡 階段：事件從目標節(jié)點 自下而上 向Document傳播的階段

DOM 事件處理

DOM 節(jié)點增加了對事件處理，其分為四個級別

DOM0

DOM0 級事件具有極好的跨瀏覽器優(yōu)勢，會以最大的速度綁定

第一種方式是內(nèi)聯(lián)模型【行內(nèi)模式】

<div?onclick="btnClick()">clickdiv>
<script>
??function?btnClick(){
????console.log("hello");
??}
script>

缺點是：不符合 W3C 中關(guān)于內(nèi)容與行為分離的基本規(guī)范

第二種方式是腳本模式

<div?id="btn">點擊div>
<script>
??var?btn=document.getElementById("btn");
??btn.onclick=function(){
????console.log("sunny");
??}
script>

但是會存在問題

<div?id="btn">點擊div>
<script>
??var?btn=document.getElementById("btn");
??btn.onclick=function(){
????console.log("sunny");
??}
??btn.onclick=function(){
????console.log("sunny-sunny");
??}
script>

這個時候只能輸出 sunny-sunny。很明顯的是：

第一個事件函數(shù)被第二個事件函數(shù)給覆蓋掉了，所以腳本模型的缺點就是：同一個節(jié)點只能添加一次同類型事件

<div?id="btn3">
????btn3
????<div?id="btn2">
????????btn2
????????<div?id="btn1">
????????????btn1
????????div>
????div>
div>
<script>
????let?btn1?=?document.getElementById("btn1");
????let?btn2?=?document.getElementById("btn2");
????let?btn3?=?document.getElementById("btn3");
????btn1.onclick=function(){
????????console.log(1)
????}
????btn2.onclick=function(){
????????console.log(2)
????}
????btn3.onclick=function(){
????????console.log(3)
????}
script>

當(dāng)點擊 btn1 的時候，會依次輸入 1，2，3,這就是事件冒泡，DOM0 級只支持冒泡階段

DOM2

DOM2定義了兩個方法：

1. addEventListener 添加事件偵聽器
2. removeEventListener 刪除事件偵聽器

這兩個方法均有三個參數(shù)：

• 第一個參數(shù)是要處理的時間名稱
• 第二個參數(shù)是作為事件處理程序的函數(shù)名稱
• 第三個參數(shù)是一個布爾值，默認false表示使用冒泡機制，true表示捕獲機制

<div?id="btn">點擊div>

<script>
var?btn=document.getElementById("btn");
btn.addEventListener("click",hello,false);
btn.addEventListener("click",helloagain,false);
function?hello(){
????console.log("hello");
}
function?helloagain(){
????console.log("hello?again");
}
script>

捕獲冒泡的順序

<div?id="btn3">
????????btn3
????????<div?id="btn2">
????????????btn2
????????????<div?id="btn1">
????????????????btn1
????????????div>
????????div>
????div>
????<script>
????????let?btn1?=?document.getElementById("btn1");
????????let?btn2?=?document.getElementById("btn2");
????????let?btn3?=?document.getElementById("btn3");
????????btn1.addEventListener('click',?function?()?{
????????????console.log('btn1捕獲')
????????},?true)
????????btn1.addEventListener('click',?function?()?{
????????????console.log('btn1冒泡')
????????},?false)

????????btn2.addEventListener('click',?function?()?{
????????????console.log('btn2捕獲')
????????},?true)
????????btn2.addEventListener('click',?function?()?{
????????????console.log('btn2冒泡')
????????},?false)

????????btn3.addEventListener('click',?function?()?{
????????????console.log('btn3捕獲')
????????},?true)
????????btn3.addEventListener('click',?function?()?{
????????????console.log('btn3冒泡')
????????},?false)
????script>

點擊btn1，其結(jié)果為：btn3捕獲 btn2捕獲 btn1捕獲 btn1冒泡 btn2冒泡 btn3冒泡

阻止冒泡

btn2.addEventListener(
??"click",
??function?(ev)?{
????ev.stopPropagation();
????console.log("btn2捕獲");
??},
??true
);