1、传统注册方式
利用on开头的事件onclick
<button type=“button” οnclick=“alert(‘...’)”>
btn.onclick = function() {}
这种方式的特点是:注册事件具有唯一性。
同一个元素同一个事件只能设置一个处理函数,最后注册的处理函数将会覆盖前面注册的处理函数。
举例:
<body>
<button type="button">传统注册方式</button>
<button type="button">方法监听注册方式</button>
<script type="text/javascript">
var btns = document.querySelectorAll('button');
btns[0].onclick = function () {
alert('我是第一个');
}
btns[0].onclick = function () {
alert('我是第二个');
}
</script>
</body>
最终点击按钮弹出的是“我是第二个”
2、方法监听注册方式:w3c标准推荐方式。
addEventListener() 它是一个方法 ,IE9以前的IE不支持此方法,可使用attachEvent()代替。
这种方式的特点是:同一个元素,同一个事件可以注册多个监听器。按注册顺序依次执行。
eventTarget.addEventListener(type,listener[, useCapture])
eventTarget.addEventListener()方法将指定的监听器注册到eventTarget(目标对象)上,当该对象触发指定的事件时,就会执行事件处理函数。
该方法接收三个参数∶
type:事件类型字符串,比如click、mouseover ,注意这里不要带on
listener:事件处理函数,事件发生时,会调用该监听函数
useCapture : 可选参数,是一个布尔值,默认是false。
举例:
btns[1].addEventListener('click',function(){
alert('我是方法监听注册方式')
})
btns[1].addEventListener('click',function(){
alert('继续弹出')
})
IE9版本以前支持(了解)
eventTarget.attachEvent (eventNameWithOn,callback)
eventTarget.addEventListener()方法将指定的监听器注册到eventTarget(目标对象)上,当该对象触发指定事件时,就会执行事件处理函数。
该方法接收2个参数:
eventNameWithOn:事件类型字符串,比如onclick、onmouseover ,这里要带on
callback:事件处理函数,当目标触发事件时回调函数被调用