事件委托
Posted 麦克斯-侯的博客
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了事件委托相关的知识,希望对你有一定的参考价值。
事件委托就是利用事件冒泡原理,把处理任务委托给父元素或者祖先元素(通常用父元素),我们通过目标对象来判断事件源,并执行事件处理。
jQuery实现事件委托可以调用on()方法,这样写:
1
|
$(el).on( events [, selector ] [, data ], handler(eventObject) ) |
el是父元素,selector是子元素,事件处理函数。
示例1:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<!DOCTYPE html> < html > < head > < meta charset = "UTF-8" > < title >事件委托</ title > </ script > </ head > < body > < div > < ul id = "ul" > < li id = "a" >鼠标</ li > < li id = "b" >键盘</ li > < li id = "c" >屏幕</ li > < li id = "d" >< a >主机</ a ></ li > </ ul > </ div > < p id = "notes" >单击列表项,或光标移到列表项</ p > < script > $(‘ul‘).on(‘click mouseover‘,‘:not(#four)‘, function (e) { listItem = ‘列表项 ‘ + e.target.textContent + ‘< br />‘; eventType = ‘事件 ‘ + e.type; $(‘#notes‘).html(listItem + eventType); }); </ script > </ body > </ html > |
示例2:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<!DOCTYPE html> < html > < head > < meta charset = "UTF-8" > < title >事件委托</ title > </ script > </ head > < body > < div > < ul id = "ul" > < li id = "a" >鼠标</ li > < li id = "b" >键盘</ li > < li id = "c" >屏幕</ li > < li id = "d" >< a >主机</ a ></ li > </ ul > </ div > < p id = "notes" >单击列表项,或光标移到列表项</ p > < script > $(‘ul‘).on(‘click mouseover‘, ‘:not(#four)‘, {status: ‘important‘}, function (e) { listItem = ‘列表项 ‘ + e.target.textContent + ‘< br />‘; itemStatus = ‘状态 ‘ + e.data.status + ‘< br />‘; eventType = ‘事件 ‘ + e.type; $(‘#notes‘).html(listItem + itemStatus + eventType); }); </ script > </ body > </ html > |
以上是关于事件委托的主要内容,如果未能解决你的问题,请参考以下文章