文章目录
- 事件的冒泡
事件冒泡
X ml ht ml
DOM模型是一个树形结构，在DOM模型中，HTML元素是有层次的。当一个HTML元素上产生一个事件时，该事件会在DOM树中元素节点与根节点之间按特定的顺序传播，路径所经过的节点都会收到该事件，这个传播过程就是DOM事件流。
DOM事件标准定义了两种事件流，分别是捕获事件和冒泡事件。
事件捕获指的是从document到触发事件的那个节点，即自上而下的去触发事件。相反的，事件冒泡是自下而上的去触发事件。
案例:
如果想要阻止事件冒泡：
event.stopPropagation()方法
这是阻止事件的冒泡方法，不让事件向上蔓延，但是默认事件任然会执行，当你掉用这个方法的时候，如果点击一个连接，这个连接仍然会被打开。
事件委托
为什么需要事件委托?
一般来说，dom需要有事件处理程序，我们都会直接给它设事件处理程序就好了，那如果是很多的dom需要添加事件处理呢？比如我们有100个li，每个li都有相同的click点击事件，可能我们会用for循环的方法，来遍历所有的li，然后给它们添加事件，那这么做会存在什么影响呢？
在JavaScript中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能，因为需要不断的与dom节点进行交互，访问dom的次数越多，引起浏览器重绘与重排的次数也就越多，就会延长整个页面的交互就绪时间，这就是为什么性能优化的主要思想之一就是减少DOM操作的原因；如果要用事件委托，就会将所有的操作放到js程序里面，与dom的操作就只需要交互一次，这样就能大大的减少与dom的交互次数，提高性能；
每个函数都是一个对象，是对象就会占用内存，对象越多，内存占用率就越大，自然性能就越差了（内存不够用），比如上面的100个li，就要占用100个内存空间，如果是1000个，10000个呢.如果用事件委托，那么我们就可以只对它的父级（如果只有一个父级）这一个对象进行操作，这样我们就需要一个内存空间就够了，是不是省了很多，自然性能就会更好。
事件委托的原理：
事件委托是利用事件的冒泡原理来实现的，何为事件冒泡呢？
页面上有这么一个节点树，div>ul>li>a;比如给最里面的a加一个click点击事件，那么这个事件就会一层一层的往外执行，执行顺序a>li>ul>div，有这样一个机制.那么我们给最外面的div加点击事件，那么里面的ul，li，a做点击事件的时候，都会冒泡到最外层的div上，所以都会触发，这就是事件委托，委托它们父级代为执行事件。
<ul id="ul1">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
var ulobj = document.getElementById("ul1");
ulobj.addEventListener("click",function(e){
e.target//获得所点击的字节节点标签
})
适合用事件委托的事件：click，mousedown，mouseup，keydown，keyup，keypress。
e.stopPropagation();//阻止事件向上传播
e.preventDefault();//阻止默认事件的发生
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function fu() {
alert('父标签')
}
function zi(e) {
alert('子标签')
// e.stopPropagation();//阻止事件向上传播
}
function test() {
alert();
// e.stopPropagation();//阻止事件向上传播
// e.preventDefault();//阻止默认事件的发生
//return false; //阻止默认事件发送
}
</script>
</head>
<body>
<div onclick="fu()">
div
<!-- 当子级标签事件触发后,会向上冒泡,从而触发父级标签事件 -->
<input type="button" value="按钮" onclick="zi(event)"/>
<!-- <a href="http://www.baidu.com" onclick="test(event)">冒泡</a>-->
</div>
</body>
</html>
事件的冒泡
什么是事件冒泡?
事件的冒泡就是指父子元素同时监听同一个事件,当触发子元素的事件的时候,同一个事件也被传递到父元素的事件里去响应
那么如何阻止事件冒泡?
在子元素事件函数体内,return false,可以阻止事件的冒泡传递
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
font-size: 13px;
line-height: 130%;
padding: 60px;
}
#content{
width: 220px;
border: 1px solid #0050D0;
background: #96E555;
}
span{
width: 200px;
margin: 10px;
background: #666666;
cursor: pointer;
color: white;
display: block;
}
p{
width: 200px;
background: #888;
color: white;
height: 16px;
}
</style>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
$("#content").click(function () {
alert('我是div');
});
$("span").click(function () {
alert('我是span');
});
})
</script>
</head>
<body>
<div id="content">
外层div元素
<span>内层span元素</span>
外层div元素
</div>
<div id="msg"></div>
<br><br>
<a href="http://www.hao123.com">WWW.HAO123.COM</a>
</body>
</html>