注册事件
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()
原文地址：https://www.cnblogs.com/xiaoliwang/p/9040506.html
时间： 2024-11-10 19:14:04