事件绑定的几种方法

内联 HTML 属性法

　　最简便也最难以维护的方式就是通过标签的特定属性来添加事件，例如：

<div onclick="alert('Ouch!')">click</div>

　　在这种情况下，只要该所在的区域被用户单击了，就会触发该标签的单击事件。与此同时，其 onclick 属性中的字符串就会被当做 JavaScript 代码来执行。尽管，这里并没有显式指定监听单击事件的函数，但相关环境在幕后已经为此创建了一个函数，函数的代码就等于我们为 onclick 属性设定的值。

元素属性法

　　关于单击事件函数，我们还有另一种编写方式，那就是将其设置为 DOM 元素节点的属性。例如：

<div id="my-div">click</div>

<script> 
 var myelement = document.getElementById('my-div'); 
     myelement.onclick = function() { 
     alert('Ouch!'); 
     alert('And double ouch!'); 
 } 
</script>

　　事实上这也是一种更好的选择。因为这种方式可以帮助我们理清与相关JavaScript代码之间的关系。一般情况下。我们总是希望页面中的内容归 HTML、行为归 JavaScript、格式归 CSS，并且三者之间应该尽可能彼此独立，互不干扰。

　　但这个方法也是有缺点的，因为这种做法只允许我们指定一个事件函数。

DOM的事件监听

　　对于浏览器来说，最佳的事件处理方式莫过于出自DOM Level2的事件监听器了。通过这种方式，我们可以为一个事件指定多个监听器函数。当事件被触发时，所有的监听器函数都会被执行。而且这些监听器不需要知道彼此的存在，它们的工作是彼此独立的。任何一个监听器的加入或退出都不会影响其它监听器的工作。

<p id="closer">final</p>

　　我们可以通过 addEventListener()方法为单击事件赋予相关的监听器。下面我们尝试赋予两个监听器：

var mypara = document.getElementById('closer'); 
    mypara.addEventListener('click', function(){ 
        alert('Boo!') 
    }, false); 
mypara.addEventListener( 
    'click', console.log.bind(console), false);

　　如您所见，addEventListeners()方法是基于某一节点对象来调用的。它的首参数是一个事件类型的参数，第二个参数是一个函数指针，它可以是 function(){alert('Boo!')}这样的匿数，也可以是 console.log()这样的现存函数。该监听器函数会在相关事件发生时被调用，调用时会接收到一个事件对象参数。如果我们运行上面的代码，就可以在控制台看到所记录的事件对象。单击事件对象可以查看其属性

原文地址：https://www.cnblogs.com/weizhanyu/p/11045264.html