1. 事件流
    1. 冒泡

      定义：事件开始时由最具体的元素接收，然后逐级上传到较为不具体的节点。（IE9、FF、Chrome、Safari会将事件一直冒泡到window对象。IE5.5及其以下会跳过<html>元素，直接从body跳到document）。若发生事件的节点元素并没有绑定该事件，则这个动作会向上冒泡，直到被执行，一直冒泡到window对象。

      阻止冒泡：①使用stoppropagation()

      ②在函数中进行一次判断，if(event.target==event.current.target){function(){……}}

    2. 捕获

      定义：不太具体的节点先接收到事件，而具体的节点之后接收到事件。（老版浏览器不支持事件捕获。IE9、FF、Chrome、Opera、Safari均支持事件捕获，且从window开始捕获）

    3. 事件流：事件流分为三个阶段。即，捕获阶段，处于目标阶段，冒泡阶段。（DOM2级事件规范要求捕获阶段不涉及事件目标，但是IE9、FF、Chrome、Opera9.5、Safari都会在捕获阶段接触发生在事件对象上的事件，结果即是有两个机会在目标对象上面操作事件。IE8以及更早版本不支持DOM事件流）
  2. 事件处理程序：
    1. HTML事件处理程序：
      1. 嵌入到行间中
      2. 可以实现具体的动作，如alert等。也可以用来调用其他函数。
      3. 代码在运行时，有权访问全局作用域中的所有变量。
      4. 可以像访问局部变量一样访问document以及该元素本身的成员。（P349）若为表单输入元素，作用域中还会包含表单元素入口，即无需引用表单元素就能访问其他表单内容。
      5. 问题：时差，耦合
    2. DOM0级事件处理程序：
      1. 将一个函数赋值给一个事件处理程序属性。如btn.onclick = function(){….}。所有浏览器均支持此方法。
      2. 在函数的作用域中运行。This引用当前元素。
      3. 以此方法添加的事件处理程序会在事件流的冒泡阶段被处理。
      4. 删除：btn.onclick = null
    3. DOM2级事件处理程序：
      1. 指定/删除事件处理程序：addEventListener()    /    removeEventListener()，参数为a、要处理的事件名（没有on）b、作为事件处理程序的函数c、布尔值（true：捕获时调用，false冒泡时调用）在元素作用域中运行。
      2. 可以添加多个事件处理程序。删除时需参数完全相同，即匿名函数无法删除。
      3. IE8以下不兼容。
    4. IE事件处理程序
      1. attachEvent()        /    detachEvent()，参数为a、事件处理名称（有on）b、事件处理函数
      2. 该方法将添加事件至冒泡阶段。可添加多个事件处理程序。只有IE/Opera兼容
      3. 在全局作用域中运行，this = window。
      4. 事件不以添加顺序运行，以相反顺序触发

5、跨浏览器的事件处理程序    P353。两段兼容性代码见书。

三、事件对象：在触发DOM上的某事件时，会产生一个事件对象event，这个对象中包含着所有与事件相关的信息。

1、DOM中的事件对象：兼容DOM的浏览器会将一个event对象传入到事件处理程序中。（不需要一定将event写在function的参数里）。在HTML事件处理程序中，变量event储存着event对象。

  1. currenTarget，事件处理程序当前正在处理事件的那个元素 =this。即事件注册到的那个元素。
  2. target，事件的目标。比如，鼠标点击哪个元素，则target就指向该元素。
  3. type，事件类型
  4. preventDefault()，阻止事件的默认行为。前提需设置cancelable为true。
  5. stopProgation()，停止捕获和冒泡。

2、IE中的事件对象：

  1. 使用attachEvent，event作为参数传入事件处理程序，也可以通过window访问。（Edge不支持attachEvent）
  2. 在使用DOM0方法添加事件处理程序时。Event对象作为window对象的一个属性存在。Var event =window.event。（经测试，在DOM0方法中，不将event当做参数传入，也不将他定义为变量，直接比较event与window.event，二者完全相同。Chrome下）。
  3. HTML事件处理程序，通过一个名为event的变量访问event。
  4. 注意，因为事件处理程序的作用域是根据指定他的方法决定的，所以不能认为this会始终等于事件目标。使用event.srcElement比较保险，与DOM中的target相同。
  5. returnValue=preventDefault        cancelBubble（只能取消冒泡）=stopPropagation
  6. 跨浏览器的事件对象P360

