DOM-EventListener(事件監聽者)、新增事件處理程序

Posted on Edited on In Views: Disqus:

 

一、addEventListener

語法為 addEventListener(event, function);

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
</head>
<body>
    <h1 id="myH1">Click on this text!</h1>

    <script>
        document.getElementById("myH1").addEventListener("click", changeText);

        function changeText() {
            document.getElementById("myH1").innerHTML = "Ooops!";
        }
    </script>
</body>
</html>

說明：

1、addEventListener可以把事件附加在指定的元素上。

2、addEventListener並不會將原本存在的事件給覆寫掉。

3、一個元素可以經由addEventListener方法來重復附加多個事件(包括相同事件)上去。

4、除了document object之外，windows object也可以附加事件上去。

5、注意，「addEventListener("click", changeText);」click字串前不加「on」、

changeText字串後面不加括號「()」。

6、具名方法可以加上event object參數，讓程式可以去操作event object，

範例如下，注意，event object參數名可以隨意取，不一定要是「e」

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
</head>
<body>
    <h1 id="myH1">Click on this text!</h1>

    <script>
        document.getElementById("myH1").addEventListener("click", changeText);

        function changeText(e) {
            document.getElementById("myH1").innerHTML = "Ooops!";
        }
    </script>
</body>
</html>

7、還有另一種為匿名方法的寫法

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
</head>
<body>
    <h1 id="myH1">Click on this text!</h1>
    <script>
        document.getElementById("myH1").addEventListener("click", function (e) {
            document.getElementById("myH1").innerHTML = "Ooops!";
        });
    </script>
</body>
</html>

 

二、event propagation

addEventListener還有另一種多載方法

語法為 addEventListener(event, function, useCapture);

boolean值的useCapture參數其用來決定重疊的元素與元素之間的事件傳播順序，

預設值為false(bubbling)。

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            background-color: coral;
            border: 1px solid;
            padding: 50px;
        }

            div > p {
                border: 1px solid red;
            }
    </style>
</head>
<body>
    <p>This example demonstrates the difference between bubbling and capturing when adding event listeners.</p>

    <div id="myDiv">
        <p id="myP">Click this paragraph, I am Bubbling.</p>
    </div><br>

    <div id="myDiv2">
        <p id="myP2">Click this paragraph, I am Capturing.</p>
    </div>

    <script>
        document.getElementById("myDiv").addEventListener("click", function () {
            alert("You clicked the DIV element!");
        }, true);

        document.getElementById("myP").addEventListener("click", function () {
            alert("You clicked the P element!");
        });

        document.getElementById("myDiv2").addEventListener("click", function () {
            alert("You clicked the DIV element!");
        }, false);

        document.getElementById("myP2").addEventListener("click", function () {
            alert("You clicked the P element!");
        });
    </script>
</body>
</html>

當useCapture參數為true(capturing)時，則表示元素外層事件先處理，

然後再處理本身內部事件；

當useCapture參數為false(bubbling)時，則表示元素本身內層事件先處理，

然後再處理元素外層事件。

 

三、removeEventListener

removeEventListener方法只能用來移除addEventListener方法。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
</head>
<body>
    <h1 id="myH1">mousemove on this range!</h1>

    <button id="myBtn" onclick="removeHandler()">removeEventListener</button>
    <script>
        document.getElementById("myH1").addEventListener("mousemove", changeText);

        function changeText() {
            document.getElementById("myH1").innerHTML = Math.random();
        }

        function removeHandler() {
            document.getElementById("myH1").removeEventListener("mousemove", changeText);
        }
    </script>
</body>
</html>

 

四、新增事件處理程序

除了新增事件監聽者之外，還有另一種類事件處理方式，那就是「新增事件處理程序」。

有四種新增方式

1、

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
</head>
<body>
    <h1 onclick="this.innerHTML='Ooops!'">Click on this text!</h1>
</body>
</html>

 

2、

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
</head>
<body>
    <h1 onclick="changeText(this)">Click on this text!</h1>

    <script>
        function changeText(id) {
            id.innerHTML = "Ooops!";
        }
    </script>
</body>
</html>

 

3、

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
</head>
<body>
    <h1 id="myH1" onclick="changeText()">Click on this text!</h1>

    <script>
        function changeText() {
            document.getElementById("myH1").innerHTML = "Ooops!";
        }
    </script>
</body>
</html>

 

4、

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
</head>
<body>
    <h1 id="myH1">Click on this text!</h1>

    <script>
        document.getElementById("myH1").onclick = changeText;

        function changeText() {
            document.getElementById("myH1").innerHTML = "Ooops!";
        }
    </script>
</body>
</html>

不止onclick事件，onload、onchange等，只要是事件都可以添加。