事件冒泡的应用——jq on的实现

时间：2022-01-24 10:16:44

曾对jQuery中on的实现有所疑问，一直没有找到合适的实现方法，今日看《javascript高级程序设计》中的事件冒泡有了些思路。

针对于新增的DOM元素，JQ中若为其绑定事件就必须使用on方法，如$('#id').on('click','.item',function(){......})，这样当$('#id')被点击时，会发生事件冒泡，传递到$('#id')下的item并进行匹配，符合条件的会触发function(){.......}。

这里写一个简单的例子演示下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        .box{width:500px; height: 500px; overflow: hidden; border: 1px solid #ddd; float: left; }

        .item{width: 50px;height: 50px;background: #000;color: #fff;text-align: center; }

    </style>

</head>

<body>

    <div class="box" id="box"></div>

    <div class="op">

        <button id="add">添加</button>

        <button id="remove">删除</button>

        <button id="copy">复制首元素</button>

        <button id="replace">替换尾元素</button>

    </div>

</body>

</html>

<script>

    var i = 0,

        $ = function(id){ return document.getElementById(id); },

        ele = function(){

            var div = document.createElement('div');

                div.className = 'item';

                div.innerHTML = i++;

            return div;

        },

        // on事件,点击由item开始向上传递

        // 传递到box时，触发了box的click事件

        on = function($pele,ele,type,func){

            $pele.addEventListener(type,function(e){

                if( e.target.className == ele ){

                    func();

                }

            },false);

        };

    // 调用on事件

    on($('box'),'item','click',function(){alert('点击成功！')});

    // 添加元素

    $('add').onclick = function(){

        $('box').appendChild(ele());

    }

    // 移动最后一个元素

    $('remove').onclick = function(){

        $('box').removeChild($('box').lastChild);

    }

    // 复制首元素

    $('copy').onclick = function(){

        $('box').appendChild($('box').firstChild.cloneNode(true));

    }

    // 替换最后一个元素

    $('replace').onclick = function(){

        $('box').replaceChild($('box').firstChild,$('box').lastChild);

    }

</script>

例子写得比较粗陋，主要是验证一下思路！

相关文章