js事件监听的几种方式

2019独角兽企业重金招聘Python工程师标准>>>

js作为事件驱动的语言，那对事件的监听必不可少，那么在前端浏览器中有几种事件监听的方式呢。

1.html内联属性

<button type="button" onclick="alert('hello'')"></button>

该方式的缺点就是和html耦合高，尽量少使用

2.dom属性绑定

<div class="title"> hello </div>

var obj = document.getElementByClassName('title');
obj[n].onclick = function() {
    alert('hello');
}

该方式的缺点是只能绑定一个回调函数，如果想要绑定多个则无法实现，必须通过下面的注册事件监听函数的方式

3.使用事件监听函数

<div class="title"> hello </div>

var obj = document.getElementByClassName('title');
obj[n].addEventListener('click', function() {
    alert('hello');
}, false); 
obj[n].addEventListener('click', function() {
    console.log('hello');
}, false); 

可以添加任意多个监听函数，同时触发，当有耗时操作时，将耗时和非耗时操作区分开来效果比较明显 注:事件监听函数的格式

转载于:https://my.oschina.net/u/1249401/blog/805317