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

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

通俗点说:

  普通事件:给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对一个元素的目标阶段绑定多次事件,那么会按照绑定顺序进行触发

关于js中对事件绑定与普通事件的理解的更多相关文章

  1. js和jQuery中的事件绑定与普通事件

    普通事件,是指直接对元素进行事件注册,然后触发 而事件绑定是将事件注册到元素上 两者区别就是在于普通事件不可以重复添加多个事件,若添加也会覆盖,只会触发其中一个事件(最后注册的那个) 而事件绑定是可以 ...

  2. python 全栈开发,Day55(jQuery的位置信息,JS的事件流的概念(重点),事件对象,jQuery的事件绑定和解绑,事件委托(事件代理))

    一.jQuery的位置信息 jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集 ...

  3. js中的前绑定和后绑定详解

    这篇文章详细介绍了js中的前绑定和后绑定,有需要的朋友可以参考一下 其主要意思就是看我有没有用过前绑定,即Dom树中的某些元素在还没有创建出来时,就指定该类型的元素一出生就应该拥有的某些事件.在实际开 ...

  4. (转载)js(jquery)的on绑定点击事件执行两次的解决办法

    js(jquery)的on绑定点击事件执行两次的解决办法—不是事件绑定而是事件冒泡 遇到的问题:jquery中用.on()给页面中新加的元素添加点击事件时,点击事件源,绑定的事件执行两次,这里的ale ...

  5. js课程 5-13 js事件绑定和鼠标事件注意事项有哪些

    js课程 5-13  js事件绑定和鼠标事件注意事项有哪些 一.总结 一句话总结:js代码的灵魂就是改变标签的属性和样式,就这两种. 1.js触发改的东西是哪两样? 属性和样式 2.js如何让页面用标 ...

  6. JS中事件绑定函数,事件捕获,事件冒泡

    1 事件绑定:事件与函数绑定以及怎么取消绑定 1.1 元素.onclick这种形式,如下: <div id="div1">aaa</div> <scr ...

  7. 使用call、apply和bind解决js中烦人的this,事件绑定时的this和传参问题

    1.什么是this 在JavaScript中this可以是全局对象.当前对象或者任意对象,这完全取决于函数的调用方式,this 绑定的对象即函数执行的上下文环境(context). 为了帮助理解,让我 ...

  8. js中this的绑定规则及优先级

    一.   this绑定规则 函数调用位置决定了this的绑定对象,必须找到正确的调用位置判断需要应用下面四条规则中的哪一条. 1.1 默认绑定 看下面代码: function foo() { cons ...

  9. js中同一个onclick绑定了两个js方法出现的问题

    问题: js中如果同一个onclick绑定了两个js方法问题,即 <li onclick="f1(),f2()"></li> 两个方法f1,f2中都分别有一 ...

随机推荐

  1. 利用jsPerf优化Web应用的性能

    在前端开发的过程中,掌握好浏览器的特性进行有针对性的性能调优是一项基本工作,jsperf.com是一个用来发布基于HTML的针对性能比较的测试用例的网站,你可以在jsPerf上在线填写和运行测试用例, ...

  2. 关于ln(link)命令

    一. ln分为硬链接和软链接. 二. 硬链接命令为: ln test/a.text hard.text 1. 这样hard.text拥有 test目录下a.text相同的i节点(inode的id号)和 ...

  3. 直接IO 零拷贝 DAM 自缓存应用程序

    直接IO  零拷贝  DAM  自缓存应用程序

  4. CSS语义化命名

    CSS语义化命名 从上图我们可以大概看出这里有两种CSS的命名方式:1.结构化命名法:2.语义化命名法. 结构化命名法:根据页面中板块的位置而命名,如上图中的content-left,这时如果我们想把 ...

  5. DevExpress控件学习总结

    1.Navigation & Layout 1.1 Bar Manager 如果想在窗体或用户控件(user control)上添加工具条(bars)或弹出菜单(popup menus),我们 ...

  6. .NET加密方式解析--散列加密

    在现代社会中,信息安全对于每一个人都是至关重要的,例如我们的银行账户安全.支付宝和微信账户安全.以及邮箱等等,说到信息安全,那就必须得提到加密技术,至于加密的一些相关概念,在这里就不说了. 这一次将会 ...

  7. IIS 搭建过程

      Windows自带iis管理器,也就是这个 <ignore_js_op> 我们可以用它来搭建一个网站,然后在局域网内可随意访问我们的电脑.   1.首先,iis的安装.        ...

  8. Linux shell 程序设计

    shell 程序设计 主要的学习内容包含基本思路,语法:变量.条件判断和程序控制,命令列表,函数,命令及执行,调试,grep命令和正则表达式,find命令 什么是shell 适用编写执行相对简单任务的 ...

  9. libx264 安卓编译

    https://github.com/RoyGuanyu/build-scripts-of-ffmpeg-x264-for-android-ndk/blob/master/ffmpeg/build_a ...

  10. Python学习笔记(一)数据类型

    一.整型和浮点型 Python可以处理任意大小的整数,当然包括负整数,在程序中的表示方法和数学上的写法一模一样 age=10 num=-35 score=98.8 二.布尔类型 布尔值和布尔代数的表示 ...