曾对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. PAT 1023 组个最小数 (20)（代码+思路）

    1023 组个最小数 (20)(20 分) 给定数字0-9各若干个.你可以以任意顺序排列这些数字,但必须全部使用.目标是使得最后得到的数尽可能小(注意0不能做首位).例如:给定两个0,两个1,三个5, ...

  2. Java基础之—反射

    反射是框架设计的灵魂 (使用的前提条件:必须先得到代表的字节码的Class,Class类用于表示.class文件(字节码))   一.反射的概述 JAVA反射机制是在运行状态中,对于任意一个类,都能够 ...

  3. iOS.CodeSign

    Inside Code Signing 1. Code Signing需要的基础组件: 证书,私钥 As an iOS developer, chances are you have a certif ...

  4. Scrapy框架学习笔记

    1.Scrapy简介 Scrapy是用纯Python实现一个为了爬取网站数据.提取结构性数据而编写的应用框架,用途非常广泛. 框架的力量,用户只需要定制开发几个模块就可以轻松的实现一个爬虫,用来抓取网 ...

  5. centos7 下安装mongodb指南;

    1.下载:https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-rhel70-3.4.1.tgz; 2.解压缩; 3.文件存储在mongodb文件 ...

  6. 01. pt-align

    01. pt-align pt-align xxx.txt =========================================== pt-align对齐输出格式 name city a ...

  7. UI设计师需要熟记的45个快捷键Windows、Mac

    大家都知道PS快捷键很多,其实没必要都记住,今天为大家整理了45个比较实用的,别忘了收藏. 图层 填充图层 MAC: Alt+Backspace (前景) or Cmd+Backspace (背景) ...

  8. ubuntu如何实现双屏显示

    转载自https://blog.csdn.net/tianmaxingkong_/article/details/50570538

  9. mysql 设置用户并授权

    一, 创建用户: 命令:CREATE USER 'username'@'host' IDENTIFIED BY 'password'; 说明:username - 你将创建的用户名, host - 指 ...

  10. 动态代理jdk和cglib的区别

    学习来源贴:http://www.cnblogs.com/jqyp/archive/2010/08/20/1805041.html JDK实现动态代理需要实现类通过接口定义业务方法,对于没有接口的类, ...