preventDefault:
preventDefault它是事件对象(Event)的一个方法,作用是取消一个目标元素的默认行为。既然是说默认行为,当然是元素必须有默认 行为才能被取消,如果元素本身就没有默认行为,调用当然就无效了。什么元素有默认行为呢?如链接<a>,提交按钮<input type=”submit”>等。当Event对象的cancelable为false时,表示没有默认行为,这时即使有默认行为,调用 preventDefault也是不会起作用的。
我们都知道,链接<a>的默认动作就是跳转到指定页面,下面就以它为例,阻止它的跳转:
//假定有链接<a href="http://www.cnf2e.com/" id="testA" >cnf2e</a>
var a = document.getElementById("testA");
a.onclick =function(event){
event.preventDefault();
}
stopPropagation:
stopPropagation也是事件对象(Event)的一个方法,作用是阻止目标元素的冒泡事件,但是会不阻止默认行为。什么是冒泡事件?如 在一个按钮是绑定一个”click”事件,那么”click”事件会依次在它的父级元素中被触发 。stopPropagation就是阻止目标元素的事件冒泡到父级元素。如:
<div id='div' οnclick='alert("div");'>
<ul οnclick='alert("ul");'>
<li οnclick='alert("li");'>test</li>
</ul>
</div>
上面的代码,我们单击test时,会依次触发alert(“li”),alert(“ul”),alert(“div”),这就是事件冒泡。
当我们需要阻止冒泡时,就得使用stopPropagation了,
<div id='div' οnclick='alert("div");' >
<ul οnclick='alert("ul");'>
<li id='ul-a' οnclick='alert("li");event.stopPropagation()'>a</li>
</ul>
</div>
这时单击”test”,只会提示alert(‘li’);
return false
现在很多js代码都直接使用jQuery来写,在jQuery中使用return false时,相当于同时使用event.preventDefault和event.stopPropagation,它会阻止冒泡也会阻止默认行为。 但是使用原生js写时,return false只会阻止默认行为。下面两段代码说明
使用原生js方法时,return false只能阻止默认行为,但却不能阻止冒泡
<div id='div' οnclick='alert("div");'>
<ul οnclick='alert("ul");'>
<li id='ul-a' οnclick='alert("li");'><a href="http://www.cnf2e.com" id="testB">cnf2e.com</a></li>
</ul>
</div>
var a = document.getElementById("testB");
a.onclick = function(){
return false;
};
使用jQuery方法时,return false会阻止默认行为,也会阻止冒泡
<div id='div' οnclick='alert("div");'>
<ul οnclick='alert("ul");'>
<li id='ul-a' οnclick='alert("li");'><a href="http://www.cnf2e.com" id="testC">cnf2e.com</a></li>
</ul>
</div>
$("#testC").on('click',function(){
return false;
});
不会弹出alert也不会跳转
问题描述:当点击core的时候,会弹出什么?顺序是怎么样的?
问题例子:
结果:会弹出core->inner->outer
1、Netscape主张父级元素的事件首先发生,这种事件发生顺序被称为捕获型
微软则保持本元素具有优先权,这种事件顺序被称为冒泡型
DOM同时支持两种事件模型:捕获型事件和冒泡型事件,但是,捕获型事件先发生。两种事件流会触发DOM中的所有对象,从document对象开始,也在document对象结束。
冒泡型:
1.对于某个节点,触发的一个事件, 会首先执行当前这个dom节点绑定的方法
2.执行完毕后,会冒泡至改节点的父节点,执行相应的函数
3. 重复以上过程,直至Dom的根节点。
捕获型
事件捕获的顺序刚好与之相反
1.当一个事件发生时,最外层的已绑定该事件的方法会执行
2.然后该事件会下降至他的子节点,触发相应的方法
3.重复1,2的过程
2、绑定事件:我们通常会用addEventListener
addEventListener("onclick",function(){},false) //第三个参数为false的时候,这个事件就是冒泡型事件,如果不写默认为false,如果写true,这个事件就是捕获型事件
3. stopPropagation()是停止冒泡事件流。
当我们为一个事件绑定的方法中,添加一句stopPropagation,那么该事件的冒泡过程到此为止,其后的所有节点绑定事件都不执行;
4. 没有方法去停止捕获事件流,当然,从功能上看也即没必要,也不合理。
addEventListener和removeEventListener
// type:事件类型,不含"on",比如"click"、"mouseover"、"keydown";
// 而attachEvent的事件名称,含含"on",比如"onclick"、"onmouseover"、"onkeydown";
// listener:事件处理函数
// useCapture是事件冒泡,还是事件捕获,默认false,代表事件冒泡类型,true表示事件捕获
addEventListener(type, listener, useCapture);
测试代码:
<script>
window.onload = function(){
var outA = document.getElementById("outA");
var outB = document.getElementById("outB");
var outC = document.getElementById("outC");
var outD = document.getElementById("outD");
// 使用事件冒泡
outA.addEventListener('click',function(){alert(1);},false);
outB.addEventListener('click',function(){alert(2);},false);
outC.addEventListener('click',function(){alert(3);},false);
outD.addEventListener('click',function(){alert(4);},false);
};
</script>
<body>
<div id="outA" style="width:400px; height:400px; background:#CDC9C9;position:relative;">
<div id="outB" style="height:200; background:#0000ff;top:100px;position:relative;">
<div id="outC" style="height:100px; background:#FFB90F;top:50px;position:relative;">
<div id="outD" style="height:80px; background:#8f8f8f;top:30px;position:relative;"></div>
</div>
</div>
</div>
</body>
点击D区域
当是事件捕获时(都是useCapture=true):
1->2->3->4
当是事件冒泡时(都是useCapture=false):
4->3->2->1
当AC为true,BD为false时:点击D区域
// 使用事件冒泡- outA.addEventListener('click',function(){alert(1);},true);
- outB.addEventListener('click',function(){alert(2);},false);
- outC.addEventListener('click',function(){alert(3);},true);
- outD.addEventListener('click',function(){alert(4);},false);
1->3->4->2 1和3为事件捕获过程执行,2和4为事件冒泡过程执行。