首页
登录 | 注册

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

曾对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>

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


相关文章

  • 补习系列(20)-大话 WebSocket 与 &quot;尬聊&quot;的实现
    目录 一.聊聊 WebSocket 二.Stomp 是个什么鬼 三.SpringBoot 整合 WebSocket A. 引入依赖 B. WebSocket 配置 C. 控制器 D. 前端实现 四.参考文档 一.聊聊 WebSocket 从 ...
  • 页面性能优化-原生JS实现图片懒加载
         在项目开发中,我们往往会遇到一个页面需要加载很多图片的情况.我们可以一次性加载全部的图片,但是考虑到用户有可能只浏览部分图片.所以我们需要对图片加载进行优化,只加载浏览器窗口内的图片,当用户滚动时,再加载更多的图片.这种加载图片的 ...
  • 《k8s 源码分析》- Custom Controller 之 Informer
    Custom Controller 之 Informer 概述 架构概览 reflector - List & Watch API Server Reflector 对象 ListAndWatch watchHandler - ad ...
  • 关于分布式锁原理的一些学习与思考-redis分布式锁,zookeeper分布式锁
      首先分布式锁和我们平常讲到的锁原理基本一样,目的就是确保,在多个线程并发时,只有一个线程在同一刻操作这个业务或者说方法.变量. 在一个进程中,也就是一个jvm 或者说应用中,我们很容易去处理控制,在jdk java.util 并发包中已 ...
  • ERP不规范,同事两行泪
    最近的很多次对外交流,都聊到了ERP建设的话题,并且无一例外的不那么让人省心,回想我这么多年走过的ERP坑坑路,在这里也写下经验和总结,希望能给正在或者即将走上ERP建设路的企业一些思考和帮助. 导读 1.几个瞎眼而普遍的案例 2.ERP的 ...
  • [翻译 EF Core in Action 2.2] 创建应用程序的数据库上下文
    Entity Framework Core in Action Entityframework Core in action是 Jon P smith 所著的关于Entityframework Core 书籍.原版地址. 是除了官方文档外另 ...

2020 cecdns.com webmaster#cecdns.com
12 q. 0.065 s.
京ICP备10005923号