JavaScript 事件

時間  2020-03-09
標籤 javascript 事件 欄目 JavaScript 简体版
原文   原文鏈接

事件級別

DOM0級事件處理程序（後添加的會覆蓋新添加的事件）
DOM2級事件處理程序（能夠爲同一元素綁定多個事件，事件執行順序：先添加的先執行）css

DOMO    element.onclick=function()}
DOM2    element.addEventListener('click' ,function(){},false) //false（默認）冒泡階段觸發
DOM3    element.addEventListener("keyup' ,function(){},false)
//DOM 0 級事件
let para = document.getElementById("para");
para.onclick = function () {
    alert("1");
};
para.onclick = function () {
    alert("2");
};
//DOM2 級事件
let para = document.getElementById("para");
para.addEventListener("click", function () {
    alert("1");
});
para.addEventListener("click", function () {
    alert("2");
});

事件類型

onload 和 onunload 事件

當用戶進入後及離開頁面時，會觸發 onload 和 onunload 事件。
onload 事件可用於檢測訪問者的瀏覽器類型和瀏覽器版本，而後基於該信息加載網頁的恰當版本。
onload 和 onunload 事件可用於處理 cookie。html

onchange 事件

onchange 事件常常與輸入字段驗證結合使用。面試

//當用戶改變輸入字段內容時，會調用 upperCase() 函數。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="text" id="fname" onchange="upperCase()">
<script>
    function upperCase() {
        let fname = document.getElementById("fname");
        fname.value = fname.value.toUpperCase();
    }
</script>
</body>
</html>

onmouseover 和 onmouseout 事件

onmouseover 和 onmouseout 事件可用於當用戶將鼠標移至 HTML 元素上或移出時觸發某個函數：瀏覽器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            text-align: center;
            font-size: 30px;
            background: #0b6cbc;
        }
    </style>
</head>
<body>
    <div class="box" onmouseover="mOver(this)" onmouseout="mOut(this)"></div>
    <script>
        function mOver(obj){
            obj.innerHTML = "你把鼠標移上來了"
        }
        function mOut(obj){
            obj.innerHTML = "你把鼠標移出去了"
        }
    </script>
</body>
</html>

onmousedown, onmouseup 以及 onclick 事件

onmousedown, onmouseup 以及 onclick 事件構成了完整的鼠標點擊事件。cookie

首先當鼠標按鈕被點擊時，onmousedown 事件被觸發；而後當鼠標按鈕被釋放時，onmouseup 事件被觸發；最後，當鼠標點擊完成後，onclick 事件被觸發。dom

<div class="box" onmousedown="mDown(this)" onmouseup="mUp(this)">演示</div>
<script>
    function mDown(obj) {
        obj.innerHTML = "你點下去了";
    }

    function mUp(obj) {
        obj.innerHTML = "你的點擊釋放了";
    }

</script>

事件監聽器

定義：事件句柄是指事件發生時要進行的操做。

addEventListener() 方法

爲指定元素指定事件處理程序。函數

element.addEventListener(event, function, useCapture);
event:事件類型
function:事件句柄
useCapture：指定使用事件冒泡仍是事件捕獲。此參數是可選的。默認值是 false：冒泡傳播；true：捕獲傳播。

注意：請勿對事件使用 "on" 前綴；請使用 "click" 代替 "onclick"。
說明：性能

  • addEventListener() 方法爲元素附加事件處理程序而不會覆蓋已有的事件處理程序。
  • 可以向一個元素添加多個事件處理程序。
  • 可以向一個元素添加多個相同類型的事件處理程序，例如兩個 "click" 事件。
  • 可以向任何 DOM 對象添加事件處理程序而非僅僅 HTML 元素，例如 window 對象。

removeEventListener()方法

刪除事件監聽器。 若是要移除事件句柄，addEventListener() 的執行函數必須使用外部函數
示例：優化

<p id="para">para</p>
<script>
    let para = document.getElementById("para");
    function say() {
        alert("被點擊了");
    }
    para.addEventListener("click", say, false);
    setTimeout(function () {
        para.removeEventListener("click", say);
    }, 3000);
