首页 > 其他分享 >JS中的事件监听

JS中的事件监听

时间:2023-05-30 09:57:14浏览次数:32  
标签:元素 JS 处理程序 事件 监听器 按钮 监听

JavaScript的事件监听是一种机制,用于在HTML文档中的元素上注册事件处理程序,以便在特定事件发生时执行相应的JavaScript代码。

事件监听的基本思想是将事件处理程序(也称为事件回调函数)绑定到特定的事件上。所谓特定的事件是当用户与页面进行交互时,比如点击按钮、键盘输入、鼠标移动等,浏览器会生成的相应事件。当该事件发生时,浏览器会调用相应的事件处理程序来执行特定的操作。



以下是一个简单的示例,展示如何在JavaScript中实现事件监听:

// 获取按钮元素
var myButton = document.getElementById("myButton");

// 添加事件监听器
myButton.addEventListener("click", function() {
  console.log("按钮被点击了!");
});

在上述示例中,我们首先通过 getElementById 方法获取具有"id"为"myButton"的按钮元素。然后,使用 addEventListener 方法为该按钮添加了一个点击事件监听器。当按钮被点击时,事件处理程序中的代码将被执行,输出"按钮被点击了!"到控制台。




除了基本的事件监听外,还有一些相关概念:

1. 事件传播 :事件传播是指当一个事件在DOM树中的元素上触发时,它会在元素之间按照特定的路径进行传播。事件传播分为三个阶段,其中的捕获阶段和冒泡阶段,可以通过在 addEventListener 方法的第三个参数中设置 true 或 false 来控制事件是在捕获阶段还是冒泡阶段进行处理,默认是在冒泡阶段处理。还有一个目标阶段,即事件传播到其事件目标。
2. 事件对象 :当事件发生时,浏览器会创建一个事件对象,其中包含有关事件的信息和属性。事件对象可以通过事件处理程序的参数传递给事件处理函数,可以使用事件对象来获取有关事件的详细信息,例如事件类型、目标元素、键盘按键等。
3. 事件委托 :事件委托是一种常用的技术,用于处理动态生成的元素或大量相似元素的事件监听。它通过将事件监听器绑定到它们共同的父元素上,利用事件传播机制,在父元素上捕获事件并根据目标元素的属性来执行相应的操作。这样可以减少事件监听器的数量,提高性能和代码的可维护性。
4. 移除事件监听器 :除了添加事件监听器,还可以通过 removeEventListener 方法来移除已注册的事件监听器。需要确保移除的事件监听器与添加时的事件类型、回调函数和使用的阶段相匹配。

 



还有一些其他的方面和注意事项:

1. 事件类型 :JavaScript支持多种事件类型,包括鼠标事件(如点击、移动、滚动等)、键盘事件(如按键、释放、输入等)、表单事件(如提交、输入变化等)、页面生命周期事件(如加载、卸载等)等。可以根据需要选择适合的事件类型进行监听。
2. 多个事件监听器 :我们可以为同一个元素的同一个事件类型添加多个事件监听器。它们会按照添加的顺序执行。这可以用于实现多个不同的处理逻辑或模块之间的解耦。
3. 事件处理程序中的this :在事件处理程序中,关键字 this 引用触发事件的元素。可以使用 this 来操作和访问事件目标的属性和方法。注意,在箭头函数中, this 的上下文与常规函数不同。
4. 阻止事件默认行为 :某些事件具有默认的行为,例如点击链接将导航到URL,提交表单将刷新页面等。可以使用 event.preventDefault() 方法来阻止事件的默认行为。这对于自定义处理用户交互非常有用。
5. 停止事件传播 :在事件传播过程中,事件会沿着DOM树进行传播,从而影响到多个元素。可以使用 event.stopPropagation() 方法停止事件继续传播,阻止其他元素上的事件监听器被触发。

 



