这里写目录标题
- 概念
- 1. 传统方式(on~)
- 注册事件
- 解绑事件
- 2. 事件监听注册方式 addEventListener()
- 注册事件
- 解绑事件
- 3.两种方式的区别
- 传统方式
- 事件监听注册方式
概念
给元素添加事件,称为注册事件或绑定事件。
给元素移除事件,称为解绑事件。
1. 传统方式(on~)
注册事件
以on开头的事件:
onclick(鼠标单击),onmousemove(鼠标移动)等等
语法:
target.onclick=function(){};
举例:给button注册事件,使按下打印数字1
<button>按钮</button>
<script>
let btn=document.querySelector('button');
//注册事件
btn.onclick=function(){
console.log('1');
}
</script>
//打印1,一直点击按钮一直打印
解绑事件
语法:
eventTarget.onclick=null;
EventTarget(目标对象) 是一个 DOM 接口,由可以接收事件、并且可以创建侦听器的对象实现。
Element,document 和 window 是最常见的 event targets。
举例:
<button>按钮</button>
<script>
let btn=document.querySelector('button');
btn.onclick=function(){
console.log('1');
btn.onclick=null;//解绑事件
}
</script>
//页面打印一个1后被解绑,再次点击不再打印
2. 事件监听注册方式 addEventListener()
注册事件
语法:
target.addEventListener(type, listener, useCapture);
addEventListener()方法将指定的监听器注册到eventTarget(目标对象)上,当该对象出发指定事件时,就会执行该事件处理函数。
type:事件类型字符串,eg:click,mouseover等(此方法不加on)
listener:事件处理函数,事件发生时,会调用该监听函数。
useCapture:可选参数,是一个布尔值,未定义时默认为false.
- false:在事件冒泡阶段调用事件处理程序(从下到上)
- true:在事件捕获阶段调用事件处理函数(从上到下)
举例:
<button>按钮</button>
<script>
let btn=document.querySelector('button');
btn.addEventListener('click',function(){
console.log('1')
})
</script>
//打印1,一直点击按钮一直打印
解绑事件
语法:
target.removeEventListener(type, listener[, useCapture]);
举例:
<button>按钮</button>
<script>
//绑定
let dom=function(){
console.log('绑定')
}
let btn=document.querySelector('button')
//为了能够解绑,将dom定义在外边
btn.addEventListener('click',dom,false);
//解绑,保持与addEventListener里的参数一致才能解绑成功
btn.removeEventListener('click',dom,false)
</script>
如果在定义事件时使用内部函数(也就是没有名称的的函数),解绑将会失败。所以事件解绑成功的主要原因就是:保持addEventListener和removeEventListener里面的参数一致。
3.两种方式的区别
传统方式
注册事件具有唯一性,同一元素同一事件只能设置一个处理函数,最后注册的处理函数会覆盖前边注册的处理函数。
举例:
<button>按钮</button>
<script>
let btn=document.querySelector('button')
btn.onclick=function(){
console.log('1')
}
btn.onclick=function(){
console.log('2')
}
</script>
结果:点击按钮,只打印2,第一个注册的事件被第二个覆盖
事件监听注册方式
同一元素同一事件可以注册多个监听器,按注册顺序依次执行。
举例:
<button>按钮</button>
<script>
let btn=document.querySelector('button')
btn.addEventListener('click',function(){
console.log('1')
})
btn.addEventListener('click',function(){
console.log('2')
})
</script>
结果:打印1和2,第一个注册的事件不会被覆盖