1、事件流描述的是从页面接收事件的顺序

IE和Netscape提出了几乎完全相反的事件流概念

IE:事件冒泡(由内而外)

Netscape:事件捕获(由外向内)

DOM2级事件规定事件流包括三个阶段:事件捕获阶段、处于目标阶段、事件冒泡阶段

2、为事件指定处理程序的方式

2.1、HTML事件处理程序

  1. <script>
  2. function fun(){
  3. alert('clicked');
  4. }
  5. </script>
  6. <button onclick="func()">click me</button>

 缺点:1、时差  2、html代码语JavaScript代码耦合紧密,不易改动

2.2、DOM0级事件处理程序

获取要操作对象的引用

给对象的事件处理程序属性(如onclick)设置属性值为函数

以这种方式添加的事件会在事件流的冒泡阶段被处理

  1. var btn=document.getElementById('btn');
  2. btn.onclick=function(){
  3. alert(1);
  4. }

删除DOM0级事件处理程序:

  1. btn.onclick = null;

2.3、DOM2级事件处理程序

  1. var btn=document.getElementById("btn");
  2. btn.addEventListener("click",function(){
  3. alert("hello");
  4. },false);

三个参数:事件、处理函数、事件处理阶段(true捕获false冒泡)

最大的优点:可以为一个对象添加多个事件,不会相互覆盖,而是按某种顺序依次执行

移除事件:

  1. var btn=document.getElementById("btn");
  2. function fun(){
  3. alert("hello");
  4. }
  5. btn.addEventListener("click",fun,false);
  6. btn.removeEvemtListener("click",fun,false);

注意:removeEventListener()不能移除匿名函数,像下面这样也是无效的:

  1. var btn=document.getElementById("btn");
  2. btn.addEventListener("click",function(){
  3. alert("hello");
  4. },false);
  5.  
  6. btn.removeEventListener("click",function(){
  7. alert("hello");
  8. },false);

添加和移除的被认作两个不同的函数

大多数情况下,都是将事件处理程序添加到事件流的冒泡阶段,这样可以最大程度兼容各种浏览器

2.4、IE事件处理程序

IE8-浏览器值支持事件冒泡

有两个类似的方法:attachEvent()和detachEvent()

  1. var btn=document.getElementById("btn");
  2. function fun(){
  3. alert(this===window);//true
  4. }
  5. btn.attachEvent("click",fun);
  6. btn.detachEvent("click",fun);

总结:DOM2级和IE事件处理程序有何不同之处?

1.作用域:DOM2级事件处理与DOM0事件处理一样,作用域在当前元素(btn)的作用域中,IE事件处理程序的作用域是全局:window;

2.参数:个数不同,IE事件处理程序只支持冒泡;

3.是否有'on':DOM2无:'click',IE有:'onclick';

4.都支持添加多个事件,但执行顺序相反:DOM2按添加顺序,IE相反。

兼容浏览器的事件处理对象,以下:

  1. var EventUtil={
  2. addHandler:function(element,type,handler){
  3. if(element.addEventListener){
  4. element.addEventListener(type,handler,false);
  5. }
  6. else if(element.attachEvent){
  7. element.attachEvent('on'+type,handler);
  8. }
  9. else{
  10. element['on'+type]=handler;
  11. }
  12. }
  13.  
  14. removeHandler:function(element,type,handler){
  15. if(element.removeEventListener){
  16. element.removeEventListener(type,handler,false);
  17. }
  18. else if(element.detachEvent){
  19. element.detachEvent('on'+type,handler);
  20. }
  21. else{
  22. element['on'+type]=null;
  23. }
  24. }
  25.  
  26. }

