JavaScript的事件监听你了解吗

目录
  • 1. 什么是事件监听？
  • 2. DOM0级事件监听
    • 2.1)常见的页面事件监听
    • 2.2)常见的鼠标事件监听
    • 2.3)常见的键盘事件监听
    • 2.4)常见的表单事件监听
  • 3. DOM2级事件监听
  • 总结

1. 什么是事件监听 ？

事件监听就是计算机对事件进行监听，知道什么时候发生了这个事件，从而执行一些写好的程序。

那么，它的常用方法有哪些呢 ？让我们一起来看看吧 ！

2. DOM0 级事件监听

DOM0 级事件监听：

给元素设置它们的onxxx属性（e.g., onclick）

对于 DOM0 级事件监听 ，它只能监听冒泡阶段

2.1) 常见的页面事件监听

事件名 事件描述
onload 当页面或图像被完成加载
onunload 当用户退出页面

2.2) 常见的鼠标事件监听

事件名 事件描述
onclick 当鼠标单击某个元素
ondblclick 当鼠标双击某个元素
onmousedown 当鼠标按键在某个元素上按下
onmouseup 当鼠标按键在某个元素上松开
onmousemove 当鼠标按键在某个元素上移动
onmouseenter 当鼠标移动到某个元素上
（进入到某个元素区域时）
onmouseleave 当鼠标离开某个元素

其中onmouseenter与onmouseover类似，onmouseleave与onmouseout类似；

它们两者的区别：onmouseenter与onmouseleave事件不支持冒泡，另外两个支持事件冒泡；

所以，onmouseenter与onmouseleave搭配使用，onmouseover与onmouseout搭配使用

2.3) 常见的键盘事件监听

事件名 事件描述
onkeypress 当键盘上的某个按键被按下
（系统按键无法识别 e.g.，F1 这类的按键）
onkeydown 当键盘上的某个按键被按下
（系统按键可以识别，并且先于onkeypress发生）
onkeyup 当键盘上的某个按键被松开

2.4) 常见的表单事件监听

事件名 事件描述
oninput 当用于正在修改表单域的内容
onchange 当用户改变了表单域的内容
onfocus 当元素获得焦点
（e.g.，tab键或鼠标点击）
onblur 当元素失去焦点
onsubmit 当表单被提交
onreset 当表单被重置

3. DOM2 级事件监听

DOM2 级事件监听：

EventTarget.addEventListener()方法将指定的监听器注册到EventTarget上，当该对象触发指定的事件时，指定的回调函数就会被执行。

它有着几种写法，想了解别的写法可以看看 MDN 官方文档，这里介绍的写法如下：

  • type：表示监听事件类型的字符串
  • listener：事件监听函数
  • useCapture：当写true时，进行的是事件捕获阶段，默认为false，事件冒泡阶段
EventTarget.addEventListener(type, listener, useCapture);

对于常用的type：即把常用的 DOM0 级的onxxx的on去掉后就可以了，即原来的事件名。

例如：

target.addEventListener('click', () => {
	console.log("我被点击了");
});
// 这里第三个参数没写，默认监听冒泡阶段，如果要监听捕获阶段，写上 true

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!

赞 (0)

