事件及如何阻止事件冒泡

事件是什么?
事件是指,javascript與文檔或瀏覽器發生特定交互的瞬間。
事件分為三個階段執行:
事件捕獲階段;
處理目標階段;
事件冒泡階段;

注意:IE下沒有事件捕獲階段,只有處理目標和事件冒泡階段

event對象 代表當前事件的狀態,例如觸發event對象的元素、鼠標位置及狀態、
按下的按鍵等等。

什么是冒泡,捕獲型事件是自上而下,而冒泡型事件是自下而上的,舉個例子

css部分:
<style type="text/css">
            #box1 {
                width: 300px;
                height: 300px;
                background-color: red;
            }
            
            #box2 {
                width: 200px;
                height: 200px;
                background-color: green;
            }
        </style>
html部分:
<div id="box1">
    <div id="box2"></div>
</div>
js部分:
            document.getElementById("box2").onclick = function() {  
                alert("我是box2");
            }

            document.getElementById("box1").onclick = function() {
                alert("我是box1");
            }

            document.body.onclick = function() {
                alert("我是body");
            }

上面的代碼大家可以自己去執行以下,我們發現,當點擊box2時,不只會彈出“我是box2”,還會繼續彈出“我是box1”及“我是body”,這就是事件產生了冒泡,很明顯,我們并不希望這樣的事情發生,所以,我們需要阻止事件冒泡。

這里就不過多贅述,直接上代碼,我們需要用event來監聽事件
這里的e,就是監聽事件的形參,為了讓大家看的更明白,我用上面的例子來做演示

if(e.stopPropagation()) {
                    //非IE的
                    e.stopPropagation();

                } else {
                    //IE阻止冒泡
                    e.cancelBubble();

                }
    document.getElementById("box2").onclick = function(e) {

                //獲取event對象
                var e = e || window.event;

                alert("我是box2");

                // 阻止冒泡
                if(e.stopPropagation()) {
                    //非IE的
                    e.stopPropagation();

                } else {
                    //IE阻止冒泡
                    e.cancelBubble();

                }

            }


此時,阻止了事件冒泡,再點擊box2時,就只會彈出“我是box2”。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容