jQuery事件冒泡:
click mouseenter 等事件没有绑定 也会触发,只是触发后没有任何结果

子元素触发事件后,会把触发事件传递给父元素,那么父元素也会被触发。
不管有没有绑定事件,都会触发事件,只是没有结果,事件冒泡传递还是会发生

系统自动产生的event事件对象
function传的第一个参数就是event事件对象

 event.stopPropagation(); // 阻止事件冒泡
event.preventDefault() // 阻止默认行为 比如submit阻止表单提交 // 上面两个阻止 可以合并写成
return false;

事件委托:

事件委托就是利用冒泡的原理,把事件加到父级上,通过判断事件来源的子集,执行相应的操作,事件委托首先可以极大减少事件绑定次数,提高性能;其次可以让新加入的子元素也可以拥有相同的操作。

基本实现:

 $(function(){
var $li = $('.list li');
var $list = $('.list'); // 多次绑定,性能堪忧
// $li.click(function(){
// $(this).css({'background':'red'});
// }) // 事件委托方式 delegate(发生事件的元素, 事件属性, 匿名函数)
$list.delegate('li','click',function(){
$(this).css({'background':'red'});
}) })

上述代码不能很好的体现事件委托的优势,下面引入Dom操作 综合体现事件委托的优势。

Dom操作:

Dom操作也叫做元素节点操作,它指的是改变html的标签结构,它有两种情况:
1、移动现有标签的位置
2、将新创建的标签插入到现有的标签中

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
var $div01 = $('#div01');
var $p01 = $('#p01');
var $h01 = $('#h01');
var $p02 = $('#p02'); // 当前元素里面的后面要放另外一个元素
// $div01.append($p01); // 当前元素要放到另外一个元素的里面的后面
$p01.appendTo($div01); // 当前元素里面的前面要放另外一个元素
// $div01.prepend($h01); // 当前元素要放到另外一个元素里面的前面
$h01.prependTo($div01); // 当前元素外面的后面要放另外一个元素
// $div01.after($p02); // 当前元素要放到另外一个元素的外面的后面
$p02.insertAfter($div01); // 创建一个空div标签
var $newdiv01 = $('<div>'); // 创建一个有内容的div标签
var $newdiv02 = $('<div>新创建的第二个div</div>'); // 当前元素外面的前面要放另外一个元素
$div01.before( $newdiv01 ); // 当前元素要放到另外一个元素的外面的前面
$newdiv02.insertBefore($div01); // 删除标签
$newdiv01.remove(); $p01.remove(); }) </script>
</head>
<body>
<p id="p01">这是div01外面的p标签</p>
<h2 id="h01">这是div01外面的h2标题</h2>
<p id="p02">这是div01外面的第二个p标签</p>
<div id="div01">
<h3>这是div01里面的h3</h3>
<p>这是div01里面的p标签</p>
</div>
</body>
</html>

下面这个例子能体现事件委托的优势

 $(function(){
var $txt = $('#txt1');
var $btn = $('#btn1');
var $list = $('#list'); // 增加计划
$btn.click(function(){
var sVal = $txt.val(); // 清空输入框
$txt.val(''); // 判断输入框是否为空
if(sVal==''){
alert('请输入内容!');
return;
} // 创建一个包含计划内容的li标签
var $li = $('<li><span>'+ sVal +'</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>');
$li.appendTo($list); /*
var $del = $li.find('.del');
$del.click(function(){
$(this).parent().remove();
});
*/
}) // 删除功能:
/*
var $del = $('.del');
$del.click(function(){
$(this).parent().remove();
})
*/ // 事件委托
$list.delegate('a','click',function(){
if($(this).hasClass('del')){
$(this).parent().remove();
}else if($(this).hasClass('up')){
if($(this).parent().prev().length==0){
alert('到顶了已经');
return false;
}
$(this).parent().insertBefore($(this).parent().prev());
}else{
if($(this).parent().next().length==0){
alert('到底了已经');
return false;
}
$(this).parent().insertAfter($(this).parent().next());
}
})
})

