事件js
1.addEventListener() 事件监听
2.事件解绑(removeEventListener)
3.DOM事件流
事件js
1.addEventListener() 事件监听
1
2
3
| button.addEventListener('click',function(){
console.log("监听事件---1")
}) 事件监听
|
2.事件解绑(removeEventListener)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
button
<script>
let fn = function(){
div.classList.toggle("active");
}
add.addEventListener("click", fn) // 监听事件
remove.addEventListener('click', function(){
// not enouth argunments
// 事件类型 第二个参数， 处理函数
add.removeEventListener('click', fn)
})
</script>
|
DOM事件流
事件发生时在元素之间的传播顺序—–事件流
事件对象
e.target ——》事件对象
e.type ——-》事件类型
e.preventDefault() ——-》阻止默认事件
e.stopPropagation() ——-> 阻止冒泡事件
1
2
3
4
5
6
7
8
9
10
11
12
| let link = document.querySelector("a");
let form = document.querySelector("form");
link.addEventListener('click',function(e){
e.preventDefault();
console.log("a标签")
})
form.addEventListener('click',function(e){
e.preventDefault();
console.log("form标签")
})
|
事件委托
注意：说白了就是，不给子元素注册事件，给父元素注册事件，把处理代码在父元素的事件中执行