DOM編程系列之事件

時間 2019-12-09

標籤 dom 編程系列事件欄目 HTML 简体版

原文原文鏈接

事件

所謂事件就是是瀏覽器告知JavaScript程序用戶的行爲

事件的屬性

HTML頁面元素提供的事件屬性

HTML頁面元素提供的事件屬性 -> 元素的屬性分類之一html
- DOM提供了一系列的事件名稱

示例代碼:node

<body>
<!--
    HTML頁面元素提供的事件屬性 -> 元素的屬性分類之一
    * DOM提供了一系列的事件名稱
 -->
<button onclick="myClick()" id="btn">按鈕</button>
<script>
    function myClick(){
        console.log('你終於點中了我...');
    }
</script>
</body>

DOM對象提供的事件屬性

DOM對象能夠設置事件屬性

示例代碼:瀏覽器

<body>
<button id="btn">按鈕</button>
<script>
    var btn = document.getElementById('btn');
    // DOM對象的事件屬性
    btn.onclick = myClick;
    function myClick(){
        console.log('你終於點中了我...');
    }
</script>
</body>

事件監聽器

DOM對象提供的事件屬性 - 沒法同時爲一個指定元素綁定相同事件屢次
事件監聽器也能夠設置事件屬性
注意: 該方法有瀏覽器兼容問題

示例代碼:函數

<body>
<button id="btn">按鈕</button>
<script>
    var btn = document.getElementById('btn');
    // DOM對象提供的事件屬性 - 沒法同時爲一個指定元素綁定相同事件屢次
    /*btn.onclick = function(){
        console.log('xxx');
    }
    btn.onclick = function(){
        console.log('yyy');
    }*/

    /*
        爲指定元素添加事件監聽器
        addEventListener(eventName, callback)
        * 參數
          * eventName - 表示綁定的事件名稱(注意:沒有on)
          * callback - 表示事件的處理函數(回調函數)
        * 容許爲相同元素綁定相同事件屢次
      */
    /*btn.addEventListener('click',function(){
        console.log('xxxx...');
    });
    btn.addEventListener('click',function(){
        console.log('yyyy...');
    });*/
</script>
</body>

瀏覽器兼容解決方案

示例代碼:code

事件監聽器的瀏覽器兼容問題(IE 8如下版本瀏覽器不支持)
        attachEvent(eventName,functionName)方法
        * 參數
          * eventName - 表示事件名稱(注意:必須有on)
          * functionName - 表示事件的處理函數
     */
    btn.attachEvent('onclick',function(){
        console.log('xxxx...');
    });

    // 提供瀏覽器兼容解決方案
    function bind(element, eventName, functionName){
        if (element.addEventListener) {
            element.addEventListener(eventName, functionName);
        } else {
            element.attachEvent('on' + eventName, functionName);
        }
    }

移除註冊事件

removeEventListener(eventName,functionName)方法htm
- 表示對已經綁定的事件進行移除
- 參數:對象
  - eventName - 表示要移除的事件名稱
  - functionName - 表示事件的處理函數事件
    - 必須是註冊事件的處理函數(就是必須是同一個函數)

示例代碼:ip

<body>
<button id="btn">噠噠噠</button>
<script>
    /* 獲取指定ID屬性 */
    var btn = document.getElementById('btn');
    /* 添加鼠標點擊事件 */
    function myClick() {
        console.log('一花一世界...');
    }
    /* 添加事件監聽器 */
    btn.addEventListener('click',myClick);
    btn.addEventListener('click',function () {
        console.log('一笑一人生...');
    });
    /*
        移除註冊事件 - removeEventListener(eventName,functionName)方法
          * 參數 :
            * eventName - 表示要移除的事件名稱
            * functionName - 表示事件的處理函數
              * 必須是註冊事件的處理函數(就是必須是同一個函數)
     */
    btn.removeEventListener('click',myClick);
    /*
</script>
</body>

解決瀏覽器兼容問題

示例代碼:element

IE 8如下的版本瀏覽器不支持removeEventListener方法()
          * detachEvent(eventName,functionName)
            * eventName - 表示移除的事件名稱(必須有on)
            * functionName - 表示事件處理函數
              * 必須是註冊事件的處理函數(就是必須是同一個函數)
     */
    function unbind(element,eventName,functionName) {
        if (element.removeEventListener) {
            element.removeEventListener(eventName,functionName);
        }else {
            element.detachEvent('on' + eventName,functionName);
        }
    }

事件對象

Event事件對象 - 做爲全部事件對象的父級
- MouseEvent事件對象 - 表示鼠標事件
- KeyboardEvent事件對象 - 表示鍵盤事件
- TouchEvent事件對象 - 表示觸摸事件

