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

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

事件冒泡的应用——jq on的实现的更多相关文章

  1. jq的事件冒泡

    在页面上可以有多个事件,也可以多个元素响应同一件事, 事件冒泡引发的问题: 有些时候不想动用的事件,却因为事件冒泡而触发 解决问题: 1.事件对象 由于IE-DOM和标准的DOM实现事件对象的方法各不 ...

  2. jQuery---jQ动画(普通,滑动,淡入淡出,自定义动画,停止动画),jQuery的事件,jQ事件的绑定/解绑,一次性事件,事件委托,事件冒泡,文档加载

    jQuery---jQ动画(普通,滑动,淡入淡出,自定义动画,停止动画),jQuery的事件,jQ事件的绑定/解绑,一次性事件,事件委托,事件冒泡,文档加载 一丶jQuery动画 show,hide, ...

  3. jq事件冒泡问题

    在程序中使用事件对象非常简单,只需为函数添加一个参数,jquery代码如下: $("element").bind("click",function(event) ...

  4. jq 事件冒泡总结

    什么是JS事件冒泡? 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个 ...

  5. js 停止事件冒泡 阻止浏览器的默认行为（阻止超连接 # ）

    在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”. 1..停止事件冒泡 JavaScript代码 //如果提供了事件对象,则这是一个非IE浏览器if ( ...

  6. 事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流

    一.事件冒泡定义 事件冒泡是指在一个对象触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那 ...

  7. JS中的事件冒泡——总结

    一. 有话要说 事件冒泡这个话题已经被园子里的朋友说透了,已经没什么要讲的了,但是由于呢我这边有个小问题刚好跟这个事件冒泡有关,就突然性想写个总结:一方面是给自己增加印象,另一方面给园子的新手们,提供 ...

  8. JS中的事件、事件冒泡和事件捕获、事件委托

    https://www.cnblogs.com/diver-blogs/p/5649270.html https://www.cnblogs.com/Chen-XiaoJun/p/6210987.ht ...

  9. Javascript和jquery事件--事件冒泡和事件捕获

    jQuery 是一个 JavaScript 库,jQuery 极大地简化了 JavaScript 编程,在有关jq的描述中,jq是兼容现有的主流浏览器,比如谷歌.火狐,safari等(当然是指较新的版 ...

随机推荐

  1. 转载：MongoDB之旅(超赞，适合初学者)

    MongoDB是目前工作中经常使用到的NoSQL数据库. 本博客只记录相关理论知识和技巧,涉及到实践的部分都会单开Blog来记录实践过程. ------------------------------ ...

  2. js 标准对象

    在JavaScript的世界里,一切都是对象. 但是某些对象还是和其他对象不太一样.为了区分对象的类型,我们用typeof操作符获取对象的类型,它总是返回一个字符串: typeof 123; // ' ...

  3. spring boot （一）： Hello World

    什么是spring boot Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员 ...

  4. centos vncviewer

    CentOS6.5 安装vncserver实现图形化访问   一. 安装gnome图形化桌面 #yum groupinstall -y "X Window System" #yum ...

  5. linux网卡绑定脚本

    2013-08-20 15:30:51 此脚本适用于CentOS5.x和CentOS6.x. #!/bin/bash #**************************************** ...

  6. LoibreOJ 2042. 「CQOI2016」不同的最小割 最小割树 Gomory-Hu tree

    2042. 「CQOI2016」不同的最小割 内存限制:256 MiB时间限制:1000 ms标准输入输出 题目类型:传统评测方式:文本比较 上传者: 匿名 提交提交记录统计讨论测试数据   题目描述 ...

  7. HDU 5988.Coding Contest 最小费用最大流

    Coding Contest Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)To ...

  8. h5页面适配iPhone X的方法

    一.原生适配iphoneX 原生适配很简单,查看机型图:   只要用 #define KIsiPhoneX ([UIScreen mainScreen].bounds.size.height>8 ...

  9. android DatagramSocket send 发送数据出错

    安卓4.0以后好像不能在主线程里面使用 socket 所以不管是发送数据还是接收数据需要新开一个了线程: 以下代码是我点击发送是代码: new Thread(new Runnable() { @Ove ...

  10. IOS初级：观察者

    //为一个编辑框myField添加观察者,观察当编辑框文字改变时通知 //方法textChange是通知发生是要做的事情 [[NSNotificationCenter defaultCenter] a ...