前端 - 事件委托

事件委托,就是把事件委托给别人,让别人来帮自己完成。

注:本文 JavaScript 代码部分使用 jQuery 。

本文目录:

  1. 事件冒泡;
  2. 事件委托。

事件委托采用了事件冒泡的原理,下面先看一下什么叫事件冒泡。

事件冒泡


众所周知,冒泡是从水底往水面上冒的,而事件冒泡也是这个原理:事件是从子元素往父元素传播的(事件捕获则相反,详情请看 这里),如果子元素和父元素都绑定了相同的事件(如:“click”),那么当事件触发时,子元素和父元素都会执行各自对应的事件处理函数,这时候就会存在事件冲突的问题。

为了更好地解释上面的问题,下面我们来看一个例子:

在页面上有一个三级菜单,实现的功能是这样的:

  1. 一开始只显示一级菜单,二、三级菜单隐藏;
  2. 点击一级菜单,显示二级菜单,三级菜单仍然隐藏;
  3. 点击二级菜单,显示三级菜单;
  4. 点击三级菜单的某一项,其字体颜色变为红色。

代码:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>事件冒泡</title>
        <style type="text/css">
            #_ul2 {
                display: none;
            }
            
            #_ul3 {
                display: none;
            }
        </style>
    </head>

    <body>
        <ul id="_ul1">
            <li id="_li1">一级菜单
                <ul id="_ul2">
                    <li id="_li2">二级菜单
                        <ul id="_ul3">
                            <li id="_li3">三级菜单</li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
        <script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            // 点击一级菜单,显示二级菜单
            $('#_li1').on('click', function() {
                $('#_ul2').css('display') == 'block' ? $('#_ul2').css('display', 'none') : $('#_ul2').css('display', 'block');
            });

            // 点击二级菜单,显示三级菜单
            $('#_li2').on('click', function() {
                $('#_ul3').css('display') == 'block' ? $('#_ul3').css('display', 'none') : $('#_ul3').css('display', 'block');
            });

            // 点击三级菜单,字体颜色变为红色
            $('#_li3').on('click', function() {
                $(this).css('color', 'red');
            })
        </script>
    </body>

</html>

效果演示:

事件冒泡.gif

咦( ′◔ ‸◔`)?效果跟我们想象中的不一样啊?这是怎么回事?我们来简单分析一下:由于我们的给这三级菜单都绑定了点击事件,由于事件冒泡的存在,所以当我们触发了子元素的点击事件时,也相应地触发了父元素的点击事件。

那么,该怎么解决这个问题呢?解决办法就是阻止子元素的事件向父元素传播,也就是阻止事件冒泡啦。我们把上面 JavaScript 的代码修改如下:

代码:

<script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    // 点击一级菜单,显示二级菜单
    $('#_li1').on('click', function() {
        $('#_ul2').css('display') == 'block' ? $('#_ul2').css('display', 'none') : $('#_ul2').css('display', 'block');
    });

    // 点击二级菜单,显示三级菜单
        $('#_li2').on('click', function() {
        event.stopPropagation(); // 阻止事件冒泡
        $('#_ul3').css('display') == 'block' ? $('#_ul3').css('display', 'none') : $('#_ul3').css('display', 'block');
    });

    // 点击三级菜单,字体颜色变为红色
        $('#_li3').on('click', function() {
        event.stopPropagation(); // 阻止事件冒泡
        $(this).css('color', 'red');
    });
</script>

效果演示:

阻止冒泡.gif

我们在子元素的事件里加入了一句 <code>event.stopPropagation()</code> 来阻止事件冒泡(IE 下使用 <code>cancelBubble = true</code>)。

注意:并不是所有的事件都能冒泡,blur、focus、load、unload 等事件是不能冒泡的。

事件委托

事件委托利用了事件冒泡的原理,可以为多个元素绑定相同的事件,也可以为尚不存在的元素绑定事件;在 jQuery 中,使用 <code>on()</code> 方法来完成上述事件,关于 <code>on()</code> 方法的使用请看 jQuery - 事件(一)之 事件绑定

下面我们重点介绍如何为尚不存在的元素绑定事件,这个多发生在 使用 Ajax 的地方,为多个元素绑定相同的事件道理也一样。

下面我们来做这样一个例子:页面上有一个 ul 元素,ul 元素下有若干个 li 元素(li 元素的数量取决于服务器返回的数据),点击 li,其字体变为红色。

代码:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>事件委托</title>
    </head>

    <body>
        <ul id="_ul">我是 ul
        </ul>
        <script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            // 事件委托
            $('#_ul').on('click', 'li', function() {
                $(this).css('color', 'red');
            });

            // 使用 setTimeout() 函数模拟从服务器加载数据,之后渲染页面
            setTimeout(function() {
                $('#_ul').append('<li>list item 1</li><li>list item 2</li><li>list item 3</li>');
            }, 3000);
        </script>
    </body>

</html>

效果演示:

事件委托.gif

如上所示,我们使用一个 <code>setTimeout()</code> 方法来模拟从服务器加载数据的耗时过程,拿到数据之后渲染页面,由于父元素 ul 下不存在子元素 li,所以我们利用事件冒泡的原理,将子元素 li 的点击事件委托给父元素 ul 来完成,这就是事件委托。

注意,下面这样写不是事件委托:

代码:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>事件委托</title>
    </head>

    <body>
        <ul id="_ul">我是 ul
        </ul>
        <script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            // 使用 setTimeout() 函数模拟从服务器加载数据,之后渲染页面
            setTimeout(function() {
                $('#_ul').append('<li>list item 1</li><li>list item 2</li><li>list item 3</li>');
            }, 3000);

            $('#_ul li').on('click', function() {
                $(this).css('color', 'red');
            });
        </script>
    </body>

</html>

效果演示:

错误示范.gif

上面只是为 ul 元素下的 li 元素绑定点击事件,由于此时的 li 元素并不存在,所以绑定失败。


参考资料:

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,126评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,254评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,445评论 0 341
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,185评论 1 278
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,178评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,970评论 1 284
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,276评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,927评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,400评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,883评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,997评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,646评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,213评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,204评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,423评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,423评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,722评论 2 345

推荐阅读更多精彩内容

  • (续jQuery基础(1)) 第5章 DOM节点的复制与替换 (1)DOM拷贝clone() 克隆节点是DOM的常...
    凛0_0阅读 1,318评论 0 8
  • 1.背景介绍 1.1什么是事件委托? 事件委托还有一个名字叫事件代理,JavaScript高级程序设计上讲:事件委...
    我叫于搞吧阅读 1,647评论 4 9
  • 总结: 鼠标事件 1.click与dbclick事件$ele.click()$ele.click(handler(...
    阿r阿r阅读 1,595评论 2 10
  • 大家好,我是IT修真院成都分院第07期学员,一枚正直善良的web程序员。 一、小课堂简述JS中的事件委托 1.背景...
    120De丶L阅读 330评论 0 0
  • 爱如毒品 能止痛可使人舒畅 但要上瘾 也能杀人
    哀慕熙荣阅读 80评论 0 0