JS事件捕获模型与气泡模型的案例分析

本文介绍了JS中的事件捕获模型和气泡模型，供大家参考。

具体实现方法如下：

例1：

复制代码代码如下所示：





在window.onload =函数（）{

document.getelementbyid（'par）。AddEventListener（听到咔哒声，函数（）{ alert（'par '）；}，真的）；

document.getelementbyid（孩子的）。AddEventListener（听到咔哒声，函数（）{ alert（孩子的）；}，真的）；

}





# PAR {宽度：300px；高度：200px；背景：灰色；}

#儿子{宽度：200px；身高：100px；背景：绿色；}

















例2：

复制代码代码如下所示：





在window.onload =函数（）{

document.getelementbyid（'par）。AddEventListener（听到咔哒声，函数（）{ alert（'par '）；}）；

document.getelementbyid（孩子的）。AddEventListener（听到咔哒声，函数（）{ alert（孩子的）；}）；

}





# PAR {宽度：300px；高度：200px；背景：灰色；}

#儿子{宽度：200px；身高：100px；背景：绿色；}

















AddEventListener：这第三个参数是可选的，默认为false，表示泡沫模型，由此引发的最小层（我儿子DIV）；如果真实参数，那么就是捕捉模型（从HTML -->体——> DIV），根据这一水平触发。

实例1 HTML代码有两部小div包含在大区点击小div时，就会触发警报（'par）事件，然后触发警报（孩子的）整体。例2正好相反。

如果一个对象。单击属性是用来触发一个事件，一个泡沫模型应用。

IE不支持注册侦听器，但使用attachevent。但attachevent不支持第三个参数，它不捕获模型。

希望本文能对大家的javaｓｃｒｉｐｔ程序设计有所帮助。