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();阻止事件的传播。

  • 相关阅读:
    Linux安装zookeeper以及部署dubbo-admin
    springboot+layui+mybatis-plus的批量删除(批量修改)
    springboot打包jar与war包
    drf-books系列接口作业和分页器
    drf-过滤排序异常处理封装Response对象
    drf-认证权限频率
    drf-路由组件
    视图组件
    请求和响应
    Serializer和ModelSerializer
  • 原文地址:https://www.cnblogs.com/bianhao9527/p/5886381.html
Copyright © 2011-2022 走看看