JS 事件 Event
阿新 • • 發佈：2018-05-15
option 來源 body capture AR a標簽 all 組織 true
註冊事件
target.addEventListener(type, listener, options);
或者
target.addEventListener(type, listener, useCapture); //第三個選項為布爾值，表示是否啟用事件捕獲，默認不啟用false
事件類型參考 https://developer.mozilla.org/zh-CN/docs/Web/API/Event
刪除事件
target.removeEventListener(type, listener[, useCapture])
事件冒泡 / 事件捕捉
事件捕獲指的是從document到觸發事件的那個節點，即自上而下的去觸發事件。相反的，事件冒泡是自下而上的去觸發事件。綁定事件方法的第三個參數，就是控制事件觸發順序是否為事件捕獲。true,事件捕獲；false,事件冒泡。默認false,即事件冒泡
舉個栗子，點擊裏面的div 同時也會觸發外面div 的事件
<body>
<div id="outside">
<div id="inside">
</div>
</div>
</body>
</html>
<script>
document.querySelector(‘#outside‘).addEventListener(‘click‘,function(e){
console.log("i am outside");
})
document.querySelector(
兩種方法可以組織事件冒泡
- e.cancelBubble = true
- e.stopPropagation()
document.querySelector(‘#outside‘).addEventListener(‘click‘,function(e){
console.log("i am outside");
})
document.querySelector(
事件委托
事件委托就是事件冒泡的一種應用，舉個栗子，在下面dom中，如果想要給每個li上綁定click事件，需要循環遍歷每一個li，然後在給每一個li分別註冊事件，這顯然影響性能，因此我們可以通過事件委托來實現這一操作
<ul>
<li>hello 1</li>
<li>hello 2</li>
<li>hello 3</li>
<li>hello 4</li>
</ul>
我們給ul註冊點擊事件，事件會捕捉每一次li的點擊，將點擊對象保存在e.target ，而e.currectTarget中保存的是ul對象
<script>
let ul = document.querySelectorAll(‘ul‘)[0]
let aLi = document.querySelectorAll(‘li‘)
ul.addEventListener(‘click‘,function(e){
let oLi1 = e.target
let oLi2 = e.currentTarget
console.log(oLi1) // 被點擊的li
console.log(oLi2) // ul
console.og(oLi1===oLi2) // false
})
</script>
代碼來源：https://www.jianshu.com/p/1dd668ccc97a
阻止默認行為
什麽是默認行為？ 例如點擊a標簽後會自動跳轉，點擊submit按鈕後會提交等等
Event.preventDefault()
JS 事件 Event