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

谈及JavaScript事件，无论是在采访中还是在正常工作中，都很难回避这三个话题：事件冒泡、事件捕捉、防止默认事件。

1.事件冒泡首先看一段代码：

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纯红' var e=e | | window.eAlert('红色')} $ div . onclick=function(e){ this . style . border=' 5px实心绿色' alert('绿色')} $ body . onclick=function(e){ this . style . border=' 5px实心黄色' alert('黄色')

Div输入类型=' button ' value=' test event bubbling '//div依次弹出“红”、“绿”、“黄”。您打算触发button元素，但是它是与父元素绑定的事件一起触发的。这是冒泡事件。如果输入的事件绑定更改为：

$ input . onclick=function(e){ this . style . border=' 5px纯红' var e=e | | window.ealert(' red ')e . stopperpagation()；}此时，只会弹出“红色”，因为它可以防止事件冒泡。

2.事件捕获既然有事件的冒泡，也可以有事件捕获，这是一个相反的过程。区别是从顶层元素到目标元素，或者从目标元素到顶层元素。看一段代码：

$input.addEventListener('click '，function(){ this . style . border=' 5px纯红'；alert('red')}，true)$ div . addeventlistener(' click '，function(){ this . style . border=' 5px纯绿'；alert('绿色')}，true)$ body . addeventlistener(' click '，function(){ this . style . border=' 5px纯黄'；Alert('黄色')}，true)此时依次弹出“黄色”、“绿色”、“红色”，这是对事件的捕捉。

3.阻止默认事件有html元素的一些默认行为，比如A标签，点击后有一个跳转动作；表单中提交类型的输入有一个默认的提交跳转事件；重置类型的输入具有重置表单行为。如果你想阻止这些浏览器的默认行为，JavaScript为你提供了一种方法。

var $ a=document . getelementsbytagname(' a ')[0]；$a.onclick=function(e){ alert('跳转操作被我停止')e . preventdefault()；//返回false//是} a href=' http://kele yi.com ' kele yi/a默认事件已消失。由于return false和e.preventDefault()具有相同的效果，它们是否不同？当然有。只有在HTML事件属性和DOM0级别的事件处理方法中，才可以通过返回return false来组织事件宿主的默认行为。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。