注册事件处理程序

设置 JavaScript 对象属性为事件处理程序：

　　1、注册事件处理程序的最简单方法就是通过设置事件目标的属性为所需事件处理程序函数

　　2、这种事件处理程序注册技术适用于所有浏览器的所有常用事件类型

　　3、事件处理程序属性的缺点是其设计都围绕着假设每个事件目标对于每种事件类型将最多只有一个处理程序

注：事件处理程序是处理或响应事件的函数；事件目标是发生的事件或与之相关的对象；事件类型是一个用来说明发生什么类型事件的字符串

　　事件处理程序属性的名字由 "on" 后面跟事件名组成（区分大小写，且所有都是小写）：onclick、onchange 等

设置 HTML 标签属性为事件处理程序：

　　1、用于设置的文档元素事件处理程序属性也能转换成对应 HTML 标签的属性

　　2、该属性的值为 JavaScript 代码字符串，且是事件处理函数的主体，而非完整的函数声明

　　3、如果 HTML 事件处理程序属性包含多条 JavaScript 语句，要记住必须使用分号分隔这些语句或断开属性值使其跨多行

扫描二维码关注公众号，回复： 5876056 查看本文章

　　4、如果把处理程序放到 <body> 标签上，则浏览器会在 Window 对象上注册它

注：客户端编程的通用风格是保持 HTML 内容和 JavaScript 行为分离，所有我们应该尽量避免使用 HTML 事件处理程序属性

addEventListener()：

　　1、除 IE8 及之前版本外的所有浏览器都支持的标准事件模型中，任何能成为事件目标的对象都定义了 addEventListener() 方法，使用这个方法可以为事件目标注册事件处理程序

　　2、addEventListener(tpye, function, bool)，type 指定事件类型，它应该是不包含前缀 "on" 的字符串；function 指定类型事件发生时应该调用的函数；

　　　 bool 通常为 false，若为 true，则函数将注册为捕获事件处理程序，并在事件不同的调度阶段调用

　　3、可以通过多次调用 addEventListener() 为同一个对象注册同一事件类型的多个处理程序函数，所有该事件类型的注册处理程序都会按注册的顺序调用

　　4、使用相同的参数在同一个对象上多次调用 addEventListener() 是没用的，处理程序仍然只注册一次，同时重复调用也不会改变调用处理程序的顺序

注：通过 removeEventListener() 方法可以删除事件处理程序，它同样有三个参数

attachEvent()：

　　1、IE9 之前的 IE 不支持 addEventListener() 和 removeEventListener()，所有，IE5 及之后的版本定义了类似的方法 attachEvent() 和 detachEvent() 方法

　　2、它们只有两个参数，因为 IE 事件模型不支持事件捕获

　　3、IE 方法的第一个参数使用了带 "on" 前缀的事件处理程序属性名

　　4、允许相同的事件处理程序函数注册多次，当特定的事件类型发生时，注册函数的调用次数和注册次数一样

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Event</title>
    <script>
        // 设置 Window 对象的 onload 属性为一个事件处理程序
        window.onload = function () {
            alert("加载完成");
        }
        function myFunction() {
            let temp = document.getElementById("myP");
            temp.innerText = "Paragraph's content is changed";
        }
    </script>
</head>
<p>
<p id="myP">This is a test paragraph</p>
<!--设置 HTML 标签属性为事件处理程序-->
<p><button onclick="myFunction()">click me to change</button></p>
<p><div id="myDiv" style="width: 100px; height: 100px; background-color: lightpink">Hello Div</div></p>
<p><button id="myButton">click me to change div</button></p>
<script>
    let btn = document.getElementById("myButton");
    // 使用 addEventListener() 来注册处理函数
    let handler = function () {
        let div = document.getElementById("myDiv");
        div.style.textAlign = "center";
        div.style.backgroundColor = "green";
    };
    if (btn.addEventListener)
        btn.addEventListener("click", handler, false);
    else if (btn.attachEvent)
        btn.attachEvent("onclick", handler);
</script>
</body>
</html>

注册事件处理程序

猜你喜欢