JQuery 事件的绑定解绑、冒泡

JQ toggle 事件切换

js jq对象.toggle(fn1,fn2...) 当单击jq对象对应的组件后，会执行fn1.第二次点击会执行fn2..... ⚠️注意: 1.9版本 .toggle() 方法删除,jQuery Migrate(迁移)插件可以恢复此功能 ```html

html

```

事件的触发

• 第1种: 对象.事件名字()
• 第2种: 对象.trigger("事件名字")
• 第3种: 对象.triggerHandler("事件名字") ```html

```

事件的绑定

常规: 元素.事件名字(事件处理函数)

```html

```

bind方法绑定事件

元素.bind("事件名字",事件处理函数) ```html

传多个事件共用一个函数 html

bind 键值对的方式绑定事件 html

```

delegate 委派绑定

父元素.delegate("子元素的选择器","事件名字",事件处理函数) 最终事件是在子元素上 ```js

```

on绑定

父级对象.on("事件名字","子级元素",事件处理函数)
```html

• 这是第1个 li 标签
• 这是第2个 li 标签
• 这是第3个 li 标签
• 这是第4个 li 标签
• 这是第5个 li 标签

``` ⚠️注意: 最后添加的元素也具备同样的点击事件

可以调用on( )为自己绑定事件 ```js

```

live

```js

这是一个段落。

点击任意 p 元素会令其消失。包括本段落。

在本按钮后面插入新的 p 元素

注释：通过使用 live() 方法而不是 bind() 方法，新的 p 元素同样会在点击时消失。

```

事件委托的原理 ```js

`` 事件委托` 就是利用冒泡的原理，把事件加到父级上，通过判断事件来源的子集，执行相应的操作，事件委托首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作。

事件绑定的区别

```js 方法1: 对象.事件名字(事件处理函数); 方法2: 对象.bind(事件的名字,事件处理函数) 方法1和方法2只能为存在的元素绑定事件,后添加的元素没有事件

下面的两种方式,可以为存在的元素绑定事件,后添加的元素也有事件 对象.delegate("选择器","事件名字",事件处理函数) //父级元素调用方法,代理子级元素绑定事件 对象.on("事件名字","选择器",事件处理函数) //父级元素调用方法,代理子级元素绑定事件

因为delegate方法中是调用的on的方法 所以,以后直接用on就可以了 ```

解绑事件

unbind()解绑事件

```html

这是div

```

undelegate() 解绑事件

```html

这是div

```

off() 解绑事件

```html

这是div

```

#

```js

这是一个段落。

这是另一个段落。

点击任意 p 元素可以增加尺寸和字间距。包括该段落。

移除通过 live() 方法为 p 元素添加的 changeSize() 事件处理器

事件解绑的总结

• 用什么方式绑定事件,最好用对应的方式解绑事件
• bind括号中写什么事件的名字就会把这个事件解绑,会把这个元素的这个点击的多个事件都会解绑
• 对象.click()这种方式添加的事件也可以使用 unbind 解绑
• 括号中没有任何参数,此时该元素的所有的事件全部解绑
• 同时解绑多个事件 -- 每个事件的名字中间用空格即可

事件冒泡

事件属性

e.target: 这个属性得到的是触发该事件的目标对象,此时是一个DOM对象 e.currentTarget: 这个属性得到的是触发该事件的当前的对象 e.delegateTarget: 这个属性得到的是代理的这个对象
```js

```

阻止事件冒泡

JQ对象中 ```js

DOM对象中 js

```