示例代碼:

<body>
<button id="btn">噠噠噠</button>
<script>
    var btn = document.getElementById('btn');
    // 事件的處理函數中接收一個參數 - 事件對象
    btn.addEventListener('click',function (event) {
        /*
            Event事件對象 - 做爲全部事件對象的父級
              * MouseEvent事件對象 - 表示鼠標事件
              * KeyboardEvent事件對象 - 表示鍵盤事件
              * TouchEvent事件對象 - 表示觸摸事件
         */
       console.log(event);
    });
</script>
</body>

解決瀏覽器兼容問題

示例代碼:

// IE 8如下版本瀏覽器提供的添加事件監聽器方法 - 事件對象是做爲window對象屬性出現
    btn.attachEvent('onclick',function () {
        console.log(window.event);
    });
    function bind(element, eventName, functionName){
        if (element.addEventListener) {
            element.addEventListener(eventName, functionName);
        } else {
            element.attachEvent('on' + eventName, function(){
                functionName.call(element);
            });
        }
    }

    bind(btn,'click',function(event){
        var e = event || window.event;
    });

    /*btn.onclick = function(event){
        console.log(event);
    }*/

    function myClick(event){
        console.log(event);
    }

阻止默認行爲

return false; - return語句
- 做用 - 當前函數是事件的處理函數時，阻止默認行爲
- 注意 - return語句以後的邏輯代碼不會被執行
  - 編寫在函數體的最後面
- 只有在DOM對象的事件屬性中具備阻止默認行爲的功能

示例代碼:

<a href="#">連接</a>
<script>
    var aElement = document.getElementsByTagName('a')[0];

    /*aElement.addEventListener('click',function(event){
        event.preventDefault();// 阻止默認行爲
    });*/

    aElement.onclick = function(event){
        // event.preventDefault();// 阻止默認行爲
        /*
            return false; - return語句
            * 做用 - 當前函數是事件的處理函數時，阻止默認行爲
            * 注意 - return語句以後的邏輯代碼不會被執行
              * 編寫在函數體的最後面
            * 只有在DOM對象的事件屬性中具備阻止默認行爲的功能
         */
        return false;
    }

    aElement.attachEvent('onclick',function(event){
        var e = event || window.event;
        e.returnValue = false;// 阻止默認行爲
    });

</script>
</body>

獲取鼠標座標值

pageX和pageY
- 鼠標座標值相對於當前HTML頁面
clientX和clientY
- 表示獲取鼠標在可視窗口中的位置
screenX和screenY
- 表示獲取鼠標在顯示器屏幕中的位置

示例代碼:

<body>
<script>
    var html = document.documentElement;
    html.addEventListener('click',function(event){
        // 鼠標座標值相對於當前HTML頁面
        console.log(event.pageX, event.pageY);
        // 鼠標座標值相對於當前可視區域
        console.log(event.clientX, event.clientY);
        // 鼠標座標值相對於當前屏幕的
        console.log(event.screenX, event.screenY);
        // 鼠標座標值只能獲取，不能設置
    });

</script>
</body>

獲取相對於定位父元素的鼠標座標值

offsetX和offsetY
- 表示獲取鼠標相對於在父元素中的位置

示例代碼:

<style>
        #d1 {
            width: 400px;
            height: 400px;
            border: 1px solid black;

            margin-top: 300px;
            margin-left: 300px;
        }

    </style>
</head>
<body>
<div id="d1"></div>
<script>
    // 相對於指定元素的鼠標座標值
    var div = document.getElementById('d1');
    div.addEventListener('click',function(event){
        console.log(event.offsetX, event.offsetY);
    });

</script>
</body>

事件委託

就是爲全部相同父級的子級元素綁定事件

示例代碼:

<body>
<div id="container">
    <button id="btn1">按鈕</button>
    <button id="btn2">按鈕</button>
    <button id="btn3">按鈕</button>
</div>
<script>
    /*var btn1 = document.getElementById('btn1');
    btn1.addEventListener('click',function(){
        console.log('這是一個按鈕');
    });
    var btn2 = document.getElementById('btn2');
    btn2.addEventListener('click',function(){
        console.log('這是一個按鈕');
    });
    var btn3 = document.getElementById('btn3');
    btn3.addEventListener('click',function(){
        console.log('這是一個按鈕');
    });*/

    // 不將事件綁定給指定元素，而是綁定給共同的父級/祖先元素
    var container = document.getElementById('container');
    container.addEventListener('click',function(event){
        var target = event.target;// 觸發事件的目標元素
        if (target.nodeName === 'BUTTON') {
            console.log('這是一個按鈕');
        }
    });
</script>
</body>