DOM EventListener

Posted 2021-02-03 forever77

向元素添加事件句柄的语法：element.addEventListener(event, function, useCapture);

第一个参数是事件的类型，如click或者mousedown，注意前面都没有on

第二个是事件触发后调用的函数

第三个参数为布尔值，可选，默认值为false，即冒泡传递

例如

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

<button id="myBtn">点我</button>
<script>
    document.getElementById("myBtn").addEventListener("click", myFunction);
    function myFunction() {alert ("Hello World!");}
</script>

上述第一种情况时直接写明函数与内容，第二种情况是通过函数名调用函数，这两种情况是等价的，并且与直接给元素添加事件是等价的。

注意，直接给元素添加事件时，是通过‘函数名()‘指明事件的，函数名后面有括号，并且整体通过‘‘引用，而添加事件句柄时，直接通过函数名引用，没有括号也没有引号。

<button id="myBtn" onclick=‘myFunction()‘>点我</button>
<script>
    function myFunction() {alert ("Hello World!");}
</script>