红宝书 第13章整理——事件

1、事件流——冒泡，捕获，DOM2

事件流：从页面接受事件的顺序，分为

旧版：冒泡，捕获

新版（W3C）：DOM2

事件冒泡：

即事件从最深的那个节点开始，逐级向上传播   button--body--html--document

事件捕获：

逐级向下，从模糊到具体  document--html--body--button     //现在很少人使用捕获，大部分都是冒泡

DOM2：

1、在处理DOM2级定义的事件时，会经历三个阶段

2、先捕获——再处理目标——再事件冒泡

2、事件的处理——DOM0（HTML+DOM0），DOM2级事件

① HTML中直接写事件

就是在HTML文件中的元素标签中，直接内嵌

<button onclick="...">

<input type = "button " value="click me" oncilck="alert('clicked')"/>

注意在此处alert中的text文本最好用单引号，要是用双引号就需要将其转义

也可以调用外部js文件引入的事件，或者在<script>标签中直接写的

<input type="button" value="click me" onclick="show()"/>   //show()函数为外部的函数

事件处理程序中的代码执行时有权访问全局作用域

可以用this，指代的是该元素

缺点：

1、可能存在时差问题：HTML文件读取解析的时候是有顺序的，可能还没有解析到事件处理函数的时候用户就触发了事件

2、在不同的浏览器中不同的作用域链会有不同，存在跨浏览器不兼容的问题

————————————————————————————————————————————————————————————

②DOM0级事件写法（js中）

在js中，btton.onclick = function(){ ... }

1、绑定之后可以通过button.onclick = null；来删除事件

2、默认在冒泡阶段处理

3、可以任意使用this，指代的都是当前元素

优点：

简单+可跨浏览器

——————————————————————————————————————————————

③DOM2级事件写法（js中）

在js中，addEventListener(){ .... }  +  removeEventListener(){.....}

1、可以用this，但是最好使用event.currentTarget，不容易出错

button.addEventListener("click", function(){   alert("this.id");   },  false);button.addEventListener("click", function(){   alert("hello,world!");   },  false);

使用如上，接受3个参数，要处理的事件名（不带on），事件处理的函数，一个布尔值（false：冒泡阶段触发；true：捕获阶段触发。一般都用false）。

好处：

1、可以添加多个事件的响应，就像上面对于button的click事件可以绑定两个活动，执行的时候按顺序执行

缺点：

1、只能用removeEventListener()来移除事件的绑定。同样接受3个参数，与add相同。这样的话就不能删除匿名函数（就是在add函数中直接写的这种，上面的例子中就是），只能删除那种之前声明好的，有名字的函数

——————————————————————————————————————————————————

④区别

DOM0事件：若对同一个元素的同一个事件，绑定了多个响应函数，后面的会覆盖前面的

DOM2事件：若对同一个元素的同一个事件，绑定了多个响应函数，则会按顺序执行（就是DOM2的优点）

两种方法的选取：看浏览器的兼容（IE中无addEventListener，有attachEvent）+ 代码的必要性（一个onclick是否需要绑定多个）

P.S:

1级DOM--(为什么没有1级DOM)

DOM级别1于1998年10月1日成为W3C推荐标准。1级DOM标准中并没有定义事件相关的内容，所以没有所谓的1级DOM事件模型。在2级DOM中除了定义了一些DOM相关的操作之外还定义了一个事件模型 ，这个标准下的事件模型就是我们所说的2级DOM事件模型

3、事件的对象——event对象

当触发了某个事件时，会产生一个event对象，这个对象包含着所有与事件有关的信息

比如：导致事件发生的元素，事件类型等等

无论DOM0，DOM2事件都有这个event对象

button.onclick = function(event){     alert(event.type);       //"click"};button.addEevnetListener("click" function(event){      alert(event.type);}, false);             //"click"

①this、event.currentTargrt、event.targrt

在处理函数内部，this始终等于currentTarget，就是被绑定事件的元素

target则是实际的目标

当实际的目标就是绑定函数的目标时，三者相同，但是下面的例子中，将事件绑定在 了大范围body上，但是事件点击的是body中的一个小目标button，body上的事件还是会被触发（因为会冒泡），但是currentTarget，this，target就会产生不同

documnet.body .onclick=function(){   alert(event.cuttentTarget===document.body);  //true   alert(this === document.body);     //true  this与currentTarget一直相同，指代被绑定事件的对象，此处为body   alert(event.target === document.body);   //false ，此处target指代的是最直接被操作的元素，此处应为button}

如果想阻值冒泡，看③

②preventDefault()

阻止特定事件的默认行为，比如点击一个<a>中的链接，会自动跳转，那么可以通过它的onclick事件来取消

var link = document,getELementById("link");link.onclick = function(){    event.preventDefault();}

③stopPropagation()

阻止冒泡传播

举例

button.onclick = function(){   alert("aaaa");   event.stopPropagation();    //此处阻止向上body冒泡传播}；document.body.onclick = function(){   alert(bbbb");}

如果不在button中阻止冒泡传播，那么就会aaaabbbb都会出现。因为button在body中

4、事件的类型

1、UI事件：

2、焦点事件

3、鼠标事件：该部分包含了浏览器窗口中的各种大小，xy坐标

4、滚轮事件

5、文本事件

6、键盘事件

7、合成事件（用IME输入字符时）

8、变动事件（底层DOM结构发生变化时）

9、HTML5的一些新事件（触摸，设备）

5、内存与性能

①当有很多事件时——事件委托

js中每个函数都是一个对象，会占内存。而且，内存中对象越多，事件越差。

事件委托：利用事件冒泡的方法，利用一次的触发，来处理所有同一事件的相关函数

举例：有一个ul列表，每一项的点击都有不同的事件，如果一个一个绑定太麻烦，可以在ul同一添加onclick事件，反正点击每一个li都会向上冒泡到ul

ul.addEventListener("click", function(event){    switch(event.target.id){     case "li-1":       do something.....       break;       case "li-2":       do something.....       break;       case "li-3":       do something.....       break;}},false)

这种在上层写一个总的onclick事件，可以只取一次DOM元素，只添加了一个事件处理程序，占用内存会更少。

大多数的鼠标、键盘事件都适合这种写法

②及时移除事件

如果一个元素即将被移除，最好手动移除绑定在它身上的事件处理程序。

空事件的成因：
1、用innerHTML的方法覆盖删除原有的元素时

2、在卸载页面时

6、模拟事件

在js中可以模拟鼠标键盘等事件

通过createEvent()函数，参数例如“MouseEvent”，然后进行initMouseEvent(),设置具体的xy坐标之类的，然后进行触发