事件冒泡及事件委托的理解(JQuery Dom操作)的更多相关文章

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

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

  2. jQuery 学习笔记(5)(事件绑定与解绑、事件冒泡与事件默认行为、事件的自动触发、自定义事件、事件命名空间、事件委托、移入移出事件)

    1.事件绑定: .eventName(fn) //编码效率略高,但部分事件jQuery没有实现 .on(eventName, fn) //编码效率略低,所有事件均可以添加 注意点:可以同时添加多个相同 ...

  3. js事件捕获,事件冒泡,事件委托以及DOM事件流

    一:DOM事件流: 事件流是从页面接收事件的顺序,DOM2级事件规定事件流包括三个阶段: ①事件捕获阶段:用意在于事件达到目标之前捕获它,在事件捕获阶段事件流模型:document→html→body ...

  4. JavaScript事件冒泡和事件委托

    JavaScript事件冒泡和事件委托 付建宇 - 2 条评论 接触JavaScript不久,学的东西也不是特别多.小雨就是习惯把平时学到的东西拿出来分享.一方面加强自己的印象,一方面可以让自己的经验 ...

  5. js事件冒泡和事件委托

    js事件冒泡 js所谓的事件冒泡就是子级元素的某个事件被触发,它的上级元素的该事件也被递归执行 html: <ul class="clearfix" data-type=&q ...

  6. javascript的事件冒泡,阻止事件冒泡和事件委托, 事件委托是事件冒泡的一个应用。

    首先,弄明白js 当中,什么是事件,事件模型在js中是如何设计的.什么是事件冒泡? 什么是“事件冒泡”呢?假设这里有一杯水,水被用某种神奇的方式分成不同颜色的几层.这时,从最底层冒出了一个气泡,气泡会 ...

  7. JS中的事件绑定,事件捕获,事件冒泡以及事件委托,兼容IE

    转载请注明出处:http://www.cnblogs.com/zhangmingze/p/4864367.html   ● 事件分为三个阶段:   事件捕获 -->  事件目标 -->   ...

  8. 【JavaScript】事件捕获、事件冒泡与事件委托

    2018年12月18日 最近在学习js时,遇到了三个名词:事件捕获.事件冒泡.事件委托. 一.事件捕获和事件冒泡 事件捕获和事件冒泡是为了解决网页中的事件流(事件发生的顺序)而提出的概念. 事件捕获是 ...

  9. DOM事件机制(事件捕获和事件冒泡和事件委托)

    内容: 1.事件复习 2.事件冒泡与事件捕获 3.事件委托 1.事件复习 (1)事件 事件是用来处理响应的一个机制,这个响应可以来自于用户(点击, 鼠标移动, 滚动), 也可以来自于浏览器 下面的链接 ...

随机推荐

  1. shopnc-setNcCookie-后台验证码

    function setNcCookie($name, $value, $expire='3600', $path='', $domain='.a.cn', $secure=false){ if (e ...

  2. 关于Quad PLL /CPLL参考时钟的选择

    关于Quad PLL /CPLL参考时钟的选择 1.参考时钟 2.channel PLL具体分析 CPLL端口描述 一张图说清了时钟为怎么被分成了north or south

  3. 阅读<SMPTE 274M-2005 1920X1080>笔记

    阅读<SMPTE 274M-2005 1920X1080>笔记 1.1080i blank field 2.blank and active line timing Analog Digi ...

  4. sqlalchemy 或者pysql 连接数据库时支持中文操作

    参数后面带上?charset=utf8就行 engine = create_engine("mysql+pymysql://hrg:123@192.168.80.200:3306/test? ...

  5. xe5 android 控制蓝牙[转]

    用以下代码中的接口实现控制蓝牙的开.关及详细信息 unit Androidapi.JNI.BluetoothAdapter; // (c) RedTitan Technology 2013// JNI ...

  6. Hiero扩展工具包开发小结

    写了两个月,Hiero扩展工具包终于完成了,包括了7个扩展内容,从Tags的扩展到TranscodeImage任务的检查再到版本的搜索,还有新Token的创建,算是对Hiero原生程序做了一个补充,提 ...

  7. HTML+CSS补充

    1. HTML+CSS补充 - 布局: <style> .w{ width:980px;margin:0 auto; } </style> <body> <d ...

  8. bzoj5003: 与链 5004: 开锁魔法II 5005:乒乓游戏

    www.lydsy.com/JudgeOnline/upload/task.pdf 第一题题意可以转为选一个长度k的序列,每一项二进制的1的位置被下一项包含,且总和为1,考虑每个二进制位的出现位置,可 ...

  9. hadoop长时间运行后,stop-all.sh报错

    报错现象: hadoop在stop-all.sh的时候依据的是datanode上的mapred和dfs进程号. 而默认的进程号保存在/tmp下,linux默认会每 隔一段时间(一般是一个月或者7天左右 ...

  10. 解析Javascript事件冒泡机制(转) 本文转自:http://blog.csdn.net/luanlouis/article/details/23927347

    本文转自:http://blog.csdn.net/luanlouis/article/details/23927347 1. 事件 在浏览器客户端应用平台,基本生都是以事件驱动的,即某个事件发生,然 ...