相关推荐

  • js监听html页面的上下滚动事件方法

    最近在一个项目中,在写前端页面的时候,想像以前做Android时在页面时刻监听上下滚动的事件,查找资料发现由鼠标或类似用户动作触发的事件有以下图示: 不多说了,直接上代码了,经过测试可以使用: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Dome</title> <script type="text/javascript

  • JavaScript监听触摸事件代码实例

    这篇文章主要介绍了JavaScript监听触摸事件代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 监听 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, use

  • JS监听事件的叠加和移除功能

    html DOM元素有很多on开头的监听事件,如onload.onclick等,见DOM事件列表.但是同一种事件,后面注册的会覆盖前面的: window.onresize = function(){ alert(1); } window.onresize = function(){ alert(2); } // 改变窗口大小时,只会弹出2 addEventListener监听 利用addEventListener添加监听事件,可以重复添加,并不会互相覆盖: window.addEventList

  • javascript事件监听与事件委托实例详解

    本文实例讲述了javascript事件监听与事件委托.分享给大家供大家参考,具体如下: 事件监听与事件委托 在js中,常用到element.addEventListener()来进行事件的监听.但是当页面中存在大量需要绑定事件的元素时,这种方式可能会带来性能影响.此时,我们可以用事件委托的方式来进行事件的监听. 每个事件都经历三个阶段 捕获 到达目标 冒泡 事件委托需要用到事件的冒泡,冒泡就是事件发生时,上层会一层一层的接收这个事件. 如下页面结构: <body> <div id=&qu

  • JavaScript监听键盘事件代码实现

    在写网页的时候,常常需要监听键盘事件,让我们来看看如何实现吧. 监听方式 键盘事件往往是全局监听,设监听的函数为keyboard(). keyup事件类型.该类型触发条件为按键按下去并松开. //长按并松开只触发一次 document.addEventListener('keyup', keyboard); document.onkeyup = keyboard; //记得不要加括号! keydown事件类型.该类型触发条件为按键按下去. //长按可以触发多次 document.addEvent

  • JavaScript的事件监听你了解吗

    目录 1. 什么是事件监听? 2. DOM0级事件监听 2.1)常见的页面事件监听 2.2)常见的鼠标事件监听 2.3)常见的键盘事件监听 2.4)常见的表单事件监听 3. DOM2级事件监听 总结 1. 什么是事件监听 ? 事件监听就是计算机对事件进行监听,知道什么时候发生了这个事件,从而执行一些写好的程序. 那么,它的常用方法有哪些呢 ?让我们一起来看看吧 ! 2. DOM0 级事件监听 DOM0 级事件监听: 给元素设置它们的onxxx属性(e.g., onclick) 对于 DOM0 级

  • JavaScript绑定事件监听函数的通用方法

    事件绑定的3中常用方法:传统绑定.W3C绑定方法.IE绑定方法.但是,在实际开发中对于我们来讲重要的是需要一个通用的.跨浏览器的绑定方法.如果我们在互联网上搜索一下会发现许多方法,以下是比较知名的几种方法: 在开始学期下面几种方法之前,应当讨论一下,一个好的addEvent()方法应当达到哪些要求: a.支持同一元素的同一事件句柄可以绑定多个监听函数: b.如果在同一元素的同一事件句柄上多次注册同一函数,那么第一次注册后的所有注册都被忽略: c.函数体内的this指向的应当是正在处理事件的节点(

  • javascript在事件监听方面的兼容性小结

    1,IE使用attachEvent/detachEvent方法来添加和删除事件监听器:w3c使用addEventListener/removeEventListener方法. 2,IE对其事件使用onevent的命名方式,而w3c的是event的命名方式. 3,IE事件监听器内使用的是一个全局的Event对象,而w3c是将event对象作为参数传递给监听器. 4,为了避免触发默认的事件行为,IE的做法是要求程序员设置Event对象中的returnValue属性值为false,而w3c的做法是执行

  • 分享jQuery3种常见事件监听方式

    目录 1.HTML标签内联事件 2.用JavaScript实现事件监听 3.用jQuery实现事件监听 前言: 在 Web 页面经常会有各种事件发生,事件发生后需要进行一些特定处理,即执行特定的函数或者语句.这就需要对事件进行监听,监听事件的常见方式有以下三种,本文将通过实例来具体介绍. 1.HTML标签内联事件 实例1:单击页面 "Hello" 按钮,弹出提示框显示 Hello world! <!doctype html> <html> <head>

  • 分享jQuery的3种常见事件监听方式

    目录 1.HTML标签内联事件 2.用JavaScript实现事件监听 3.用jQuery实现事件监听 前言: 在 Web 页面经常会有各种事件发生,事件发生后需要进行一些特定处理,即执行特定的函数或者语句.这就需要对事件进行监听,监听事件的常见方式有以下三种,本文将通过实例来具体介绍. 1.HTML标签内联事件 实例1:单击页面 "Hello" 按钮,弹出提示框显示 Hello world! <!doctype html> <html> <head>

  • JavaScript使用addEventListener添加事件监听用法实例

    本文实例讲述了JavaScript使用addEventListener添加事件监听用法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html lang="en"> <head> <title>This text is the title of the document</title> <script> function showalert(){ alert('you clicked

  • JavaScript 事件监听实例代码[兼容IE,firefox] 含注释

    JavaScript事件监听完整实例(含注释) var oEventUtil = new Object(); oEventUtil.AddEventHandler = function(oTarget,sEventType,fnHandler) { //IE和FF的兼容性处理 //如果是FF if(oTarget.addEventListener){ oTarget.addEventListener(sEventType,fnHandler,false); } //如果是IE else if(o

  • javascript 组合按键事件监听实现代码

    javascript 组合按键事件监听实现代码 JS组合按键事件监听,支持同时监听多组按键如{a,b,c,}{ctrl,c}. 实例代码: <script type="text/javascript"> (function(){ /** *dqKeys v1.0.0 | (c) 2016 www.findme.wang *@params json keys 监听的按键 *@params bool isOrder 按键是否有相应的顺序 *@params Function su

  • JavaScript给事件委托批量添加事件监听详细流程

    JavaScript给事件委托批量添加事件监听详细流程

    1.什么是事件委托 事件委托:利用事件冒泡的特性,将本应该注册在子元素上的处理事件注册在父元素上,这样点击子元素时发现其本身没有相应事件就到父元素上寻找作出相应.这样做的优势有: 减少DOM操作,提高性能. 随时可以添加子元素,添加的子元素会自动有相应的处理事件. 2.事件委托的原理 事件委托是利用事件的冒泡原理来实现的,何为事件冒泡呢?就是事件从最深的节点开始,然后逐步向上传播事件. 举个例子:页面上有这么一个节点树,div>ul>li>a;比如给最里面的a加一个click点击事件,那

随机推荐