给元素添加事件,称为注册事件或者绑定事件
传统注册方式
- 利用on开头的事件onclick
- <button onclick = "alert('hi')"></button>
- btn.onclick = function() {}
- 特点:注册事件唯一,同一个元素同一个事件只能设置一个处理函数,后设置的处理函数会覆盖前面注册的处理函数
方法监听注册方式
- w3c标准推荐方式
- addEventListener()是一个方法
- IE9之前的IE不支持此方法,可以使用attachEvent()代替
- 移动端开发推荐
- 特点:同一个元素同一个时间可以注册多个监听器
addEventListener事件监听方式
eventTarget.addEventListener(type, listener[, useCapture])
eventTarget.addEventListener()方法将指定的监听器注册到eventTarget(目标对象)上,当该对象触发指定的事件时,就会执行事件处理函数
该方法接受三个参数:
- type:事件类型字符串,比如:click,mouseover,不需要带on(例如onlick,只用写click)
- listener:事件处理函数,事件发生时,会调用该监听函数
- useCapture:可选参数,是一个布尔值,默认为false
语法:
<body>
<button>方法监听注册事件</button>
<script>
// 事件监听注册事件 里面的事件类型是字符串 必须带引号 不带on
// 同一个事件可以添加多个监听器(事件处理程序)
var btn = document.querySelector('button');
btn.addEventListener('click',function() {
alert(22);
})
btn.addEventListener('click',function() {
alert(33);
})
</script>
</body>
attachEvent事件监听方式(IE9之后不支持)
eventTarger.attachEvent(eventNameWithOn, callback)
eventTarget.attachEvent()方法将指定监听器注册到eventTarget(目标对象)上,当对象触发指定事件时,指定的回调函数就会被执行
该方法接受两个参数:
- eventNameWithOn: 事件类型字符串,比如onclick,onmouseover,这里需要带on
- callback: 事件处理函数,当目标出发事件时回调函数被调用
语法:
<body>
<button>方法监听注册事件</button>
<script>
// attachEvent IE9以前的版本支持
var btn = document.querySelector('button');
btn.attachEvent('onclick', function() {
alert(11);
})
</script>
</body>
兼容性问题解决方案
function addEventListener(element, eventName, fn) {
//判断当前浏览器是否支持addEventListener方法
if(element.addEventListener) {
element.addEventListener(eventName, fn);
}else if(element.attachEvent) {
element.attachEvent('on' + eventName, fn);
}else {
//相当于element.onclick = fn;
element['on' + eventName] = fn;
}
}