JavaScript高级程序设计阅读笔记（十八） js跨平台的事件

2023年5月27日下午11:51 • JavaScript

下面是JavaScript高级程序设计阅读笔记（十八）js跨平台的事件的详细攻略:

1. 事件处理程序

事件是指用户或浏览器自身执行的某种动作。JS可以通过事件处理程序来响应这种动作。

1.1 HTML事件处理程序

HTML事件处理程序是在标签中通过指定事件处理代码的方式来处理事件。

例如在HTML中定义一个按钮：

<button onclick="alert('Hello World!')">Click me!</button>

上述代码中，当单击按钮时，会弹出一个对话框，并显示"Hello World!"。

1.2 DOM0级事件处理程序

DOM0级事件处理程序是在JS中直接为DOM元素指定事件处理函数，这种方式只能处理一个事件处理程序。

例如：

var btn = document.getElementById('myBtn');
btn.onclick = function(){
    alert('Hello World!');
}

上述代码中，定义了一个btn的onclick事件处理程序，当单击按钮时，页面弹出一个对话框并显示“Hello World!”。

1.3 DOM2级事件处理程序

DOM2级事件处理程序是在JS中通过addEventListener()方法添加监听器，可以添加多个事件处理程序。

例如：

var btn = document.getElementById('myBtn');
btn.addEventListener('click', function(){
    alert('Hello World!');
}, false);

上述代码中，通过addEventListener()方法注册click事件处理程序，也可以通过removeEventListener()方法移除监听器。

2. 事件对象

在事件处理程序中，可以通过事件对象来获取与事件相关的信息。

例如：

var btn = document.getElementById('myBtn');
btn.onclick = function(event){
    var target = event.target; // 获取事件目标
    var type = event.type; // 获取事件类型
    var pageX = event.pageX;
    var pageY = event.pageY;
}

上述代码中，定义了一个btn的onclick事件处理程序，并且传入了event参数，用event.target获取事件目标，event.type获取事件类型等。

3. 跨浏览器处理事件

不同浏览器对事件处理可能存在兼容性问题，通过一些技术手段可以跨浏览器处理事件，例如通过一个函数addHandler()来添加处理程序：

function addHandler(element, type, handler){
    if(element.addEventListener){
        element.addEventListener(type, handler, false); // DOM2级事件处理程序
    }else if(element.attachEvent){
        element.attachEvent("on" + type, handler); // IE事件处理程序
    }else{
        element["on" + type] = handler; // DOM0级事件处理程序
    }
}

上述代码中，定义了一个addHandler()方法，可以根据兼容性自动使用不同的方法注册事件处理程序。这样可以保证在不同的浏览器中都能正确处理事件。

示例1

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>事件处理程序示例1</title>
  </head>
  <body>
    <button id="btn">点击</button>
    <script type="text/javascript">
      var btn = document.getElementById('btn');
      addHandler(btn, 'click', function(){
        alert('Hello World!');
      });
      function addHandler(element, type, handler){
        if(element.addEventListener){
            element.addEventListener(type, handler, false); // DOM2级事件处理程序
        }else if(element.attachEvent){
            element.attachEvent("on" + type, handler); // IE事件处理程序
        }else{
            element["on" + type] = handler; // DOM0级事件处理程序
        }
      }
    </script>
  </body>
</html>

上述代码中，定义了一个按钮，在单击按钮时通过addHandler()方法注册click事件处理程序。因为addHandler()方法可以根据兼容性自动使用不同的方法注册事件处理程序，所以可以跨浏览器处理事件。

示例2

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>事件对象示例2</title>
  </head>
  <body>
    <button id="btn">点击</button>
    <script type="text/javascript">
      var btn = document.getElementById('btn');
      btn.onclick = function(event){
        var target = event.target; // 获取事件目标
        var type = event.type; // 获取事件类型
        var pageX = event.pageX;
        var pageY = event.pageY;
        alert('target:' + target + ', type:' + type + ', pageX:' + pageX + ', pageY:' + pageY);
      }
    </script>
  </body>
</html>

上述代码中，定义了一个按钮，在单击按钮时打印事件目标、事件类型、页面X坐标和页面Y坐标等信息。因为在事件处理程序中可以通过事件对象来获取与事件相关的信息，所以可以方便地进行调试和处理事件。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScript高级程序设计阅读笔记（十八） js跨平台的事件 - Python技术站