曾对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. socket网络编程扫盲篇

    socket 是“套接字”的意思,是计算机之间进行通信的一种约定,也可以认为是一种技术.通过 socket 这种约定,一台计算机可以接收其他计算机的数据,也可以向其他计算机发送数据. socket 的 ...

  2. [转载]linux awk命令详解

    简介 awk是一个强大的文本分析工具,相对于grep的查找,sed的编辑,awk在其对数据分析并生成报告时,显得尤为强大.简单来说awk就是把文件逐行的读入,以空格为默认分隔符将每行切片,切开的部分再 ...

  3. AFNetworking HTTP响应头返回数据

    //发送验证码 NSLog(@"发送验证码"); AFHTTPRequestOperationManager *manager = [AFHTTPRequestOperationM ...

  4. Java 使用jdk自带的wsimport命令生成webservice客户端代码

    wsimport -s E:\workspace\givemewords\src -p com.test.service -keep http://localhost:8085/Service/Fun ...

  5. ubuntu安装jre

    1)登录java官网,下载jre,并解压,解压后的jre文件夹移动到 /usr/lib/java 路径下 2)配置系统环境变量 JAVA_HOME CLASSPATH PATH 打开/etc/envi ...

  6. sqli-labs：7，导入导出；8-10 延时注入

    1,Load_file()导出文件 使用条件: A.必须有权限读取并且文件必须完全可读(and (select count(*) from mysql.user)>0/* 如果结果返回正常,说明 ...

  7. 最佳运动类APP-Keep设计与欣赏

    运动类APP是大家手机中必备的一款软件.如果说谁手机里没有任何涉及运动类APP,那只能说真的与时代脱轨了.近些年随着物质生活条件的改善,人们开始越来越重视自己的身体,所以也越来越多的人会进行身体锻炼. ...

  8. 解决textarea 输出有空格问题

    我们在使用textarea标签输出的时候,经常会出现前后都有空格.使用trim()处理也不行. 这个原因是因为 我们在编写textarea标签对的时候使用了换行. 解决方法:就是<textare ...

  9. Python内置logging模块

    最近调试Python代码比较多,发现logging模块很好用. 我的用法如下: import logging logging.basicConfig(level=logging.INFO, forma ...

  10. Mac DS_Store

    .DS_Store是Mac OS保存文件夹的自定义属性的隐藏文件,如文件的图标位置或背景色,相当于Windows的desktop.ini. 1,禁止.DS_store生成:打开 “终端” ,复制黏贴下 ...