資訊專欄INFORMATION COLUMN
摘要：事件類事件類基本概念事件的級別，指定冒泡還是捕獲增加了鍵盤鼠標(biāo)等事件類型事件模型捕獲從上往下冒泡當(dāng)前元素往上事件流如圖描述事件捕獲的具體流程目標(biāo)元素對象的常見應(yīng)用阻止默認(rèn)行為，例如鏈接跳轉(zhuǎn)阻止冒泡行為事件響應(yīng)
DOM 事件類
javascript
DOM事件類
基本概念：
1. DOM事件的級別
- DOM0 element.onclick=function(){}
- DOM2 element.addEventListener("click",function(){}，false)
- false or true 指定冒泡還是捕獲
- DOM3 element.addEventListener("keyup",function(){},false)
- 增加了鍵盤、鼠標(biāo)等事件類型
2. DOM 事件模型
- 捕獲：從上往下
- 冒泡：當(dāng)前元素往上
3. DOM 事件流「如圖1」
4. 描述DOM事件捕獲的具體流程
- window -> document -> html -> body -> ...-> 目標(biāo)元素
5. Event 對象的常見應(yīng)用
- event.preventDefault() 阻止默認(rèn)行為，例如鏈接跳轉(zhuǎn)
- event.stopPropagation() 阻止冒泡行為
- event.stoplmmediatePropagation() 事件響應(yīng)優(yōu)先級，例一個(gè)按鈕綁定兩個(gè)點(diǎn)擊事件
- event.currentTarget 當(dāng)前被點(diǎn)擊的元素
- event.target 當(dāng)前綁定的事件
6. 自定義事件
```
//第一種方法
var eve = new Event("custome");
ev.addEventListener("custome",function(){
console.log("custome");
})
ev.dispatchEvent(eve);
缺點(diǎn)：只能指定事件名，不能添加數(shù)據(jù)
//第二種方法
CustomEvent 可以添加數(shù)據(jù)
// 首先創(chuàng)建一個(gè)事件
let myEvent = new CustomEvent("userLogin", {
detail: {
username: "davidwalsh"
}
});
// 觸發(fā)它！
myElement.dispatchEvent(myEvent);
```
圖1：
事件流->目標(biāo)階段: 捕獲
目標(biāo)階段-->事件流: 冒泡
實(shí)例：
Event
目標(biāo)元素
License
可以拷貝、轉(zhuǎn)發(fā)，但是必須提供原作者信息，同時(shí)也不能將本項(xiàng)目用于商業(yè)用途。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/93178.html
摘要：書接上文瀏覽器內(nèi)核之資源加載與網(wǎng)絡(luò)棧本文介紹的模型之后，深入的核心部分，剖析的解釋器是如何將從網(wǎng)絡(luò)或者本地文件獲取的字節(jié)流轉(zhuǎn)成內(nèi)部表示的結(jié)構(gòu)樹。事件處理最重要就是事件捕獲和事件冒泡這兩種機(jī)制。 showImg(https://segmentfault.com/img/remote/1460000016215814); 微信公眾號：愛寫bugger的阿拉斯加如有問題或建議，請后臺留言，我...
摘要：希望在做所有事情之前，操作文檔。不受層級限制子選擇器在給定的父元素下匹配所有子元素。相鄰選擇器匹配所有緊接在元素后的元素。判斷當(dāng)前對象中的某個(gè)元素是否包含指定類名，包含返回，不包含返回下標(biāo)過濾器精確選出指定下標(biāo)元素獲取第個(gè)元素。 原文鏈接 http://blog.poetries.top/2016... 首先，來了解一下jQuery學(xué)習(xí)的整體思路 showImg(https://seg...
摘要：是一個(gè)由可以接收事件的對象實(shí)現(xiàn)的接口，并且可以為它們創(chuàng)建偵聽器。方法節(jié)在上注冊特定事件類型的事件處理程序。將事件分派到此。代碼的其他方法節(jié)擴(kuò)展，供實(shí)現(xiàn)的事件目標(biāo)使用以實(shí)現(xiàn)屬性。級中是一般化的變動事件。 EventTarget EventTarget是一個(gè)由可以接收事件的對象實(shí)現(xiàn)的接口，并且可以為它們創(chuàng)建偵聽器。 Element，document 和 window 是最常見的事件目標(biāo)，但...
摘要：是一款輕量級易擴(kuò)展的播放器，是為解決一些中小型的視頻業(yè)務(wù)場景。同時(shí)各插件由于是面向的播放器接口，插件不知道插件的存在，因此能極大地降低各插件功能間的耦合。 larkplayer 是一款輕量級 & 易擴(kuò)展的 html5 播放器，是為解決一些中小型的視頻業(yè)務(wù)場景。這些業(yè)務(wù)不一定需要大而全的解決方案，并且他們往往有自己的定制化需求。 背景 為什么要編寫 larkplayer？（注意，這里面有...
摘要：是一款輕量級易擴(kuò)展的播放器，是為解決一些中小型的視頻業(yè)務(wù)場景。同時(shí)各插件由于是面向的播放器接口，插件不知道插件的存在，因此能極大地降低各插件功能間的耦合。 larkplayer 是一款輕量級 & 易擴(kuò)展的 html5 播放器，是為解決一些中小型的視頻業(yè)務(wù)場景。這些業(yè)務(wù)不一定需要大而全的解決方案，并且他們往往有自己的定制化需求。 背景 為什么要編寫 larkplayer？（注意，這里面有...
閱讀 2805·2019-08-30 15:55
閱讀 2853·2019-08-30 15:53
閱讀 2289·2019-08-26 13:47
閱讀 2551·2019-08-26 13:43
閱讀 3153·2019-08-26 13:33
閱讀 2794·2019-08-26 11:53
閱讀 1789·2019-08-23 18:35
閱讀 795·2019-08-23 17:16
