天天看點

DOM事件探秘之二

3 事件對象

2 IE中的事件對象

(1)type屬性 用于擷取事件類型

(2)srcElement屬性 用于擷取事件目标

(3)cancelBubble()方法 用于阻止事件冒泡

設定為true表示阻止事件冒泡 ,設定為false表示不阻止冒泡。

(4)returnValue()方法 阻止事件的預設行為

設定為false表示阻止事件的預設行為

getEvent: function(event) { //擷取事件
  return event ? event : window.event; //三元表示,可以用event就用event不可以就用window.event
},
getType: function(event) { //擷取事件類型
  return event.type;
},
getElement: function(event) { //擷取事件元素
  return event.target || event.srcElement;
},
preventDefault: function(event) { //阻止事件預設行為
  if (event.preventDefault) {
        event.preventDefault(); //如果支援event.preventDefault方法就用這個
  } else {
        event.returnValue = false; //否則使用returnValue方法
        }
},
stopPropagation: function(event) { //阻止事件冒泡
  if (event.stopPropagation) {
    event.stopPropagation(); //如果支援stopPropagation方法就使用這個
  } else {
       event.cancelBubble = true; //否則使用cancelBubble方法
        }
}
           

事件對象的執行個體:使用者點選登入按鈕時會彈出一個登入框,取消時登入框也會退出。效果如下:

DOM事件探秘之二

【完整執行個體代碼】:

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    * {
        margin: ;
        padding: ;
    }

    .head {
        font-size: px;
        padding: px   px;
    }

    #login_box {
        width: px;
        height: px;
        background: #eee;
        border: px solid #ccc;
        position: absolute;
        left: %;
        top: %;
        margin-left: -px;
        margin-top: -px;
        display: none;
    }

    #login_box p {
        height: px;
        border-bottom: px solid #ccc;
        font-size: px;
        padding: px   px;
        font-weight: bold;
    }

    #close {
        width: px;
        height: px;
        background: url(close.png) no-repeat;
        position: absolute;
        right: px;
        top: px;
        cursor:pointer;//滑鼠樣式
    }
    </style>
    <script>
    window.onload = function() {
        var login_btn = document.getElementById('login'),
            login_box = document.getElementById('login_box'),
            close = document.getElementById('close');
        // 封裝添加事件監聽程式
        function addEvent(ele, type, hander) {
            // 執行代碼
            if (ele.addEventListener) {
                ele.addEventListener(type, hander, false);
            } else if (ele.attachEvent) {
                ele.attachEvent('on' + type, hander);
            } else {
                ele['on' + type] = hander;
            }
        }
        // 顯示登入層函數
        function showLogin() {
            // 執行代碼
            login_box.style.display = 'block';
        }
        // 隐藏登入層函數
        function hideLogin() {
            // 執行代碼;
            login_box.style.display = 'none';
        }
        //點選登入按鈕顯示登入層 
        // 執行代碼
        addEvent(login_btn, 'click', showLogin);
        //點選關閉按鈕隐藏登入層
        // 執行代碼
        addEvent(close, 'click', hideLogin);
    }
    </script>
</head>

<body>
    <div class="head">親,您好!
        <input type="button" value="登 錄" id="login">
    </div>
    <div id="login_box">
        <p>使用者登入</p><span id="close">X</span>
    </div>
</body>

</html>
           

繼續閱讀