JavaScript基礎之事件event

事件的組成

1. 事件源：產生時間的地方；
2. 事件型別：click等
3. 時間物件：event
4. 事件處理程式：函式

事件註冊

意思就是把以後要發生的事進行提前報備，方式主要有兩種：

1. html的屬性：
   • 屬性名： on+事件型別：onclick;
   • 屬性值設定：
     • 直接在DOM元素上面設定：onclick = func(); //注意帶括號
     • 先通過js獲取元素物件，再設定：div1.onclick = func; //注意函式名不用帶括號
     • 清除事件：div.onclick = null;
2. 通過呼叫系統方法addEventListener()註冊；
   • 語法如下：注意，第一個引數不是onclick，第二個引數不帶括號，第三個引數是捕獲/冒泡，預設為false（冒泡） div1.addEventListener("click",func,false);
   • 優點是可以繫結多個方法；
   • 刪除事件：引數與之前新增一致： div1.removeEventListener("click",func,false);
3. IE8使用attachEvent()和detachEvent;

事件的傳播：

• 當多個標籤巢狀時，父元素可以監聽到子元素上面的事件：
• 預設條件下，點選頁面某個標籤，處在傳播路徑上的所有標籤都能監聽到事件；
• 傳播路徑：基本上就是巢狀路徑；

事件流之捕獲和冒泡：

-就像回聲一樣分為兩個階段，用addEventListener()的第三個引數來選擇：

1. 捕獲階段（true）： 執行順序從起始位置（如body）到目標位置；
2. 冒泡階段（預設false）： 執行順序從目標位置到起始位置；

• 終止冒泡的方法：

1. 有些事件本身就不會冒泡，比如一些鍵盤輸入的事件；
2. 在函式中使用：e.stopPropagation();

事件代理

• 有些情況下，比如ul下的li的數量是動態的，就很難給每個li繫結事件，這是就需要利用冒泡特性，在父級ul上繫結事件，同時監聽li上的事件，這就叫做事件代理；
• 通過e.target可以獲取到具體是哪個子元素觸發了事件；