web前端|js教程
JavaScript，事件冒泡，捕获和阻止
web前端-js教程
谈起JavaScript的 事件，事件冒泡、事件捕获、阻止默认事件这三个话题，无论是面试还是在平时的工作中，都很难避免。
thinkphp案例源码,vscode能不能附加进程,如何连接ubuntu,增加tomcat启动时长,爬虫比价网站,php手册看不了,江苏seo优化以客为尊lzw
冒泡篇
wifidog 源码下载,ubuntu 图形界编程,水爬虫怎么抓,php物体,好客搜索seolzw
先来看一段实例：
php物流管理系统源码,文字横排变竖排vscode,Linux卡在Ubuntu,开启tomcat闪屏,url爬虫系统,php时间变量类型,黄山seo推广价格表,discuz如何开发网站,xiu主题手机端模板lzw
js:
var $input = document.getElementsByTagName("input")[0]; var $p = document.getElementsByTagName("p")[0]; var $body = document.getElementsByTagName("body")[0]; $input.onclick = function(e){ this.style.border = "5px solid red" var e = e || window.e; alert("red") } $p.onclick = function(e){ this.style.border = "5px solid green" alert("green") } $body.onclick = function(e){ this.style.border = "5px solid yellow" alert("yellow") }
html:
依次弹出”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“
因为阻止了事件冒泡。
捕获篇
既然有事件的冒泡，也可以有事件的捕获，这是一个相反的过程。区别是从顶层元素到目标元素或者从目标元素到顶层元素。
来看代码：
$input.addEventListener("click", function(){ this.style.border = "5px solid red"; alert("red")}, true)$p.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”。
这就是事件的捕获。
如果把addEventListener方法的第三个参数改成false，则表示只在冒泡的阶段触发，弹出的依次为：”red“,”green”,”yellow”。
阻止默认事件篇
有一些html元素默认的行为，比如说a标签，点击后有跳转动作；form表单中的submit类型的input有一个默认提交跳转事件；reset类型的input有重置表单行为。
如果你想阻止这些浏览器默认行为，JavaScript为你提供了方法。
先上代码
var $a = document.getElementsByTagName("a")[0];$a.onclick = function(e){ alert("跳转动作被我阻止了") e.preventDefault(); //return false;//也可以}昵图网
默认事件没有了。
既然return false 和 e.preventDefault()都是一样的效果，那它们有区别吗？当然有。
仅仅是在HTML事件属性 和 DOM0级事件处理方法中 才能通过返回 return false 的形式组织事件宿主的默认行为。
注意：以上都是基于W3C标准，没有考虑到IE的不同实现。
