JS中的事件处理程序

柔情只为你懂 2022-03-20 06:18 348阅读 0赞

什么是事件和事件处理程序？

事件就是用户或浏览器执行的某些动作，诸如click，load，mouseover等，都是事件的名字，而响应某个事件的函数就是事件处理程序，事件处理程序的名字是在事件的名字前面加上“on”。例如：onclick是click事件的事件处理程序，onload是load事件的事件处理程序。总共有4种事件处理程序，介绍如下：

HTML事件处理程序：

  1. 写法一：<input type="button" value="Click me" οnclick="alert('clicked')">
  3. 写法二：
  4. <script>
  5.  function showMessage(){
  6.      alert("clicked");
  7.  }
  8. </script>
  9.  <input type="button" value="Click me" οnclick="showMessage()">

还有好几种HTML事件处理程序的写法，由于HTML事件处理程序会使HTML代码和JS代码紧密耦合，而且HTML事件处理程序中的作用域链在不同浏览器中会有不同结果，所以一般不采用HTML来指定事件处理程序，详细内容参考红宝书P348。

DOM0级事件处理程序：

（1）添加事件处理程序：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>DOM0级事件处理程序</title>
  6. </head>
  7. <script>
  8. window.onload = function(){
  9.    var btn = document.getElementById("btn");
  10.    btn.onclick = function () {
  11.        alert(this.id);//"btn"
  12.    }
  13. }
  14. </script>
  15. <body>
  16. <div id="box">
  17.     <input type="button" value="Click me" id="btn">
  18. </div>
  19. </body>
  20. </html>

<1>DOM0级事件处理程序被认为是元素的方法，事件处理程序在元素的作用域中执行，程序中的this引用的是当前元素btn。

<2>以这种方式添加的事件处理程序会在事件流的冒泡阶段处理。

<3>缺点：不能添加多个事件处理程序。下面程序只会显示“hello world”。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>DOM0级事件处理程序</title>
  6. </head>
  7. <script>
  8.     window.onload = function () {
  9.         var btn = document.getElementById("btn");
  11.         btn.onclick = function () {
  12.             alert(this.id);
  13.         };
  14.         btn.onclick = function () {
  15.             alert("hello world");
  16.         }
  17.     }
  19. </script>
  20. <body>
  21. <div id="box">
  22.     <input type="button" value="Click me" id="btn">
  23. </div>
  24. </body>
  25. </html>

(2) 删除事件处理程序：

  1.       btn.onclick = null;

DOM2级事件处理程序：

（1）添加事件处理程序：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>DOM2级事件处理程序</title>
  6. </head>
  7. <script>
  8.     window.onload = function () {
  9.         var btn = document.getElementById("btn");
  10.         btn.addEventListener("click",function () {
  11.             alert(this.id)//"btn"
  12.         },false)
  13.     }
  15. </script>
  16. <body>
  17. <div id="box">
  18.     <input type="button" value="Click me" id="btn">
  19. </div>
  20. </body>
  21. </html>

<1>addEventListener()接收三个参数：事件名称，事件处理程序的函数，布尔值（如果是true，表示在捕获阶段调用事件处理程序，如果是false，表示在冒泡阶段调用事件处理程序）。

<2>事件处理程序在元素的作用域中执行，程序中的this引用的是当前元素btn。

<3>以这种方式添加的事件处理程序会在事件流的冒泡阶段处理。

<4>优点：可以添加多个事件处理程序。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>DOM2级事件处理程序</title>
  6. </head>
  7. <script>
  8.     window.onload = function () {
  9.         var btn = document.getElementById("btn");
  10.         btn.addEventListener("click",function () {
  11.             alert(this.id)//"btn"
  12.         },false);
  13.         btn.addEventListener("click",function () {
  14.             alert("Hello World");
  15.         },false)
  16.     }
  18. </script>
  19. <body>
  20. <div id="box">
  21.     <input type="button" value="Click me" id="btn">
  22. </div>
  23. </body>
  24. </html>

（2）删除事件处理程序：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>DOM2级事件处理程序</title>
  6. </head>
  7. <script>
  8.     window.onload = function () {
  9.         var btn = document.getElementById("btn");
  10.         var handler = function(){
  11.             alert(this.id);
  12.         };
  13.         btn.addEventListener("click",handler,false);
  14.         btn.removeEventListener("click",handler,false);
  15.     }
  16. </script>
  17. <body>
  18. <div id="box">
  19.     <input type="button" value="Click me" id="btn">
  20. </div>
  21. </body>
  22. </html>

