javascript事件气泡的详细解决方案

javascript事件气泡的详细解决方案
事件是Javascript的核心内容之一。不可避免地,在事件的应用中涉及到一个重要的概念,即事件气泡。在引入气泡之前,我们引入另一个重要概念:事件流。

首先,事件的流程是什么:

文档对象模型(DOM)是一个树形结构,可以在下图中直观地表示。

如果一个HTML元素触发一个事件,它将在触发节点和DOM树中的根节点之间以一定的顺序传播。所有的节点都会收到触发事件,称为事件流,根据事件传播的顺序,可以分为两类:一类是事件冒泡,另一类是事件捕获,涉及到本章的主题。

1。事件冒泡:

所谓的泡沫的时候,一个元素触发一个事件,事件像一个水泡,从触发单元的所有父节点传播,直到根节点将接收该事件,如果父元素在相应的事件处理函数注册,所以虽然在子节点的处理函数在父元素的注册事件触发的事件也会被触发。例如,在上面的图中,如果一个onclick事件触发的元素,然后它的父元素P、文档和寡妇将收到此事件,如果父元素对应的注册时间处理函数,然后该事件处理程序将被执行,看到一段代码示例:

事件泡沫简介

窗口。指针函数(){
无功表= document.getelementbyid(表);
表。onclick=功能(e){
风险事件= E | | window.event;
Target=event.srcElement||event.target;
警报(目标。innerHTML);
}
}


上述代码的目的是弹出相应的单元格的内容,单击相应的单元格时。但在上面的实现不是每个细胞注册onclick事件处理功能,但onclick事件处理函数表在母细胞注册,当点击单元格将触发onclick事件,而且从事件对象事件的传播,而表元注册了onclick事件处理这次将执行此功能,加工功能,当然也将通过设置事件对象参数的问题。所有的浏览器都支持事件bubbling.two。事件捕获:

事件捕获和事件冒泡恰恰相反,当点击某个元素时,事件传播的方向是从根元素到IE浏览器不支持跨浏览器支持,所以默认情况下一般是使用冒泡类型的事件处理模型。

2.javascript阻止事件冒泡的代码

事件冒泡在某些情况下非常有用,但有时必须停止。下面是一个示例代码,可以与所有主流浏览器兼容,防止事件冒泡。

代码实例:

功能stopbubble(E)
{
如果(EE。里面)
{
e.stoppropagation();
}
其他的
{
窗口。cancelbubble =真实事件;
}
}
上面的代码可以防止事件冒泡,下面是对代码的简单注释:

两。代码注释:

1.function stopbubble(e){ },这个函数是用来停止事件,事件对象参数。
2。如果(EE。里面){ e.stoppropagation();},以决定是否支持里面,如果e.stoppropagation()()函数是used.stoppropagation IE10和下面的IE10不支持的浏览器。
3。窗口。事件。cancelbubble = true,当前的IE浏览器使用该阻止事件冒泡。
以上是对javascript事件冒泡的详细介绍,希望能对大家有所帮助。
免责声明:本网信息来自于互联网,目的在于传递更多信息,并不代表本网赞同其观点。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,并请自行核实相关内容。本站不承担此类作品侵权行为的直接责任及连带责任。如若本网有任何内容侵犯您的权益,请及时联系我们,本站将会在24小时内处理完毕。
相关文章
返回顶部