谈起JavaScript的 事件,事件冒泡、事件捕获、阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免。
1.事件冒泡
先来看一段代码:$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")
}
你的本意是触发button这个元素,却连同父元素绑定的事件一同触发。这就是事件冒泡。 如果对input的事件绑定改为:
这个时候只会弹出”red“,因为阻止了事件冒泡。
2.事件捕获
既然有事件的冒泡,也可以有事件的捕获,这是一个相反的过程。区别是从顶层元素到目标元素或者从目标元素到顶层元素。 来看一段代码:这个时候依次弹出”yellow“,"red",这就是事件的捕获。
3.阻止默认事件
有一些html元素默认的行为,比如说a标签,点击后有跳转动作;form表单中的submit类型的input有一个默认提交跳转事件;reset类型的input有重置表单行为。如果你想阻止这些浏览器默认行为,JavaScript为你提供了方法。<a href="http://keleyi.com">柯乐义默认事件没有了。
既然return false 和 e.preventDefault()都是一样的效果,那它们有区别吗?当然有。 仅仅是在HTML事件属性 和 DOM0级事件处理方法中 才能通过返回 return false 的形式组织事件宿主的默认行为。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。
原文地址:https://www.jb51.cc/js/46803.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。