js 冒泡事件與事件監聽使用分析

2024-05-06 14:13:49

字體：大中小

來源：轉載

供稿：網友

冒泡事件
js中“冒泡事件(bubble)”并不是能實際使用的花哨技巧，它是一種對js事件執行順序的機制，“冒泡算法”在編程里是一個經典問題，冒泡算法里面的“冒泡”應該說是交換更加準確；js里面的“冒泡事件”才是真正意義上的“冒泡”，它從DOM最低層逐層遍歷樹，然后附加相應事件。以下面代碼為例：

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]
查看運行效果
事件監聽
事件監聽準確一點講可以說是js引擎對用戶鼠標、鍵盤、窗口事件等動作的監視進行的操作，也就是針對用戶相應的操作進行附加事件，常用的類似 btnAdd.onclick="alert('51obj.cn')"就是一種簡單的附加事件，只不過這種方法不支持附加多個事件以及刪除事件。以下代碼將實現附加事件后刪除事件（IE下）：

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]
查看運行結果
IE不能稱為標準的DOM瀏覽器，即使是最新的IE8，相對于標準DOM如Firefox、Opera等，它是個“異類”；在Firefox中才真正有稱為事件監聽的函數addEventListener，如下例

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]
查看運行效果
從上面兩個例子看出attachEvent在Firefox中并不支持，IE也不支持addEventListener.因此需要使用兼容性的方法。

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

上一篇：javaScript 簡單驗證代碼（用戶名，密碼，郵箱)

下一篇：ext 同步和異步示例代碼