-
谈起JavaScript的 事件,事件冒泡、事件捕获、阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免。
冒泡篇:先来看一段实例:js: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“因为阻止了事件冒泡。捕获篇:既然有事件的冒泡,也可以有事件的捕获,这是一个相反的过程。区别是从顶层元素到目标元素或者从目标元素到顶层元素。来看代码:$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"。这就是事件的捕获。如果把addEventListener方法的第三个参数改成false,则表示只在冒泡的阶段触发,弹出的依次为:”red“,"green","yellow"。阻止默认事件篇:有一些html元素默认的行为,比如说a标签,点击后有跳转动作;form表单中的submit类型的input有一个默认提交跳转事件;reset类型的input有重置表单行为。先上代码1 var $a = document.getElementsByTagName("a")[0];2 $a.onclick = function(e){3 alert("跳转动作被我阻止了")4 e.preventDefault();5 //return false;//也可以6 }默认事件没有了。既然return false 和 e.preventDefault()都是一样的效果,那它们有区别吗?当然有。仅仅是在HTML事件属性 和 DOM0级事件处理方法中 才能通过返回 return false 的形式组织事件宿主的默认行为。
javascript事件之: 事件冒泡, 事件捕获 ,阻止默认事件
最新推荐文章于 2024-09-05 23:28:05 发布