js中的事件部分总结

一、HTML事件

    HTML事件处理就是直接在HTML标签上添加事件,举例

     <p class="" onclick=function(){alert(HTML事件)}></p>

    这种方式的好处是简单易懂,兼容性好。

    缺点是代码的耦合性太高,不便于修改,而且一个事件只能监听一个function,多个function会被覆盖,并且事件无法删除。

二、DOM 0级处理事件

    DOM 0级处理事件可以理解成通过修改标签元素的onclick属性,来加入事件。 举例

    <div id="btn"></div>

    <script>

      var btn=document.getElementById("btn");

      btn.onclick=function(){alert(DOM 0级事件)} 

    </script>

      删除方式为

      btn.onclick=null;

    这种方式的优点是耦合较低,产生的问题是只能监听一个事件,容易被覆盖。

三、DOM 2级处理事件(重点)

    DOM 2级处理事件是通过addEventListener(参数一,参数二,参数三)的方式添加事件

     其中

     参数一:事件类型,如onclick onload,但在参数一种,前面的On 需要省略。

     参数二:回调函数:可以直接为某个function(){},也可以将函数提取,直接写函数名,不必添加括号

     参数三:定义冒泡或捕获,true为捕获,false为冒泡,考虑到兼容器的问题(IE 678只支持冒泡,不支持捕获)在这里推荐使用false——冒泡

     function Dom(){alert(“DOM 2级处理事件”)}

     addEventListener("click",Dom,false);

     这里删除监听的方式为

     removeEventListener("click",Dom,false);

    DOM 2级处理事件的有点是不会被覆盖,一次性可以添加多个监听事件,缺点是IE 8之下不可用(IE 8之下使用IE事件的处理程序)

四、 IE事件的处理程序(补充)

    IE 6 7 8 9 10都支持的一种专属事件方式,通过attachEvent添加事件

    举例

    attachEvent(参数一,参数二)

    其中参数一为事件类型,但和DOM 2级事件不同,这里的事件类型前面需要加上On

    参数二为回调函数

    因为是IE专属,默认为冒泡处理,所以没有参数三

    举例:

      function Ie(){alert(IE专属事件)}

         btn.attachEvent("onclick",Ie);

       删除事件用detachEvent

       btn.detachEvent("onclick",Ie);

      

        

原文地址:https://www.cnblogs.com/yuyufeng/p/5563370.html