JavaScript事件学习小结(二)js事件处理程序

yizhihongxing

以下是“JavaScript事件学习小结(二)js事件处理程序”攻略的详细讲解:

简介

JavaScript中事件处理程序是指在用户与网页交互时由浏览器调用的函数。事件处理程序通常用来响应用户的点击、鼠标移动、键盘输入等行为。

事件处理程序的三种方式

JavaScript中有三种方式定义事件处理程序:

  1. 直接在HTML标签中使用内联事件处理程序;
  2. 在JS脚本中使用dom0级事件处理程序;
  3. 在JS脚本中使用dom2级事件处理程序。

内联事件处理程序

内联事件处理程序是把事件处理程序直接嵌入到HTML元素中的一种方式。示例如下:

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

内联事件处理程序的缺点是不太好维护,且不同浏览器的实现方式不一样。

dom0级事件处理程序

dom0级事件处理程序是在JS脚本中直接给HTML元素添加事件处理程序的一种方式。示例如下:

<script>
    var btn = document.getElementById("myButton");
    btn.onclick = function() {
        alert("Hello World");
    };
</script>
<button id="myButton">Click Me!</button>

dom0级事件处理程序的缺点是只能为一个事件添加一个处理程序,且添加的处理程序会覆盖之前添加的处理程序。

dom2级事件处理程序

dom2级事件处理程序是在JS脚本中通过addEventListener()或attachEvent()方法添加事件处理程序的一种方式。与dom0级事件处理程序不同,使用dom2级事件处理程序可以为同一事件添加多个处理程序,并且可以自由移除处理程序。示例如下:

<script>
    var btn = document.getElementById("myButton");
    btn.addEventListener("click", function() {
        alert("Hello World");
    }, false);
</script>
<button id="myButton">Click Me!</button>

dom2级事件处理程序为同一元素和事件类型添加多个回调函数,每个回调按照添加的顺序依次调用。可以使用removeEventListener()方法移除添加的事件处理程序。

事件对象

事件处理程序会自动传入一个事件对象event,其中包含了许多属性和方法,用来获取事件相关信息。以下是常用的事件对象属性和方法:

  • type: 事件类型
  • target: 引起事件的HTML元素
  • stopPropagation(): 阻止事件冒泡
  • preventDefault(): 阻止默认事件

示例如下:

<script>
    var a = document.getElementById("myLink");

    function handleClick(event) {
        // 取消默认行为
        event.preventDefault();

        // 阻止事件冒泡
        event.stopPropagation();

        alert("You clicked the link " + event.target.href);
    }

    a.addEventListener("click", handleClick, false);
</script>
<a href="http://www.example.com" id="myLink">Click Me!</a>

事件冒泡

事件冒泡指的是事件从触发的元素向上冒泡到父元素的过程。例如,如果点击一个按钮,该事件会先触发按钮上的事件处理程序,然后冒泡到父元素,如所属的表单、div等。如果父元素上定义了相同类型的事件处理程序,它也将被触发。

可以使用stopPropagation()方法来阻止事件冒泡。示例如下:

<div onclick="alert('Clicked DIV')">
  <button onclick="alert('Clicked BUTTON');event.stopPropagation()">Click Me!</button>
</div>

在这个例子中,如果单击按钮,则首先会调用按钮上的事件处理程序,然后停止冒泡,因此无法触发DIV元素上的事件处理程序。

结语

JavaScript事件处理程序是前端开发中常用的技术之一,可以通过多种方式定义和添加事件处理程序,最佳实践是使用dom2级事件处理程序实现事件处理。在事件处理程序中,可以利用事件对象来获取事件发生的相关信息,防止事件冲突,提高用户体验。

希望这篇攻略能帮助你更好地理解JavaScript事件处理程序,如果需要更多的示例可以访问 MDN 进行学习。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JavaScript事件学习小结(二)js事件处理程序 - Python技术站

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

