注册事件
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
原文地址：https://www.cnblogs.com/xiaoliwang/p/9040506.html