事件委托

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>

以上是关于事件委托的主要内容,如果未能解决你的问题,请参考以下文章

jQuery代码优化:事件委托

C#事件

Javascript中的事件委托机制

js中的事件委托/代理

编写高质量代码改善C#程序的157个建议——建议137:委托和事件类型应添加上级后缀

事件委托