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. 前端笔试题目小结--获取输入参数用户名；查询URL字符串参数

    编写一个JavaScript函数getSuffix,用于获得输入参数的后缀名.如输入abc.txt,返回txt. str1 = "abc.txt"; function getSuf ...

  2. Android Intent到底能做些什么

    Android Intent到底能做些什么 原文:http://www.toutiao.com/i6348296465147757058/?tt_from=mobile_qq&utm_camp ...

  3. Zookeeper+Kafka+Storm+HDFS实践

    Kafka是一种高吞吐量的分布式发布订阅消息系统,它可以处理消费者规模的网站中的所有动作流数据. Hadoop一般用在离线的分析计算中,而storm区别于hadoop,用在实时的流式计算中,被广泛用来 ...

  4. java比较器Comparator 使用

    PresonDemo package cn.stat.p5.person.demo; public class PresonDemo implements Comparable { private S ...

  5. MySQL查询数据表中数据记录（包括多表查询）

    MySQL查询数据表中数据记录(包括多表查询) 在MySQL中创建数据库的目的是为了使用其中的数据. 使用select查询语句可以从数据库中把数据查询出来. select语句的语法格式如下: sele ...

  6. hdu5353

    模拟,,, 每个人有一些糖果,每两个人之间只能给一个糖果,问最后是否能让所有人的糖果数量相同,只要确定一个糖果的流向其他的就能够确定. 马虎了,卡了好几天,心塞塞的... #include<io ...

  7. ECMAscript v.s. Javascript

    ECMAscript是一种中性的语言,中性表示与所处环境(宿主环境)无关(客户端/服务器/浏览器),它仅仅是一个纯粹意义上的语言. ECMAscript-262定义了这门语言的基础,或者说规则(比如说 ...

  8. (搬运工)推荐！国外程序员整理的 C++ 资源大全

    标准库 C++标准库,包括了STL容器,算法和函数等. C++ Standard Library:是一系列类和函数的集合,使用核心语言编写,也是C++ISO自身标准的一部分. Standard Tem ...

  9. MySql中查询表中的列名

    例如我的数据库名为"example",使用 USE example; 确定使用example数据库.使用 show tables; 显示数据库中的所有表.使用 DESC perso ...

  10. 容器 set

    SET 是个有序表!他会根据INSERT的数值自动排序! SET里面不可能出现相同的元素!SET在insert的时候会排重的! SET本质上是一种树结构,在检索上比链表快,插入比数组方便,但是不允许重 ...