</script>

IE 八、Opera 6.0 及其更早版本不支持 addEventListener() 和 removeEventListener() 方法。不過，對於這些特殊的瀏覽器版本，您可使用 attachEvent() 方法向元素添加事件處理程序，並由 detachEvent() 方法刪除：this

element.attachEvent(event, function);
element.detachEvent(event, function);

跨瀏覽器解決方案：

let x = document.getElementById("myBtn");
if (x.addEventListener) {                    // 針對主流瀏覽器，除了 IE 8 及更正版本
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) {                  // 針對 IE 8 及更早版本
    x.attachEvent("onclick", myFunction);
}

事件模型

事件模型.png

事件流

事件流.png

事件流：當前頁面與用戶交互的過程當中，事件是如何傳到野蠻上的。
事件流通過三個階段：事件經過捕獲到達目標，再從目標元素冒泡到Window對象

DOM事件捕獲的具體流程

事件捕獲.png

事件代理（事件委託）

事件代理，又稱事件委託（Delegation）。當事件觸發時，把要作的事委託給父元素（或父元素的父元素）來處理。利用事件的冒泡機制，管理某一類型元素上的全部事件。

示例：

要求：給每一個 li 添加點擊事件，彈出相應內容
分析：若是咱們經過for循環爲每一個li單獨綁定click事件，因爲元素數量過多無疑會形成網頁性能降低，有內存泄露的風險。
若是將click事件綁定在ul元素上，只須要綁定一次事件，經過Event對象的target屬性返回事件源（即事件的目標節點），能夠作不一樣的處理，這就是事件代理，本來須要目標元素處理的事件，交由其父元素代爲執行。採用事件代理避免了頻繁的操做DOM，優化效果可想而知。 
<ul id="list">
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
    <li>555</li>
</ul>
</body>
<script>
    let ul = document.getElementById("list");
    ul.addEventListener("click", function (event) {
        alert(event.target.innerHTML);
    })
</script>

Event 對象

Event 對象表明事件的狀態，好比事件在其中發生的元素、鍵盤按鍵的狀態、鼠標的位置、鼠標按鈕的狀態。

Event 對象的常見應用

event.preventDefault() //阻止連接默認跳轉的行爲
event.stopPropagation() //阻止冒泡的行爲
event.stoplmmediatePropagation() //事件優先級相關。當一個按鈕「點擊」註冊了兩個事件，在第一個事件中載這句話會阻止第二個事件的發生。
event.currentTarget //當前所綁定的事件
event.target //返回觸發此事件的元素（事件的目標節點）。

自定義事件 / 模擬事件

（面試中很是重要的點） 
<p id="para">
    para
</p>
<script>
    let para = document.getElementById("para");
    // 新建事件實例
    let eve = new Event("pillar");
    // 添加監聽函數
    para.addEventListener("pillar", function () {
        alert("pillar");
    });
    setTimeout(() => {
        // 觸發事件
        para.dispatchEvent(eve);
    }, 3000);
</script>

CustomEvent 和 Event 的區別：

CustomEvent 除了能夠指定事件名，還能夠在後面跟一個object 作指定參數。 
let para = document.getElementById("para");
let eve = new CustomEvent("pillar", {
    color: "red",
    sport: {
        run: "running",
    }
});
para.addEventListener("pillar", function (event) {
    console.log(event);
});
para.dispatchEvent(eve);

編寫一個通用的事件監聽函數（兼容普通綁定和事件代理）

function bindEvent(elem, type, selector, fn) {
    if (fn == null) {
        fn = selector
        selector = null
    }
    elem.addEventListener(type, event => {
        const target = event.target
        if (selector) {
            // 代理綁定
            if (target.matches(selector)) { //判斷當前建立的dom元素符不符合一個css選擇器
                fn.call(target, event)
            }
        } else {
            // 普通綁定
            fn.call(target, event)
        }
    })
}
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程