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

下面是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技术站

(0)
上一篇 2023年5月27日
下一篇 2023年5月27日

相关文章

  • JavaScript函数式编程示例分析

    让我们来讲解“JavaScript函数式编程示例分析”的完整攻略。 什么是函数式编程 函数式编程是一种编程范式,它强调将计算看作数学函数的组合。它着重于函数的运算而不是程序的执行顺序,避免了副作用,对于共享状态和可变数据的处理会更加谨慎。 JavaScript是一种支持函数式编程的编程语言。JavaScript中的函数既可以作为一般函数调用,也可以作为变量进…

    JavaScript 2023年5月27日
    00
  • 浅谈ECMAScript 中的Array类型

    下面我来详细讲解一下“浅谈 ECMAScript 中的 Array 类型”。 什么是 Array 类型 在 ECMAScript 中,Array 类型是一种特殊的对象,用于表示一组数据的集合。数组中的数据可以是任意类型的,包括数字、字符串、布尔值、对象等等。 数组中的数据是按照顺序保存的,每一个数据都有一个对应的索引值,从0开始递增。我们可以通过索引值来访问…

    JavaScript 2023年5月27日
    00
  • 一文详解JavaScript中的replace()函数

    当我们需要对字符串中的某个子串进行替换时,JavaScript中的 replace() 函数是一个非常有用的工具。本文将详细讲解该函数的基本语法、常用选项以及一些实际的应用示例。 基本语法 replace() 函数的基本语法如下: string.replace(regexp|substr, newSubstr|function) 其中,string 是原始字…

    JavaScript 2023年5月28日
    00
  • JS中FileReader类实现文件上传及时预览功能

    下面是详细的讲解: JS中FileReader类实现文件上传及时预览功能 1. FileReader类介绍 FileReader是HTML5中提供的一个用来读取文件的类,可以通过它将本地的文件读取到内存中。可用于文件上传前的文件预览功能。 FileReader类有以下2个主要方法: readAsDataURL(file):将读取到的文件转换成base64编码…

    JavaScript 2023年5月27日
    00
  • 正则表达式练习器

    正则表达式练习器是一款可以帮助用户练习正则表达式基础知识和技能的在线工具。下面是针对这款工具的完整攻略: 注册和登录 访问正则表达式练习器的网站,点击浏览器页面上方的“注册”按钮,填写注册表单并提交。用户名和密码必须至少包含一个数字和一个大写字母,密码长度至少为8个字符。注册成功后,你可以使用注册的用户名和密码进行登录。 访问正则表达式练习器的网站,点击浏览…

    JavaScript 2023年6月11日
    00
  • JavaScript快速入门(二)

    文件中引入JavaScript 嵌入到HTML文件中 在body或者head中添加script标签 <script> var age = 10; console.log(age); </script> 引入js文件 创建一个js文件 var age = 20; console.log(age); 在html文件中src引入改文件 &l…

    JavaScript 2023年4月18日
    00
  • js对象实例详解(JavaScript对象深度剖析,深度理解js对象)

    JavaScript对象实例详解 在JS中,对象是一组无序的属性和值的集合。对象可以由对象字面量语法、构造函数语法以及Object.create等方法创建。在本文中,我们将深入剖析JS对象的原理和使用方法,为JS开发者打造最全面的对象实例攻略。 1. 理解对象属性 属性种类 对象的属性包括了数据属性和访问器属性两种。 数据属性包括以下四个特性: value:…

    JavaScript 2023年5月27日
    00
  • Area 区域实现post提交数据的js写法

    Area 区域是HTML表单元素的一种。它允许在一个可编辑的区域内输入文本或代码。使用JavaScript,我们可以使用它来实现提交数据的功能,这些数据可以使用POST方法发送到服务器。 以下是实现Area 区域Post提交数据的基本步骤: 创建一个表单元素,其中包含一个Area 区域,指定一个ID用于JavaScript操作。 <form> &…

    JavaScript 2023年6月11日
    00
合作推广
合作推广
分享本页
返回顶部