注册事件有两种方式,一种是之前的传统的注册事件方式,还有一种是事件侦听注册方式,两者在效果输出上有一定的差异。
传统的注册事件:没有兼容性问题,同一个元素同一个事件只能设置一个处理程序,最后写入的处理函数会覆盖掉之前的,并且事件前有 ‘on’,例如 onclick ,onmouseover 等等。
事件侦听注册事件(addEventListener):是W3C推荐的方式,但是有兼容性问题,IE9以下浏览器不可使用此方法(可以使用 attachEvent),优点为同一个元素同一个事件可以设置多个处理程序,里面的参数事件类型是字符串,要加引号,并且不带 ‘on’。
事件侦听注册事件:
addEventLisenter(“type” ,listener,[useCapture])
- type:事件类型(格式为字符串),不加on,例:click,mouseover,mouseout
- listener:事件处理函数,事件发生时,会调用该监听函数
- useCapture:可选参数,是一个布尔值,默认为false,DOM事件流会用到
<button>按钮1</button>
<script>
var btn=document.querySelector('button');
btn.addEventListener('click',function(){
alert('我出现了');
})
btn.addEventListener('click',function(){
alert('我又又又出现了');
})
</script>
同一个按钮添加了两次事件后,两次事件会依次显示,和传统注册事件不同