源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

js事件冒泡、事件捕获和阻止默认事件详解

  • 时间:2021-04-23 09:32 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:js事件冒泡、事件捕获和阻止默认事件详解
谈起JavaScript的 事件,事件冒泡、事件捕获、阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免。 [b]1.事件冒泡 [/b]先来看一段代码:
var $input = document.getElementsByTagName("input")[0];
var $div = document.getElementsByTagName("div")[0];
var $body = document.getElementsByTagName("body")[0];

$input.onclick = function(e){
 this.style.border = "5px solid red"
 var e = e || window.e;
 alert("red")
}
 $div.onclick = function(e){
 this.style.border = "5px solid green"
 alert("green")
}
$body.onclick = function(e){
 this.style.border = "5px solid yellow"
 alert("yellow")
}

html代码
<div>
 <input type="button" value="测试事件冒泡" />
</div> 依次弹出”red“,"green","yellow"。
你的本意是触发button这个元素,却连同父元素绑定的事件一同触发。这就是事件冒泡。 如果对input的事件绑定改为:
$input.onclick = function(e){
 this.style.border = "5px solid red"
 var e = e || window.e;
 alert("red")
 e.stopPropagation();
}
这个时候只会弹出”red“,因为阻止了事件冒泡。 [b]2.事件捕获 [/b]既然有事件的冒泡,也可以有事件的捕获,这是一个相反的过程。区别是从顶层元素到目标元素或者从目标元素到顶层元素。 来看一段代码:
$input.addEventListener("click", function(){
 this.style.border = "5px solid red";
 alert("red")
}, true)
$div.addEventListener("click", function(){
 this.style.border = "5px solid green";
 alert("green")
}, true)
$body.addEventListener("click", function(){
 this.style.border = "5px solid yellow";
 alert("yellow")
}, true)
这个时候依次弹出”yellow“,"green","red",这就是事件的捕获。 [b]3.阻止默认事件 [/b]有一些html元素默认的行为,比如说a标签,点击后有跳转动作;form表单中的submit类型的input有一个默认提交跳转事件;reset类型的input有重置表单行为。如果你想阻止这些浏览器默认行为,JavaScript为你提供了方法。
var $a = document.getElementsByTagName("a")[0];
$a.onclick = function(e){
 alert("跳转动作被我阻止了")
 e.preventDefault();
 //return false;//也可以
}

<a href="http://keleyi.com">柯乐义</a>默认事件没有了。
既然return false 和 e.preventDefault()都是一样的效果,那它们有区别吗?当然有。 仅仅是在HTML事件属性 和 DOM0级事件处理方法中 才能通过返回 return false 的形式组织事件宿主的默认行为。 [img]http://files.jb51.net/file_images/article/201608/20168494434549.jpg?20167494441[/img] 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程素材网。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部