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. 递归生成树对象，应用于Easyui，Tree控件

    1.生成树节点对象 /// <summary> /// 生成树的节点 /// </summary> public class TreeNode { public TreeNod ...

  2. Visual Studio Code使用typings拓展自动补全功能

    转自:http://blog.csdn.net/liyijun4114/article/details/51658087 参考来源: 官方介绍: https://code.visualstudio.c ...

  3. （转）OS X 升級後 MacPorts 重新安裝筆記

    原地址:http://blog.lyhdev.com/2012/07/os-x-macports.html Mac OS X 10.8 Mountain Lion 正式發佈,而且祭出台幣 $590 元 ...

  4. jq原创弹出层折叠效果

    弹出层效果很多网站上都用到,今天就整理最近项目里用到的一个小效果,点击折叠弹出一个层给用户填写信息.弹出层代码都是jq动态创建,每个人写法都不一样,需求也不一样,所有选择符合自已的即可. html: ...

  5. Symfony2 HttpKernel事件驱动

    HttpKernel:事件驱动       Symfony2 框架层和应用层的工作都是在 HttpKernel::handle()方法中完成,HttpKernel::handle() 的内部的实现其实 ...

  6. mac下 配置tomcat

    第一步: 1.打开你的终端:然后输入  pico .bash_profile   回车 第二步: 2. 然后添加你tomcat放入的路径的path 编辑完后,control+x   (保存)    继 ...

  7. ububtu 彻底卸载程序的几种方法

    sudo apt-get purge ......(点点为为程序名称) sudo apt-get autoremove sudo apt-get clean dpkg -l |grep ^rc|awk ...

  8. 转摘--如何利用多核CPU来加速你的Linux命令 — awk, sed, bzip2, grep, wc等

    http://www.vaikan.com/use-multiple-cpu-cores-with-your-linux-commands/ 你是否曾经有过要计算一个非常大的数据(几百GB)的需求?或 ...

  9. Keil的可重定位段

    对于一个大的文件,为了便于管理,一个好的办法时把一个大文件分为若干个小文件,每个小文件包含一部分相关的功能,这样功能将显得很整洁,而且移植到其它工程的时候也很方便,把文件copy过去即可. 对于汇编, ...

  10. Js树型控件Dtree使用

    dtree地址:http://destroydrop.com/javascripts/tree/ Key features Unlimited number of levels 无限级 Can be ...