Event

在觸發DOM上某個事件時，會產生一個事件對象event，這個對象包含着所有事件有關的信息（導致事件的元素、事件的類型、與特定事件相關的信息）
所有瀏覽器都支持Event對象，但支持方式不同
IE中的事件對象：window.event

　　　　　/*
            封裝Event對象
            IE：window.event
         */
        function getEvent(event){
            return event?event:window.event;
        }

事件冒泡

什么是事件冒泡

即事件開始時由最具體的元素（文檔中嵌套最深的那個元素）接收，然后逐級向上傳播到較不為具體的節點

所有瀏覽器都支持事件冒泡

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>事件冒泡</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
    .one{
        width:400px;
        height:100px;
        border:1px solid #333;
    }
    .two{
        height:35px;
        line-height:35px;
        padding-left:15px;
        border:1px solid red;
    }
    .three{
        padding:10px;
        background-color: green;
        border:1px solid #999;
        cursor:pointer;
    }
</style>
<script src = "http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
    $(function(){
        $(".one").click(function(event) {
            alert($(this).text());
        });
        $(".two").click(function(event) {
            alert($(this).text());
        });
        $(".three").click(function(event) {
            alert($(this).text());
        });
    });
</script>
</head>
<body>
    <div class="one">
        我是one(div)
        <p class="two">
            我是two（p）
            <span class="three">我是three（span）</span>
        </p>
    </div>
</body>
</html>

當在span、p、div元素上各綁定一個click事件，當單擊span元素時，會依次觸發三個事件，即span、p、div元素上的click事件，這就是事件冒泡，按照DOM層次結構像水泡一樣不斷向上直至頂端

　　阻止事件冒泡

DOM中提供stopPropagation()方法，但IE不支持，使用event對象在事件函數中調用就行

IE中提供的是，cancelBubble屬性，默認為false，當它設置為true時，就是阻止事件冒泡，也是用event對象在事件函數中調用

/*
         封裝事件冒泡函數：
         document.all:判斷瀏覽器是否是IE
         IE：cancelBubble
         Firefox：stopPropagation
        */
        function stopPropagation(e){
             var e = window.event || e;
             if(document.all){
                  e.cancelBubble = true;
             }else{
                  e.stopPropagation();
             }
        }

jQuery中提供了stopPropagation()方法來停止事件冒泡，當需要時，只需用用event對象來調用就行，即event.stopPropagation();

默認行為

什么是默認行為
1. 網頁元素，都有自己的默認行為，例如，單擊超鏈接會跳轉...

阻止默認行為

DOM中提供preventDefault()方法來取消事件默認行為，但是只有當cancelable屬性設置為true的事件，才可以使用preventDefault()來取消事件默認行為，使用event對象在事件函數中調用就行
IE中提供的是returnValue屬性，默認為true，當它設置為false時，就是取消事件默認行為，也是用event對象在事件函數中調用

/*
            封裝阻止元素的默認行為函數
            IE：returnValue
            DOM：preventDefault
         */
        function preventDefaultAction(event){
            var event = window.event || event;
            if(document.all){
                //支持IE
                event.returnValue = false;
            }else{
                //IE不支持
                event.preventDefault();
            }
        }

jQuery中提供了preventDefault()方法來阻止元素的默認行為，只需要用event對象來調用就好，即event.preventDefault()

如果想同時對事件對象停止冒泡和默認行為，可以在事件處理函數中返回false。這是對事件對象同時調用stopPropagation()方法和preventDefault()方法的一種簡寫方式

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 如何阻止事件冒泡和默認行為？阻止事件冒泡和阻止事件默認行為 js事件冒泡、阻止事件冒泡以及阻止默認行為 javascript如何阻止事件冒泡和默認行為 angular 點擊事件阻止冒泡及默認行為 vuejs-阻止事件冒泡與默認行為 JS阻止冒泡和取消默認事件(默認行為) JS阻止冒泡和取消默認事件(默認行為) 阻止事件冒泡和默認行為，禁止鍵盤事件 js dom 阻止事件冒泡，阻止事件的默認行為