DOM操作--添加事件处理程序

给DOM节点增加事件处理程序一般有以下3种方法

1：通过节点属性显式声明

      如以下代码所示，直接在HTML中，显式地为按钮绑定了click事件，当该按钮有用户点击行为时，便会触发myClickFunc方法

    

    <button id="hello" οnclick="myFunc ()">点我试试</button>

     myFunc 的定义在js中完成：

 <pre name="code" class="javascript">   <script type="text/javascript">
                var myFunc=function(evt){
                console.log("hello ,feifei");
           }</script>

2、通过节点属性动态绑定

       这种事件处理程序的绑定，属于第一种的变形，将一个函数赋值给一个事件处理程序属性。

       

    <button id="hello" >点我试试</button>

       通过DOM操作进行绑定：

     

   <script type="text/javascript">
              var myFunc=function(evt){
                console.log("hello ,feifei");
          }
         document.getElementById ('hello').οnclick=myFunc ;
       </script>

3、通过事件监听的方式

     通过addEventListener,接受3个参数，要处理的事件名，作为事件处理程序的函数，一个布尔值。布尔值的参数如果为true， 表示在捕获阶段调用事件处理程序，如果为false，表示在冒泡阶段调用事件处理程序。

     

 <button id="hello" >点我试试</button>

 

 <script type="text/javascript">
           var myFunc=function(evt){
           console.log("hello ,feifei");
         }
      document.getElementById ('hello').addEventListener ('click',myFunc);
     </script>

三种方法的优缺点

1、通过节点属性显式声明：存在时差问题，因为用户可能在HTML元素出现的时候就在页面触发相应的事件，但当时事件处理程序可能不具备执行条件；这样拓展事件处理的作用域链在不同的浏览器中会导致不同的结果；HTML与JavaScript代码紧密耦合，违背了HTML与JavaScript分离的原则。

2、通过节点属性动态绑定：一次只能添加一个事件处理程序

3、通过事件监听的方式：可以添加多个事件处理程序，是推荐用法