js中的事件捕捉模型與冒泡模型實例分析_javascript技巧

本文實例講述了js中的事件捕捉模型與冒泡模型。分享給大家供大家參考。

具體實作方法如下：

實例1：

複製程式碼 程式碼如下:

 

實例2：

複製程式碼 程式碼如下:

 

addEventListener：第三個參數為可選參數，預設為false，表示冒泡模型，即先觸發最小的層(id為son的div)；而如果加上true參數，則表示是捕捉模型(從html-->body--->div)，按這樣的層次來觸發。

實例1的html程式碼有兩個div，小的div包含在大的div內，點擊小的div時，先是會觸發alert('par')事件；然後觸發alert('son')整件。實例2正好相反。

如果是採用"物件.onclick"屬性的方式來觸發事件，採用的是冒泡模型。

IE不支援addEventListener，而是使用attachEvent。但attachEvent不支援第三個參數，它沒有捕捉模型。

希望本文所述對大家的javascript程式設計有所幫助。