JavaScript学习笔记之事件处理程序的三种方式

来源：互联网发布：网络摄像头系统编辑：程序博客网时间：2024/05/16 11:59
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <title></title></head><body>    <!-- 事件处理程序共有三种方式： -->    <!-- 1、html事件处理程序：直接添加到html代码中；代码量大的时候，修改不便，不推荐使用。 -->    <button id="btn" onclick="clickDemo()">html事件处理程序</button><br /><br />    <script type="text/javascript">        function clickDemo() {            alert("Html事件处理程序！");        }    </script>    <!-- 2、DOM0级事件处理程序：把一个函数直接赋值给一个html元素的事件属性； -->    <button id="did">DOM0级事件处理程序</button><br /><br />    <script type="text/javascript">        var id = document.getElementById("did");        // 1)、DOM0级事件处理程序的第一种写法：        //id.onclick = function () {          // 此方法需要点击按钮才能触发事件；        //    alert("DOM0级事件处理程序1！");        //}        //id.onclick = function () {          // 当有两个或多个事件时，最后的事件会把前面的事件全部覆盖掉。        //    alert("DOM0级事件处理程序2！");        //}        id.onclick = null;      // 清除按钮点击事件；        // 2)、DOM0级事件处理程序的第二种写法：        //id.onclick = Demo();    // 此方法不需要点击按钮，文档加载成功之后会直接接执行该事件；        id.onclick = Demo;        // 此方法需要点击按钮才能触发事件；        function Demo() {            alert("DOM0级事件处理程序3！");        }    </script>    <!-- 3、DOM2级事件处理程序：使用事件句柄(addEventListener()函数 和 removeEventListener()函数) -->    <button id="dd">DOM2级事件处理程序</button><br /><br />    <script type="text/javascript">        var button = document.getElementById("dd");        button.addEventListener("click", demo1);    // 用addEventListener可以添加多个事件处理程序。        button.addEventListener("click", demo2);        button.addEventListener("click", demo3);        button.removeEventListener("click", demo3); // 移除事件处理程序；        function demo1() {            alert("DOM2级事件处理程序1！");        }        function demo2() {            alert("DOM2级事件处理程序2！");        }        function demo3() {            alert("DOM2级事件处理程序3！");        }    </script>    <!-- 浏览器兼容模式： -->    <button id="ie">浏览器兼容模式</button>    <script type="text/javascript">        var btn = document.getElementById("ie");        if (btn.addEventListener) {                     // 如果支持DOM2级事件处理程序，就用addEventListener；            btn.addEventListener("click", demoTest);  // addEventListener()的事件处理类型是 "click";        } else if (btn.attachEvent) {                   // 如果支持IE事件处理程序，就用attachEvent；            btn.attachEvent("onclick", demoTest);     // attachEvent的事件处理类型是 "onclick";        } else {            btn.onclick = demoTest;                     // 否则就用DOM0级事件处理程序；        }        function demoTest() {            alert("Hello World!");        }    </script></body></html>
0 0