事件是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事件冒泡的
详细介绍,希望能对大家有所帮助。