JS高级程序设计学习笔记之JS事件（1）的更多相关文章

  1. JS高级程序设计学习笔记之第三章基本概念（语法，数据类型，流控制语句，函数）——查漏补缺

    一.语法: 区分大小写; 2.标识符:就是指变量.函数.属性的名字,或者函数的参数 a.标志符的规则:①第一个字符必须是一个字母.下划线(_)或一个美元符号($).                   ...

  2. JS高级程序设计学习笔记1

    javascript产生的原因: 在拨号上网时代,表单数据必须发送到服务器端才能验证输入值得有效性,JavaScript的研发就是为了解决这个问题,以便在客户端就验证输入值的有效性. ECMAScri ...

  3. JS高级程序设计学习笔记——继承

    我们知道,在OO语言中,继承可分为接口继承和实现继承.而ECMAScript的函数没有签名,不能实现“接口继承”,只能通过原型链实现“实现继承”. 在学习了各种继承模式之后,简单总结一下各种继承模式的 ...

  4. JS高级程序设计学习笔记之基本包装类型

    概述 基本类型:string.boolean.number 每当读取一个基本类型的值的时候,后台就会创建一个对应的基本包装类型的对象,从而让我们能够调用一些方法来操作这些数据. 使用new操作符创建的 ...

  5. JS高级程序设计学习笔记之RegExp类型

    创建正则表达式: 字面量形式定义正则表达式: Var expression = / pattern /flags ;pattern部分可以使任意简单或复杂的正则表达式.每个正则表达式可以带有一个或多个 ...

  6. JS高级程序设计学习笔记之Date类型

    日期对象的创建:var now =new Date(),不传递参数时,对象自动获取当前时间.(若要创建特定日期与时间的对象,必须传入该日期距离1970/1/1零点的毫秒数). Date.parse() ...

  7. JS高级程序设计学习笔记之数组

    数组创建的方式 var str = new Array();放入数字即为设置数组长度 var str = []; 数组的length可读可写 监测数组 Array.isArray()方法确定某个值是不 ...

  8. 《JS高级程序设计》笔记 —— 解析查询字符串

    今天在继续翻阅<JS高级程序设计>的时候,正好翻到location对象这一小节,其中有一部分就是讲的解析查询字符串.看到这个内容立马想到了做去哪儿秋招笔试题的时候有这么一道题. 去哪儿笔试 ...

  9. javascript高级程序设计学习笔记

    javascript高级程序设计,当枕头书已经好久了~zz  现在觉得自己在js的开发上遇到了一些瓶颈,归根究底还是基础太薄弱,所以重新刷一遍js高程希望有更新的认识. 一.javascript简介 ...

随机推荐

  1. Java线程同步与死锁认识

    讲下自己的认识,算小小的总结吧! synchroized 具有同步线程的功能,它的处理机制类似于给参数里面的对象赋一个标记值,来表明当前状态,当程序里面某个线程执行synchroized里面的代码段时 ...

  2. python 元类与定制元类

    1:元类 元类:类的创建与管理者 所有类的元类是type class a: pass print(type(a)) 结果:<class 'type'> 2:定制元类 类的实例化过程:(可看 ...

  3. 从客户端检测到有潜在危险的Request.Form值

    1.带有html标记内容提交(使用web编辑器): js: <script type="text/javascript"> //简单模式 var editor; Kin ...

  4. 查询矩形范围内的"点"要素

    步骤 1,首先在含有主视图控件 ESRI.ArcGIS.Controls.AxMapControl mapCtrl_main 的主类中定义一个 IEnvelope 成员变量,用于记录鼠标在主视图控件画 ...

  5. Arcgis Engine - 鹰眼(减少闪烁)

    网上看到的代码,都是一个模样,经过不断调试,无意中效果就可以了.主要是在"鼠标拖动的时候",网上的代码的鹰眼效果,感觉坑爹死了,闪烁超级严重.主要原因是鼠标拖动的时候,进行时时更新 ...

  6. (一)Android开发之安卓系统的前世今生

    1 什么是Android Android中文名称"安卓",英文含义为"机器人",Android是谷歌旗下的一款基于linux平台的开源操作系统.主要使用于移动设 ...

  7. （原）torch使用caffe时，提示CUDNN_STATUS_EXECUTION_FAILED

    转载请注明出处: http://www.cnblogs.com/darkknightzh/p/6230227.html 提前说明:此文不能真正解决该问题,具体原因我也不知道... 以前使用某台电脑A上 ...

  8. mysql快速入门

    一.下载并解压 $ wget http://cdn.mysql.com/Downloads/MySQL-5.5/MySQL-5.5.42-1.el6.x86_64.rpm-bundle.tar 解压后 ...

  9. 菜鸟做HTML5小游戏 - 翻翻乐

    记录下开放过程.做小游戏开发,又要跨平台,flash又不支持iPhone,html5是最好的选择. 先看看最后效果: 好了,开始demo. 1.准备工作: 图片素材(省略...最后代码一起打包) 了解 ...

  10. 3月25日html(六) Javascrip

                             第1部分 JavaScript简介 1.JavaScript它是个什么东西? 它是个脚本语言,需要有宿主文件,他的宿主文件是html文件. 2.它与J ...