通过事件监听,可以实现与用户交互相关的动态行为和响应,为网页或应用程序增加交互性和实时性。

标签:元素,JS,处理程序,事件,监听器,按钮,监听
From: https://www.cnblogs.com/ronaldo9ph/p/17442392.html

相关文章

  • Nodejs版本控制
    Nodejs版本控制NVM全称node.jsversionmanagement,专门针对node版本进行管理的工具,通过它可以安装和切换不同版本的node.js下载地址:https://github.com/coreybutler/nvm-windows下载之后安装的时候注意不能有中文名字中文路径以及空格可以显示当前的node版本nvmlist......
  • JS判断视频Video的播放、暂停、结束完成及获取长度事件监听处理
    在日常应用场景中,可能会遇到这么一个情况,需要判断用户是否完整的观看完了一部视频,在这个场景中,和视频相关的事件大体涉及到几个部分,获取视频长度,视频开始播放,暂停播放和播放结束,下面来看下如何通过JavaScript来监听获取视频的这几种状态。(1)html页面视频标签大体如下<videoid="v......
  • 读<Wireshark数据包分析实战-第3版>之监听网络线路
    目录混杂模式在集线器链接的网络中嗅探在交换式网路中嗅探混杂模式混杂模式(PromiscuousMode)是指网络设备接口的一种特殊工作模式。当网络接口处于混杂模式下,它可以捕获经过该接口的所有数据包,而不仅仅是发送给自己的数据包。这意味着,无论是单播、广播还是组播数据包,只要通过该......
  • 统计同名数据基于html js
    #1.教程1将数据逐行复制到excell2.新建txt文件,将excell中的全部数据复制到txt文件中3.使用edge打开统计同名数据.html,右击网页打开控制台4.选择txt文件,确认,会在控制台展示结果点击#2.数据示例可以有空格,回车,形式为:名称数量```DN150球铁平插 9DN150*90°球铁双平弯头 1......
  • [NextJS] getStaticProps
    Continue... Ref: Next.js产品级的React框架-中文开发入门教学-编写静态页面属性getStaticProps  为了爬虫,所以这么写。importHeadfrom'next/head'exportdefaultfunctionHome(props){const{datalist}=props;return(<div>......
  • Vue横向滚动条拖动事件
    <template><divclass="scroll-container"ref="scrollContainer"v-on:mousedown="handleMouseDown"v-on:mousemove="handleMouseMove"v-on:mouseup="handleMouseUp"><div......
  • WPF事件(事件&路由事件)
    本篇文章学习于:刘铁猛老师《深入浅出WPF》WPF的树型结构路由(Route)一词的大意是这样:起点与终点间有若干个中转站,从起点出发后经过每个甲转站时要做出选择,最终以正确(比如最短或者最快)的路径到达终点。WPF把这种直接消息模型升级为可传递的消息模型——前面我们已经知道WPF......
  • js-01_数组
    数组的常用方法数组常用方法之pushpush是用来在数组的末尾追加一个元素vararr=[1,2,3]//使用push方法追加一个元素在末尾arr.push(4)console.log(arr)//[1,2,3,4]数组常用方法之poppop是用来删除数组末尾的一个元素vararr=[1,2,3]//使......
  • can't not find Node.js binary ''path",make sure Node.js is installed and in your
    vscode中node执行debug报错报错信息如下 思路1:检查node是否安装成功win+R输入cmd  能够正常显示版本号,则证明没有问题,接着换个思路 思路2:根据提示打开图示的'launch.json'文件,在页面补充 runtimeExecutable具体补充什么内容呢?在overflow中找到了nginx中需要补......
  • Echarts 阴影点击事件获得当前柱状图的索引值方法
    Echarts阴影点击事件获得当前柱状图的索引值方法//什么在option外面的变量varclickIndex;option={//配置信息tooltip:{//提示框//提示触发类型:不触发trigger:'none',},//formatter回调函数,formatter:val=>{......