关于js的事件绑定以及优缺点

面试的时候，面试官问我关于事件绑定有几种方式的时候，由于自己对于事件监听不熟悉而且从来没有用过，所以当时这题答得并不好，后来也就没面试上，因此回去之后好好补习了一下关于js和jquery的事件绑定的方式，现总结如下：

js的事件绑定方法

1. 在DOM元素后面直接写方法，如：<a href="#" onclick="edit()">编辑</a>
2. 在JavaScript代码`中绑定，如：

<button id="edit">编辑</button>
 <script>
     var btn=document.getElementById("
     edit");
     btn.onclick=function(){
        alert("我是用js代码写的事件绑定");
}
 </script>

3.绑定事件监听函数，如：

<button id="edit">编辑</button>
 <script>
     var btn=document.getElementById("
     edit").addEventListener('click',edit);
 </script>

以上3种便是js的所有的事件绑定的方法，那么下面就来说下这三种的优缺点了。

1. 第一种直接在DOM元素上进行的绑定事件，不利于行为和结构相分离，耦合度太高，不建议在项目中使用。并且在遇到相同类型的事件时，只会去处理第一个事件，而忽略后续的事件。如：

‘`<button id="edit" onclick="editInfo()" onclick="editDel()">编辑</button>
<script type="text/javascript">
function editInfo(){
    alert("我是事件绑定1");
 }
function editDel(){
     alert("我是事件绑定2");
  }
</script>`’’

显示结果如下：

2.第二种在js代码中进行事件绑定，好处是将行为与结构分离开了，但是这个在处理相同类型的事件时，只会去寻找最后一个绑定事件，而忽略前面的所有绑定事件，如：

<button id="edit">编辑</button>
<script type="text/javascript">
var btn=document.getElementById("edit");
btn.onclick=function(){
   alert("我是点击事件1");
 }
btn.onclick=function(){
     alert("我是点击事件2");
}
</script>

显示结果如下：

3.第三种利用事件监听进行的事件绑定，好处自然是可以绑定多个相同类型的事件，同时也将行为和结构很好的分离，降低了耦合度，如：

<button id="edit">编辑</button>
<script type="text/javascript">
   var btn=document.getElementById("edit");
   btn.addEventListener('click',editInfo); 
   btn.addEventListener('click',editDel);             
   function editInfo(){
       alert("我是利用事件监听进行的事件绑定1");
   }
   function editDel(){
       alert("我是利用事件监听进行的事件绑定2");
   }
</script>

结果如下：

以上便是我对于js事件绑定的方法以及各种方法优缺点的理解，可能有所不足，还希望各位大神给我补充。原来还想写jquery的事件绑定以及优缺点来着，但是时间略晚，我决定去睡个美容觉，留明天继续整理啦，哈哈，晚安。