JavaScript學習筆記（DOM 事件、事件監聽器）

JavaScript學習筆記（DOM 事件、事件監聽器）
@[TOC](JavaScript學習筆記（DOM 事件、事件監聽器）
HTML事件屬性
使用HTML DOM分配事件
onload和onunload事件
onchange事件
onmouseove 和onmouseout事件
onmousedown,onmouseup 以及onclick事件
事件監聽器
addEventListener()方法
外部函數的方式
向相同元素添加多個事件處理程序
能夠向相同元素添加不同類型的事件：
向Window對象添加事件處理程序
傳遞參數
事件冒泡還是事件捕獲？
removeEventListener()方法
跨瀏覽器解決方案：

HTML DOM 允許 JavaScript 對 HTML 事件作出反應：

對事件作出反應
JavaScript能夠在事件發生時，比如當用戶點擊某個HTML元素時。
爲了在用戶點擊元素時執行代碼，請向HTML事件屬性添加JavaScript代碼：

onclick = JavaScript

HTML事件的例子:

當用戶點擊鼠標時
當網頁加載後
當圖像加載後
當鼠標移至元素上時-
當輸入字段被改變時
當 HTML 表單被提交時
當用戶敲擊按鍵時
例如，當用戶點擊h1時，會改變其內容

<body>
    <h1 onclick="this.innerHTML='謝謝小可愛'">請點擊我！</h1>
</body>

使用事件處理程序調用函數：

<body>
    <!-- <h1 onclick="this.innerHTML='謝謝小可愛'">請點擊我！</h1> -->
    <h1 onclick="changeText(this)">請點擊我親愛的！</h1>

    <script>
        function changeText(id) {  
            id.innerHTML = "你是不是傻啊！";        }
    </script>
</body>

HTML事件屬性

如需向 HTML 元素分配事件，您能夠使用事件屬性。
向button元素分配onclick事件：

	<p>請點擊按鈕來顯示日期。</p>

    <button onclick="displayDate()">今天的時間是？</button>

    <script>
        function displayDate() {  
            document.getElementById("demo").innerHTML = Date();
        }
    </script>

    <p id="demo"></p>

在上例中，名爲 displayDate 的函數會在按鈕被點擊時執行。

使用HTML DOM分配事件

HTML DOM允許使用JavaScript向HTML元素分配事件：

實例爲button元素指定onclick事件：

<script>
	document.getElementById("myBtn").onclick = displayDate;
</scipt>

<p>請點擊“試一試”按鈕，以執行 displayDate() 函數。</p>

    <button id="myBtn" >試一試</button>

    <p id="demo"></p> 
    <script>
        document.getElementById("myBtn").onclick = displayDate;

        function displayDate() {  
            document.getElementById("demo").innerHTML = Date();
        }
    </script>

在上例中，名爲 displayDate 的函數被分配到 id=“myBtn” 的 HTML 元素。

當點擊按鈕時將執行函數。

onload和onunload事件

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

<body onload=:"checkCookies()">

<body onload="checkCookies()">


    <p id="demo"></p>

    <script>
        function checkCookies() {  
            var text = "";
            if(navigator.cookieEnabled == true){
                text = "Cookie 已啓用";
            }else{
                text = "Cookie 未啓用";
            }
            document.getElementById("demo").innerHTML = text;
        }
    </script>
</body>

onchange事件

onchange 事件經常與輸入字段驗證結合使用。
下面是一個如何使用onchange的例子。當用戶改變輸入字段內容時，會調用upperCase()函數。

實現

<input type ="text" id="fname" onchange="upperCase()">

<script>
    function myFunctioin() {  
        var x = document.getElementById("fname");
        x.value = x.value.toUpperCase();
    }
</script>
<body>

    請輸入名字：<input type="text" id="fname" 
    onchange="myFunctioin()"> 

    <p>離開輸入字段時，會觸發一個函數，將輸入的文本輪換爲大寫</p>

</body>

onmouseove 和onmouseout事件

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

	<div onmousemove="mOver(this)" onmouseout="mOut(this)"
    style="background-color: red;width: 
    120px;height: 20px;padding: 40px;">請把鼠標移上來</div>

    <script>
        function mOver(obj) {  
            obj.innerHTML = "謝謝小寶貝！"
        }

        function mOut(obj) {
            obj.innerHTML = "請把鼠標移上來"
        }
    </script>

onmousedown,onmouseup 以及onclick事件

onmousedown,onmouseup以及onclick事件構成了完整的鼠標單擊事件。
首先當鼠標按鈕被點擊時，onmousedown事件被觸發
然後當鼠標按鈕被釋放時，onmouseup事件被觸發
最後當鼠標點擊完成後，onclick事件被觸發。

<div onmousedown="mDown(this)" onmouseup="mUp(this)"
    style="background-color: #D94A38;width: 90px;height: 20px;padding: 40px;">
    點擊鼠標</div>

    <script>
        function mDown(obj) {  
            obj.style.backgroundColor = "#1ec5e5";
            obj.innerHTML = "鬆開鼠標";
        }
        function mUp(obj) {
            obj.style.backgroundColor="#D94A38";
            obj.innerHTML = "謝謝你！";
        }
    </script>

事件監聽器

addEventListener()方法

添加當用戶點擊按鈕時觸發的事件監聽器：

document.getElementById("myBtn").addEventListener("click",displayDate);

<h2>JavaScript addEventListener</h2>

    <p>此示例使用 addEventListener() 方法將click事件附加到按鈕。</p>

    <button id="myBtn">試一試</button>

    <p id="demo"></p>

    <script>
        //addEventListener() 方法爲指定元素指定事件處理程序。
        document.getElementById("myBtn").addEventListener("click",
        displayDate);

        function displayDate() {
            document.getElementById("demo").innerHTML = Date();
        }
    </script>

解釋：
addEventListener()方法爲指定元素指定事件處理程序。
addEventListener()方法爲元素附加事件處理程序而不會覆蓋已有的事件處理程序。
能夠向一個元素添加多個事件處理程序。
能夠向一個元素添加多個相同類型的事件處理程序，例如兩個"click"事件。
能夠向任何DOM對象添加事件處理程序而非僅僅HTML元素，例如window對象。
addEventListener()方法使我們更容易控制事件如何對冒泡作出反應。
當使用addEventListener()方法時，JavaScript與HTML標記是分隔的，已達到更佳的可讀性；即使在不控制HTML標記時也允許添加事件監聽器。
能夠通過使用removeEventListener()方法輕鬆地刪除事件監聽器。
語法：

element.addEventListener(event,function,userCapture;

第一個參數是事件的類型（比如 “click” 或 “mousedown”）。

第二個參數是當事件發生時我們需要調用的函數。

第三個參數是布爾值，指定使用事件冒泡還是事件捕獲。此參數是可選的。

注意：請勿對事件使用 “on” 前綴；請使用 “click” 代替 “onclick”。

向元素添加事件處理程序

當用戶點擊某個元素時提示"hello world!";

<h2>JavaScript addEventListener</h2>

    <p>此示例使用 addEventListener() 方法將click事件附加到按鈕。</p>

    <button id="myBtn">試一試</button>

    <p id="demo"></p>

    <script>
        document.getElementById("myBtn").addEventListener("click",
        function () {  
            alert("Hello World!");
        });
    </script>

外部函數的方式

<h2>JavaScript addEventListener</h2>

    <p>此示例使用 addEventListener() 方法將click事件附加到按鈕。</p>

    <button id="myBtn">試一試</button>

    <p id="demo"></p>

    <script>
      
        document.getElementById("myBtn").addEventListener("click",
        myFunction);

        function myFunction() {  
            alert("Hello World");
        }
    </script>

向相同元素添加多個事件處理程序

addEventListener()方法允許向相同元素添加多個事件，同時不覆蓋已有事件。

	<h1>JavaScript addEventListener()</h1>

    <p>此示例使用 addEventListener() 方法將兩個 click事件附加到按鈕。</p>

    <button id="myBtn">試一試</button>


    <script>
        var x = document.getElementById("myBtn");
        x.addEventListener("click",myFuction);
        x.addEventListener("click",someOtherFuction);

        //addEventListener() 方法允許您向相同元素添加多個事件，同時不覆蓋已有事件：
        //這裏也就執行了兩個彈出窗口事件
        function myFuction(){
            alert("myFuction函數執行了！");
        }

        function someOtherFuction() {  
            alert("someOtherFuction函數執行了！")
        }

    </script>

能夠向相同元素添加不同類型的事件：

用 addEventListener() 方法在同一按鈕上添加許多事件。

<h1>JavaScript addEventListener()</h1>

    <p>此示例使用 addEventListener() 方法在同一個按鈕上添加了很多事件。</p>

    <button id="myBtn">試一試</button>

    <p id="demo"></p>

    <script>
    
        //在一個鼠標上添加了三個事件
        var x = document.getElementById("myBtn");
        x.addEventListener("mouseover",myFunction);
        x.addEventListener("click",mySecondFunction);
        x.addEventListener("mouseout",myThirdFunction);

        //鼠標懸停事件
        function myFunction() {
            document.getElementById("demo").innerHTML += "Moused over!<br>";
        }
        //鼠標單擊事件
        function mySecondFunction() {
            document.getElementById("demo").innerHTML += "Clicked!<br>";
        }
        //鼠標離開事件
        function myThirdFunction() {
            document.getElementById("demo").innerHTML += "Moused out!<br>";
        }
    </script>

演示效果：

向Window對象添加事件處理程序

addEventListener() 允許將事件監聽器添加到任何HTML DOM對象上，比如HTML元素、HTML對象、window對象或者其他支持事件的對象、比如xmlHttpRequest對象。
添加當用戶調整窗口大小時觸發的事件監聽器：


	<h1>JavaScript addEventListener()</h1>

    <p>此例在 window 對象上使用 addEventListener() 方法</p>

    <p>嘗試調整此瀏覽器窗口的大小以觸發"resize"事件處理程序。</p>
    <p id="demo"></p>

    <script>
        //改變瀏覽器窗口的大小就會隨機生成一個數並寫到id爲
        window.addEventListener("resize",function () {  
            document.getElementById("demo").innerHTML = Math.random();
        });

    </script>

傳遞參數

當傳遞參數值時，請以參數形式使用調用指定函數的“匿名函數”：

	<h1>JavaScript addEventListener</h1>

    <p>此例演示如何在使用 addEventListener() 方法時傳遞參數</p>

    <p>單擊按鈕以執行計算</p>

    <button id="myBtn">試一試</button>

    <p id="demo"></p>

    <script>
    
        var p1 = 5;
        var p2 = 7;
        
        document.getElementById("myBtn").addEventListener("click",function () {  
            myFunction(p1,p2);
        });

        function myFunction(a,b) {  
            var result = a * b;
            document.getElementById("demo").innerHTML = result;
        }
    </script>

事件冒泡還是事件捕獲？

在HTML DOM中有兩種事件傳播的方法：冒泡和捕獲。
事件傳播是一種定義當發生事件時元素次序的方法。假如div元素內有一個p，然後用戶點擊了這個p元素，應該首先處理哪個元素"click"事件？
在冒泡中，最內側元素的事件會首先被處理，然後是更外側的：首先處理p元素的點擊事件，然後是div元素的點擊事件。
在捕獲中，最外側元素的事件會首先被處理，然後是更內側的：首先處理div元素的點擊事件，然後是p元素的點擊事件。
在addEventListener()方法中，你能夠通過使用“userCapture”參數來規定傳播類型：

addEventListener(event,functioni,userCapture);

removeEventListener()方法

removeEventListener()方法會刪除已通過addEventListener()方法附加的事件處理程序：

<head>
    <meta charset="utf-8">

    <style>
        #myDIV{
            background-color: coral;
            border: 1px solid;
            padding: 50px;
            color: white;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <h1>JavaScript removeEventListener()</h1>

    <div id="myDIV">
        <p>這個div元素有一個onmousemove事件處理程序，每次在這個橙色字段中移動鼠標都會顯示一個
            隨機數。
        </p>
        <p>單擊按鈕以刪除div的事件處理程序。</p>

        <button onclick="removeHandler()" id="myBtn">刪除</button>
    </div>

    <p id="demo"></p>
    <script>
        
        document.getElementById("myDIV").addEventListener("mousemove",myFunction);
        //添加隨機數事件
        function myFunction() {
            document.getElementById("demo").innerHTML = 
            Math.random();
        }

        //去除生成隨機數的事件
        function removeHandler() {
            document.getElementById("myDIV").removeEventListener("mousemove",myFunction);
        }
    </script>
</body>

跨瀏覽器解決方案：

<body>

    <h1>JavaScript addEventListener()</h1>
    
    <p>Internet Explorer 8 及更早版本不支持 addEventListener() 方法。</p>
    
    <p>此例演示了適用於所有瀏覽器的解決方案。</p>
    
    <button id="myBtn">試一試</button>
    
    <script>
    var x = document.getElementById("myBtn");
    if (x.addEventListener) {
      x.addEventListener("click", myFunction);
    } else if (x.attachEvent) {
      x.attachEvent("onclick", myFunction);
    }
    
    function myFunction() {
      alert("Hello World!");
    }
    </script>
    
    </body>

JavaScript學習筆記（DOM 事件、事件監聽器）