2019獨角獸企業重金招聘Python工程師標準>>>

1、事件對象

???? js的事件對象中保存了當前被觸發事件的一些相關的屬性信息，如事件源、事件發生時的鼠標位置、事件按鍵等。

???? 事件對象的獲取方法：

???? IE中可以window.event直接獲取，而Firefox中則不可以，可通過如下方法獲取：

?????????? 1）var event = window.event || arguments.callee.caller.arguments[0];?

?????????? 2）通過參數傳。function(e)?{ var event = window.event || e; }

2、事件源

???? 事件源即事件發生所在的元素（是最里層元素），在IE中用event.srcElement獲取，在Firefox中用event.target獲取。兼容性代碼如下：

?????????? var event = window.event || arguments.callee.caller.arguments[0];

?????????? var targetObj = event.srcElement || event.target;

?

3、事件冒泡

????? 在默認情況下，發生在一個子元素上的單擊事件（或者其他事件），如果在其父級元素綁定了一個同樣的事件，此時點擊子元素，click事件會首先被子元素捕獲，執行綁定的事件程序，之后會被父級元素捕獲，再次激發一段腳本的執行，這就是所謂的“事件冒泡”。

????? 但有的時候，在一個子元素上處理完單擊事件后，不想觸發其父元素的相同事件，則需要阻止冒泡的發生，阻止冒泡的方法如下：

????? 在IE里使用 window.event.cancelBubble = true;

????? 在Firefox里使用 event.stopPropagation();

????? 兼容性代碼如下所示：

??????var event = window.event || arguments.callee.caller.arguments[0];

????? if (event.stopPropagation) { event.stopPropagation(); } else { event.cancelBubble = true; }

?

4、jQuery對DOM的事件觸發具有冒泡特性，jQuery.Event對象是符合W3C標準的一個事件對象，同時jQuery.Event免 去了檢查兼容IE的步驟。jQuery.Event提供了一個非常簡單的方法來阻止事件冒泡：event.stopPropagation()；示例代碼 如下：

????? $("div").click(function(event) { event.stopPropagation(); });

????? 但是上面方法對使用live 綁定的事件沒有作用，需要一個更簡單的方法阻止事件冒泡：return false；示例代碼如下：

??????$("div").live(function() {

???????????? //do something..

???????????? return false;

????? });

注意：event.stopPropagation()和return false兩種阻止事件冒泡的方式有一些區別：return false 不僅阻止了事件往上冒泡，而且阻止了事件本身；event.stopPropagation() 則只阻止事件往上冒泡，不阻止事件本身，比如如下代碼將導致單擊文件瀏覽按鈕，無法彈出文件瀏覽對話框。

<div id="panel">

???? <input type="file" id="fileBtn"/>

</div>

<script type="text/javascript">

???? $("#panel").click(function() {

?????????? return false;???? //return false在阻止冒泡的同時也會取消當前事件本身，這將阻止文件瀏覽對話框彈出

???? });

</script>

5、阻止事件的默認行為（比如使文本輸入框的鍵盤輸入不起作用）

?? 上面說了阻止事件冒泡，但是事件的默認行為還是會發生，只不過事件不會再往上一級節點傳遞。阻止事件的默認行為的方式如下：

?? 1）原生JS的方式：

??? //如果提供了事件對象，則這是一個非IE瀏覽器???

??? if?(event?&&?event.preventDefault)?{???

????? //阻止默認瀏覽器動作(W3C)???

????? event.preventDefault();???

????}?else?{??

????????//IE中阻止函數器默認動作的方式???

?????? window.event.returnValue?=?false;???

????}??

?? return?false;

??? 2）jQuery的方式

?????? 在上面的第4點中已經說過了，直接返回false就行

轉載于:https://my.oschina.net/fuckBAT/blog/317762

總結

以上是生活随笔為你收集整理的JS的事件对象和事件冒泡的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。