JS事件(一)事件流&事件处理程序的更多相关文章

  1. JavaScript 事件 事件流 事件对象 事件处理程序 回调函数 error和try...catch和throw

    参考资料: 慕课网 DOM事件探秘    js事件对象 处理 事件驱动: JS是采用事件驱动的机制来响应用户操作的,也就是说当用户对某个html元素进行操作的时候,会产生一个时间,该时间会驱动某些函数 ...

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

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

  3. JavaScript Event 事件 事件流 事件对象 事件处理程序 回调函数 error和try...catch和throw

    参考资料: 慕课网 DOM事件探秘    js事件对象 处理 事件驱动: JS是采用事件驱动的机制来响应用户操作的,也就是说当用户对某个html元素进行操作的时候,会产生一个事件,该事件会驱动某些函数 ...

  4. JS事件流、事件监听、事件对象、事件委托

    JS事件流: 01.DOM级别和DOM事件 02.JS事件流:页面中接收事件的顺序 事件冒泡阶段-->处于目标阶段-->事件捕获阶段 (事件捕获总发生在事件冒泡前面) 03.捕获:从外向里 ...

  5. js事件常用操作、事件流

    注册事件 给元素添加事件,称为注册事件或者绑定事件. 注册事件有两种方式:传统方式和方法监听注册方式 传统方式 on开头的事件,例如onclick <button onclick="a ...

  6. js事件捕获,事件冒泡,事件委托以及DOM事件流

    一:DOM事件流: 事件流是从页面接收事件的顺序,DOM2级事件规定事件流包括三个阶段: ①事件捕获阶段:用意在于事件达到目标之前捕获它,在事件捕获阶段事件流模型:document→html→body ...

  7. js的事件流事件机制

    (1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. IE 5.5: div -> body -> document IE 6.0: div ...

  8. js事件流 事件捕获 及时间冒泡详解

    Javascript与HTML之间的交互是通过事件实现. 一.事件流 事件,是文档或浏览器窗口中发生的一些特定的交互瞬间.事件流,描述的是页面中接受事件的顺序.IE9,chrome,Firefox,O ...

  9. [已转移]js事件流之事件冒泡的应用----事件委托

    该文章已转移到博客:https://cynthia0329.github.io/ 什么是事件委托? 它还有一个名字叫事件代理. JavaScript高级程序设计上讲: 事件委托就是利用事件冒泡,只指定 ...

  10. javaScript事件(二)事件处理程序

    一.事件 二.事件流 以上内容见:javaScript事件(一)事件流 三.事件处理程序 前面提到,事件是用户或浏览器自身执行的某种动作,如click,load和mouseover都是事件的名字.响应 ...

随机推荐

  1. 让PC端页面在手机端显示缩小版的解决方法

    做页面的时候我们做好pC端页面时,因编辑那边需求,在手机端页面也应该是缩小版,不能乱的.在网上找了各种解决方案,经实验,这种是可以的: 在head里边加上这两句meta  <meta name= ...

  2. Java中的super()使用注意

    1)super(参数):调用基类中的某一个构造函数(应该为构造函数中的第一条语句)2)this(参数):调用本类中另一种形成的构造函数(应该为构造函数中的第一条语句)3)super: 它引用当前对象的 ...

  3. over-relaxation

    逐次超松弛sor 参考1https://blog.csdn.net/lusongno1/article/details/68941137 有各种对比和程序 主要就是取了加权平均,没仔细看

  4. poj-1724(bfs+优先队列)

    题意:有向图,给你m条边,每条边有两个权值,路径长和通过这条路径的花费,问你在不超过k花费的前提下,最短的路径从1走到n 解题思路:因为边数很少,我们可以直接用暴力每条边的方式来找最小的路径长,也就是 ...

  5. [离散时间信号处理学习笔记] 10. z变换与LTI系统

    我们前面讨论了z变换,其实也是为了利用z变换分析LTI系统. 利用z变换得到LTI系统的单位脉冲响应 对于用差分方程描述的LTI系统而言,z变换将十分有用.有如下形式的差分方程: $\displays ...

  6. 常用模块collections

    collections模块 在内置数据类型(dict.list.set.tuple)的基础上,collections模块还提供了几个额外的数据类型:Counter.deque.defaultdict. ...

  7. Qt QLineEdit

    //lineEdit显示文字 QLineEdit *lineEdit = new QLineEdit(widget); lineEdit->setObjectName(QString()); l ...

  8. NoClassDefFoundError与ClassNotFoundException

    原文地址: https://blog.csdn.net/jamesjxin/article/details/46606307 怎么解决NoClassDefFoundError错误 NoClassDef ...

  9. python基础成长之路三

    1,基础数据类型 总览 int :数字  用于计数,计算,运算等...1 , 2 , 3  , 100 , ... str :字符串  用户少量的数据储存,便于操作   "这就是字符串&qu ...

  10. Codeforces997C Sky Full of Stars 【FMT】【组合数】

    题目大意: 一个$n*n$的格子,每个格子由你填色,有三种允许填色的方法,问有一行或者一列相同的方案数. 题目分析: 标题的FMT是我吓人用的. 一行或一列的问题不好解决,转成它的反面,没有一行和一列 ...