zoukankan      html  css  js  c++  java
  • 关于js中对事件绑定与普通事件的理解

      普通事件指的是可以用来注册的事件;

      事件绑定是指把事件注册到具体的元素之上。

    通俗点说:

      普通事件:给html元素添加一个特定的属性(如:onclick);

      事件绑定:js代码中通过标记(id  tag class)获取元素,给元素添加特定的方法(如:onclick);

    扩展:事件监听addEventListener事件可以绑定多次事件,并进行触发

    div1.onclick = function(){};
    
    <button onmouseover = " "></button>


      1、如果说给同一个元素绑定了两次或者多次相同类型的事件,那么后面的绑定会覆盖前面的绑定
      2、不支持DOM事件流 事件捕获阶段目标元素阶段=>事件冒泡阶段

    addEventListener
      ⦁ 如果说给同一个元素绑定了两次或者多次相同类型的事件,所以的绑定将会依次触发
      ⦁ 支持DOM事件流的
      ⦁ 进行事件绑定传参不需要on (在我们前端)

    addEventListener(“click”,function(){},true);   //此时的事件就是在事件冒泡阶段执行

    兼容性处理

    ie9开始   到ie11 edge:addEventListener

    ie9以前:attachEvent/detachEvent

      ⦁ 进行事件类型传参需要带上on前缀
      ⦁ 这种方式只支持事件冒泡,不支持事件捕获

    比较attachEvent 和 addEventListener:

    • attachEvent只支持事件冒泡  addEventListener既支持事件冒泡,也支持事件捕获
    • 参数: attachEvent事件类型需要on前缀, addEventListener事件类型不需要on前缀
    • 如果使用attachEvent对一个元素的目标阶段绑定了多次事件,那么会按照绑定顺序的相反顺序进行触发;如果使用addEventListener对一个元素的目标阶段绑定多次事件,那么会按照绑定顺序进行触发
  • 相关阅读:
    Grunt构建工具插件篇——之less工具
    Grunt构建工具能做哪些事?
    Grunt-几个常用的任务配置,加载,执行的写法
    单元测试任务包括哪些?
    单元测试的概念
    分享Grunt.js配置: watch + liveReload 实时监测文件变化自动刷新浏览器
    如何使用Grunt(好文)
    grunt安装详解及失败处理
    利用 Grunt (几乎)无痛地做前端开发 (一)之单元测试
    Grunt实现自动化单元测试
  • 原文地址:https://www.cnblogs.com/yc8930143/p/5450321.html
Copyright © 2011-2022 走看看