zoukankan      html  css  js  c++  java
  • 浅谈Js中关于事件处理函数执行顺序的问题

    Js给dom元素绑定事件的处理函数总的来说有两种方式:在html文档中绑定,在js代码中绑定。

    然而,并不推荐在html标签上绑定事件。

    在js代码中也可以分两种方式绑定事件:

      1:通过dom元素的onclick等属性,直接绑定;

      2:

        a.在ie下使用attachEvent/detachEvent函数的方式进行事件的绑定和取消;

        b.使用W3C标准的addEventListener和removeEventListener,给dom添加事件监听者和移除。

    第一种方式只能绑定一个事件处理函数,后面的会覆盖前面的。不存在事件处理函数的执行顺序问题。

    在第二种方式中attachEvent和addEventListener的方法都可以绑定多个事件处理函数,而不会被覆盖。两者除了兼容性问题以外,还有其他区别:

      1:this的含义,attachEvent中this是window,addEventListener中的this是绑定的dom对象呀;

      2:attachEvent仅支持事件冒泡,addEventListener可以支持事件冒泡,也支持事件捕获;

    事件处理函数的执行顺序:

      1.如果通过addEventListenerattachEvent方法给同一个事件绑定多个处理函数,先绑定的先执行不涉及事件冒泡和事件捕获的问题。

      2.如果在addEventListener函数的第三个参数中设置了事件冒泡或者事件捕获的情况,那么:先调用捕获阶段的处理函数,其次调用目标阶段的处理函数,最后调用冒泡阶段的处理函数

      其中,目标阶段函数的执行顺序:先注册的先执行,后注册的后执行

    阻止事件冒泡和捕获的方法:

      IE8以及以前可以通过 window.event.cancelBubble=true;阻止事件的继续传播;

      IE9+/FF/Chrome通过event.stopPropagation();阻止事件的传播。

  • 相关阅读:
    基于Nodejs生态圈的TypeScript+React开发入门教程
    防止 IE 自动跳兼容模式
    C# DateTime 转 JavaScript Date
    自制 Chrome Custom.css 设置网页字体为微软雅黑扩展
    比較C struct 與 C# unsafe struct内存分佈
    C/C++编程GUI库比较
    WIN32控件使用系统样式
    【转载】Layered Window(分层窗体,透明窗体)
    WM_COMMAND和WM_NOTIFY区别[转]
    MFC RichText 滚动条问题
  • 原文地址:https://www.cnblogs.com/bianhao9527/p/5886381.html
Copyright © 2011-2022 走看看