JavaScript中事件的绑定与解绑

---

theme: awesome-green

一、事件的绑定

在Javascript中，事件绑定一共有3种方式：
① 行内绑定 - <标签 属性列表 事件=”事件的处理程序” /> - <input type=’button’ onclick=’display()’ /> - this指向window ② 动态绑定
- dom对象.事件 = 事件的处理程序(通常是一个匿名函数) - this指向了当前正在操作的dom对象

③ 事件监听 - addEventListener - 三个参数 - 谷歌,火狐,IE11支持,IE8不支持 - addEventListener 中的this指向当前绑定事件的对象 - 事件的类型无on - attachEvent - 两个参数 - 谷歌火狐不支持,IE11不支持,IE8支持 - attachEvent中的this指向window - 事件的类型有on

1. 对象.on事件名字=事件处理函数

缺点: 如果绑定多个事件，前面的事件会被后面的事件覆盖 ```html

```

2. 对象.addEventListener("没有on的事件名字",事件处理函数,false);

解释：第三个参数在本篇文章的事件阶段中有解释 优点：可以绑定多个事件 缺点：谷歌、火狐、IE11支持,IE8不支持 ```html

```

3. 对象.attachEvent("有on的事件名字",事件处理函数);

优点：可以绑定多个事件 缺点：谷歌、火狐、IE11不支持,IE8支持 ```html

```

4. 兼容代码

```html

```

二、事件的解绑

用什么方式绑定事件,就应该用对应的方式解绑事件 - 对象.on事件名字=事件处理函数 - 对象.on事件名字=null; --> 解绑事件   - 对象.addEventListener("没有on的事件类型",命名函数,false); - 对象.removeEventListener("没有on的事件类型",函数名字,false); --> 解绑事件  

• 对象.attachEvent("on事件类型",命名函数);
• 对象.detachEvent("on事件类型",函数名字); --> 解绑事件

1. 对象.on事件名字=null;

```html

```

2. 对象.removeEventListener("没有on的事件类型",函数名字,false);

```html

```

3. 对象.detachEvent("on事件类型",函数名字);

```html

```

4. 兼容代码

```html

```

三、事件阶段

通过 e.eventPhase 这个属性可以知道当前事件在哪个阶段
如果这个属性的值是:
1 ---->捕获阶段
2 ---->目标阶段
3 ---->冒泡阶段
一般默认都是冒泡阶段,很少用捕获阶段
冒泡阶段:从里向外
捕获阶段:从外向里
addEventListener方法的第三个参数是false的时候是冒泡阶段
addEventListener方法的第三个参数是true的时候是捕获阶段

```html

``` 点击蓝色后 addEventListener方法的第三个参数是 false 的时候，点击蓝色div，这时候为冒泡阶段

四、事件冒泡

多个元素嵌套,有层次关系,这些元素都注册了相同的事件,如果里面的元素的事件触发了,外面的元素的该事件自动的触发了 ```html

``` 点击蓝色div后输出

1. 阻止事件冒泡 window.event.cancelBubble=true

```html

```

2. 阻止事件冒泡 e.stopPropagation()

```javascript

```

五、为同一个元素绑定多个不同的事件,指向相同的事件处理函数

```javascript

javascript

```

六、JS动态添加、删除classl类

```html

```

七、JQuery中绑定事件的几种方法

主要有on() bind() live() delegate()等几种，相对应的
解绑是off() unbind() die() undelegate()
- on()、bind()、live()、delegate()中除了bind()，其他的都可以给后来追加的元素对象添加绑定事件。 - 这几种方法中各自有对应支持的JQuery版本。 - 在给动态添加的页面元素绑定事件时，通常用on()方法