IE的事件处理程序：

（1）添加事件处理程序：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>IE事件处理程序</title>
  6. </head>
  7. <script>
  8.     window.onload = function () {
  9.         var btn = document.getElementById("btn");
  10.         btn.attachEvent("onclick",function () {
  11.             alert(this.id);//window
  12.         })
  13.     }
  14. </script>
  15. <body>
  16. <div id="box">
  17.     <input type="button" value="Click me" id="btn">
  18. </div>
  19. </body>
  20. </html>

<1>:attachEvent()：接收2个参数：事件名称，事件处理程序的函数。

<2>:事件处理程序被添加到事件流的冒泡阶段。

<3>事件处理程序在全局作用域中运行，程序中的this指向window。

<4>优点：为一个元素添加多个事件处理程序。要注意的是这些事件处理程序会以添加顺序相反的顺序被触发。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>IE事件处理程序</title>
  6. </head>
  7. <script>
  8.     window.onload = function () {
  9.         var btn = document.getElementById("btn");
  10.         btn.attachEvent("onclick",function () {
  11.             alert(this.id);//window
  12.         });//后触发
  13.         btn.attachEvent("onclick",function () {
  14.             alert("hello world");
  15.         })//先触发
  16.     }
  17. </script>
  18. <body>
  19. <div id="box">
  20.     <input type="button" value="Click me" id="btn">
  21. </div>
  22. </body>
  23. </html>

（2）删除事件处理程序：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>IE事件处理程序</title>
  6. </head>
  7. <script>
  8.     window.onload = function () {
  9.         var btn = document.getElementById("btn");
  10.         var handler = function(){
  11.             alert(this.id);
  12.         };
  13.         btn.attachEvent("onclick",handler);
  14.         btn.detachEvent("onclick",handler);
  15.     }
  16. </script>
  17. <body>
  18. <div id="box">
  19.     <input type="button" value="Click me" id="btn">
  20. </div>
  21. </body>
  22. </html>

跨浏览器的事件处理程序：

（1）添加事件处理程序：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>IE事件处理程序</title>
  6. </head>
  7. <script>
  8.     window.onload = function () {
  9.         var EventUtil = {
  10.             addHandler:function (element,type,handler) {
  11.                 if(element.addEventListener){//DOM2
  12.                     element.addEventListener(type,handler,false);
  13.                 }else if(element.attachEvent){//IE
  14.                     element.attachEvent("on" + type,handler);
  15.                 }else{//DOM0
  16.                     element["on" + type] = handler;
  17.                 }
  18.             },
  19.             removeHandler:function (element,type,handler) {
  20.                 if(element.removeEventListener){//DOM2
  21.                     element.removeEventListener(type,handler,false);
  22.                 }else if(element.detachEvent){//IE
  23.                     element.detachEvent("on" + type,handler);
  24.                 }else{//DOM0
  25.                     element["on" + type] = null;
  26.                 }
  27.             }
  28.         };
  29.         var btn = document.getElementById("btn");
  30.         var handler = function () {
  31.             alert(this.id);
  32.         };
  33.         EventUtil.addHandler(btn,"click",handler);
  35.     }
  36. </script>
  37. <body>
  38. <div id="box">
  39.     <input type="button" value="Click me" id="btn">
  40. </div>
  41. </body>
  42. </html>

<1>addHandler():视情况分别使用DOM0级方法，DOM2级方法，IE方法来添加事件，这个方法属于EventUtil对象，接收3个参数：要操作的元素，事件名称，事件处理程序函数。

（2）删除事件处理程序：

  1. EventUtil.removeHandler(btn,"click",handler);

发表评论

表情：
评论列表 （有 0 条评论，348人围观）

还没有评论，来说两句吧...

相关阅读

    相关 JS-事件处理程序

    事件处理程序 在`DOM`中定义了一些事件， 而响应某个事件的函数就叫事件处理程序（或事件侦听器）。事件处理程序的名字一般以“on”开头，例如：`onclick`等

    ゝ一世哀愁。ゝ一世哀愁。/ 0 赞/ 256 阅读

    相关 JS中的事件处理程序

    什么是事件和事件处理程序？ 事件就是用户或浏览器执行的某些动作，诸如click，load，mouseover等，都是事件的名字，而响应某个事件的函数就是事件处理程序，事件

    柔情只为你懂柔情只为你懂/ 0 赞/ 349 阅读