相关文章

  • Javascript中获取出错代码所在文件及行数的代码

    在Javascript代码中,有时候我们需要知道出错的代码所在的文件和行数。这个问题可以通过在代码中添加一些特定的指令来实现。下面是实现此功能的完整攻略: 步骤1: 这个功能需要运行在浏览器环境下。打开浏览器的控制台,找到“Console”面板,在里面输入以下代码: console.log(‘出错了’); throw new Error(‘错误信息’); 这…

    JavaScript 2023年5月28日
    00
  • js特殊字符过滤的示例代码

    JS特殊字符过滤是一种常见的前端技术,其目的是为了防止恶意注入脚本,保护网站安全性。下面,我们将介绍几种常见的JS特殊字符过滤代码。 基于字符编码的过滤 字符编码过滤的基本原理是将所有可能的JS特殊字符进行相应的编码,在输出时将编码重新转换为原有字符。常用的字符编码有HTML的&和”,URL的%20等。 以下是一个简单的示例: function ht…

    JavaScript 2023年6月10日
    00
  • ES6知识点整理之函数数组参数的默认值及其解构应用示例

    ES6知识点整理之函数数组参数的默认值及其解构应用示例 函数参数的默认值 在ES6之前,函数的参数如果没有传入值,则默认为undefined。 function func(a, b) { console.log(a, b); } func(1) //输出:1 undefined 在ES6中,函数的参数可以设置默认值,当没有传入该参数时,将使用设定的默认值。默…

    JavaScript 2023年5月28日
    00
  • Javascript 定时器调用传递参数的方法

    JavaScript 定时器调用传递参数的方法可以使用 setInterval 或 setTimeout 方法,并通过匿名函数或箭头函数传递参数。 使用 setInterval 方法来调用定时器并传递参数: setInterval(function(parameter1, parameter2){ // 执行相关操作 }, delay, parameter1…

    JavaScript 2023年6月11日
    00
  • js设置cookie过期及清除浏览器对应名称的cookie

    如何设置Cookie过期时间 Cookie是用来存储一些数据的,在某些情况下,我们希望对存储的cookie设置过期时间,来更好地实现一些功能。下面是利用JS设置cookie过期时间的方法: 利用JS设置cookie document.cookie = "cookieName=cookieValue;expires=Thu, 18 Dec 2022 …

    JavaScript 2023年6月11日
    00
  • 分享JavaScript监听全部Ajax请求事件的方法

    下面就是关于“分享JavaScript监听全部Ajax请求事件的方法”的完整攻略。 标题 分享JavaScript监听全部Ajax请求事件的方法 正文 在前端开发中,JavaScript监听Ajax请求事件是非常重要的一个功能,常常需要根据请求事件做一些处理,比如显示Loading、禁用表单等等。以下是一种比较简单的方法,既可以使用原生的JavaScript…

    JavaScript 2023年6月11日
    00
  • JS字符串累加Array不一定比字符串累加快(根据电脑配置)

    本文主要探讨 JavaScript 中字符串的拼接方式,包括使用数组累加字符串和直接字符串累加的方法,以及它们的性能比较。同时,本文还会详细介绍具体的测试方法和结果分析。 背景 在 JavaScript 中,字符串是一个常见的数据类型,我们通常会遇到需要拼接字符串的场景,比如将一个数组中的元素用逗号隔开成一个字符串。在这种场景下,我们通常采用以下两种方式: …

    JavaScript 2023年5月28日
    00
  • js+css实现文字散开重组动画特效代码分享

    下面给出“js+css实现文字散开重组动画特效”的完整攻略。 原理说明 该特效的实现需要使用到CSS 的 transform 属性来进行文字的位移、旋转等操作。同时,通过JS 中的事件绑定实现触发动画效果。 首先将文字拆分为单个的字体元素 随后,通过JS 代码将单个的字体元素进行位置、旋转等方面的定义 当触发动画效果时,JS 代码随机分配位置和角度等属性,并…

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