JS 事件 Event
Posted 吃饭睡觉打豆豆
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS 事件 Event相关的知识，希望对你有一定的参考价值。
注册事件
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(‘#inside‘).addEventListener(‘click‘,function(e){
console.log(‘i am inside‘);
})
</script>
两种方法可以组织事件冒泡
- e.cancelBubble = true
- e.stopPropagation()
document.querySelector(‘#outside‘).addEventListener(‘click‘,function(e){
console.log("i am outside");
})
document.querySelector(‘#inside‘).addEventListener(‘click‘,function(e){
// e.cancelBubble = true;
e.stopPropagation();
console.log(‘i am inside‘);
})
事件委托
事件委托就是事件冒泡的一种应用，举个栗子，在下面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的主要内容，如果未能解决你的问题，请参考以下文章
js 温故而知新 webkitTransitionEnd 监听Transition动画结束事件