曾对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. TF30063：没有访问xxx的权限 vs2017

    凭据什么的都删掉了,还是无法连接上,最后同事用一种方法o(╥﹏╥)o,先登录vs2015的tfs账号,然后再vs2017上面登录tfs账号即可解决.PS:网上很多文章都是抄的,这个Bug真TM恶心.

  2. ubuntu16.04安装wps

    下载: 我的电脑是64位的,所以选择64bit的deb包进行下载 1.下载地址:http://community.wps.cn/download/(去WPS官网下载) 安装: 2.执行安装命令:sud ...

  3. nested exception is java.lang.NoClassDefFoundError: org/springframework/dao/support/PersistenceExceptionTranslator

    该问题是少了一个spring-tx-的jar包,把该包加入到buildpath中就行了. 参考链接:http://blog.csdn.net/Rongbo_J/article/details/4666 ...

  4. POJ3621或洛谷2868 [USACO07DEC]观光奶牛Sightseeing Cows

    一道\(0/1\)分数规划+负环 POJ原题链接 洛谷原题链接 显然是\(0/1\)分数规划问题. 二分答案,设二分值为\(mid\). 然后对二分进行判断,我们建立新图,没有点权,设当前有向边为\( ...

  5. Python数据库工具类MySQLdb使用

    MySQLdb模块用于连接mysql数据库. 基本操作 # -*- coding: utf-8 -*-       #mysqldb       import time, MySQLdb       ...

  6. tp5查看版本

    5.0 base.php 5.1 echo \think\facade\App::version();//用这行代码查看版本

  7. HashMap 、HashTable、TreeMap、WeakHashMap的区别是什么

    Java为数据结构中的映射定义了一个接口java.util.Map,它有4个实现类:HashTable.HashMap.TreeMap.WeakHashMap. HashMap和HashTable的区 ...

  8. Composer 中文镜像 Lavavel-china 公益项目

    『Composer 中国全量镜像』是由 Laravel China 社区联合 又拍云 与 优帆远扬 共同合作推出的公益项目,旨在为广大 PHP 用户提供稳定和高速的 Composer 国内镜像服务. ...

  9. Null value was assigned to a property of primitive type setter of cn.itcast.oa.domain.Forum.topicCount

    [引用http://m.blog.csdn.net/blog/u013998070/41087351] Null value was assigned to a property of primiti ...

  10. swift NSdata 转换 nsstring

    result = NSString(data: data, encoding: NSUTF8StringEncoding) 做HTTP 请求时 遇到 打印结果看  所以~~~