事件监听Event listener

已于 2023-02-15 13:43:38 修改
阅读量1.6k 收藏 1
点赞数
文章标签： javascript
于 2022-03-08 15:35:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chonger_feifei/article/details/123355120
版权

指使计算机能随时发现事件的发生

设置事件监听

DOM0级事件监听-只能监听冒泡

oBox. onxxx=function(){
}；

DOM2级事件监听-捕获&冒泡皆可监听

// 事件名click不加on
oBox.addEventListener('click', function () {
}, true);

其中，true监听捕获阶段；false监听冒泡阶段
IE6~8 不支持 addEventListener

事件监听类型

鼠标事件监听

事件名事件描述
onclick当鼠标单击某个对象
ondblclick当鼠标双击某个对象
onmousedown当某个鼠标按键在某个对象上被按下
onmouseup当某个鼠标按键在某个对象上被松开
onmousemove当某个鼠标按键在某个对象上被移动
onmouseenter当鼠标进入某个对象（相似事件onmouseover）
onmouseleave当鼠标离开某个对象（相似事件onmouseout）
<style>
	.box {
	    width: 200px;
	    height: 200px;
	    background-color: red;
	}
</style>

<body>
	<div class='box' id="box"></div>
	<script>
		var oBox = document.getElementById('box');
		oBox.onclick = function () {
		    alert('你好，我是点击事件函数');
		}
	</script>
</body>

键盘事件监听

事件名事件描述
onkeypress当某个键盘的键被按下（系统按钮如箭头键和功能键无法得到识别）
onkeydown当某个键盘的键被按下（系统按钮可以识别，并且会先于onkeypress发生）
onkeyup当某个键盘的键被松开

案例- 按键移动盒子

<div id="box"></div>
    <script>
        var oBox = document.getElementById('box');
        // t表示盒子的top属性值
        // l表示盒子的left属性值
        var t = 200;
        var l = 200;
        document.onkeydown = function (e) {
            switch (e.keyCode) {
                case 37:
                    l -= 3;
                    break;
                case 38:
                    t -= 3;
                    break;
                case 39:
                    l += 3;
                    break;
                case 40:
                    t += 3;
                    break;
            }
            oBox.style.top = t + 'px';
            oBox.style.left = l + 'px';
        }
    </script>

表单事件监听

事件名事件描述
onchange当用户改变域的内容
onfocus当某元素获得焦点（比如tab键或鼠标点击）
onblur当某元素失去焦点
onsubmit当表单被提交
onreset当表单被重置
<body>
 <form id='myform' action="">
        <p>
            姓名：
            <input type="text" name="nameField">
        </p>
        <p>
            年龄：
            <input type="text" name="ageField">
        </p>
        <p>
            <input type="submit">
        </p>
    </form>
    <script>
        var myform = document.getElementById('myform');
        // 表单的name属性打点调用
        var nameField = myform.nameField;
        var ageField = myform.ageField;
        nameField.onchange = function () {
            console.log('您修改了姓名');
        }
        nameField.oninput = function () {
            console.log('您正在修改姓名');
        }
        nameField.onfocus = function () {
            console.log('姓名框已得到焦点');
        }
        nameField.onblur = function () {
            console.log('姓名框已失去焦点');
        }
        myform.onsubmit = function () {
            console.log("您正在提交表单");
        }
    </script>
</body>

页面事件监听

事件名事件描述
onload当页面或图像被完成加载
onunload当用户退出页面
*更多有关窗口或页面的事件在BOM课程中介绍

事件传播（先从外到内，再从内到外）

观察

 <style>
      #box1 {
        width: 202px;
        height: 202px;
        border: 1px solid black;
        padding: 50px;
      }

      #box2 {
        width: 100px;
        height: 100px;
        border: 1px solid black;
        padding: 50px;
      }

      #box3 {
        width: 100px;
        height: 100px;
        border: 1px solid black;
      }
</style>
<body>
   <div id="box1">
     <div id="box2">
       <div id="box3"></div>
     </div>
   </div>
   <script>
     var oBox1 = document.getElementById("box1");
     var oBox2 = document.getElementById("box2");
     var oBox3 = document.getElementById("box3");
     // 打乱监听事件函数顺序，结果依然如此
     //事件传播从内到外，与监听事件函数顺序无关
     oBox2.onclick = function () {
       console.log("我是box2的onclick");
     };
     oBox3.onclick = function () {
       console.log("我是box3的onclick");
     };
     oBox1.onclick = function () {
       console.log("我是box1的onclick");
     };
   </script>
</body>

观察结果：从内到外；不确切，因为DOM0级事件只能监听冒泡阶段
实际结论：先从外到内，然后再从内到外

最内部元素不区分捕获和冒泡阶段

执行结果：
在这里插入图片描述

 oBox1.addEventListener(
    "click",
    function () {
      console.log("我是box1的捕获阶段");
    },
    true
  );
  oBox2.addEventListener(
    "click",
    function () {
      console.log("我是box2的捕获阶段");
    },
    true
  );

  oBox3.addEventListener(
    "click",
    function () {
      console.log("我是box3的捕获阶段");
    },
    true
  );

  oBox1.addEventListener(
    "click",
    function () {
      console.log("我是box1的冒泡阶段");
    },
    false
  );
  oBox2.addEventListener(
    "click",
    function () {
      console.log("我是box2的冒泡阶段");
    },
    false
  );
  oBox3.addEventListener(
    "click",
    function () {
      console.log("我是box3的冒泡阶段");
    },
    false
  );

同名事件互相覆盖问题

若给元素设置相同的两个或多个同名事件，
DOM0级写法后面写的会覆盖先写的；
而DOM2级会按顺序执行

事件对象

事件处理函数提供一个形式参数，它是一个对象，封装了本次事件的细节
这个参数通常用单词event或字母e来表示

oBox.onmousemove = function (e) {
      //对象e就是这次事件的“事件对象”
  };

鼠标位置

属性属性描述
clientX鼠标指针相对于浏览器的水平坐标
clientY鼠标指针相对于浏览器的垂直坐标
pagex鼠标指针相对于整张网页的水平坐标
pageY鼠标指针相对于整张网页的垂直坐标
offsetX鼠标指针相对于事件源元素的水平坐标
offsetY鼠标指针相对于事件源元素的垂直坐标

e.charCode

表示用户输入字符的“字符码”
通常用于onkeypress事件中

字符字符码
0~948~57
A~Z65~90
a~z97~122

e.keyCode

表示用户按下按键的“键码”
通常用于onkeydown事件和onkeyup中

按键键码
0~948~57
a～z（不分大小写）65~90
方向键（左、上、右、下）37、38、39、40
回车键13
空格键32
<body>
    <input id='field1' type="text">
    <h1 id='info1'></h1>
    <input id='field2' type="text">
    <h1 id='info2'></h1>
    <script>
        var oField1 = document.getElementById('field1');
        var oInfo1 = document.getElementById('info1');
        var oField2 = document.getElementById('field2');
        var oInfo2 = document.getElementById('info2');
        oField1.onkeypress = function (e) {
            oInfo1.innerText = '您输入的字符的字符码是' + e.charCode;
        }
        oField2.onkeydown = function (e) {
            oInfo2.innerText = '您按下的按键的键码是' + e.keyCode;
        }
     </script>
</body>

e.preventDefault()-阻止默认动作

1）DOM2级
e.preventDefault()
2）DOM0级
最后加：return false;
例：阻止表单默认动作


      Form.onsubmit = function () {
        return false;
      }; //可阻止默认提交动作

案例-当标在盒子中向下滚动，数字加1；反之，数字减1
onmousewheel鼠标滚轮事件
deltaY属性表示鼠标滚动方向，向下滚动时返回正值，向上滚动时返回负值

<div id="box"></div>
<h1 id="info">0</h1>
<script>
  var oBox = document.getElementById("box");
  var oInfo = document.getElementById("info");
  var a = 0;
  oBox.onmousewheel = function (e) {
    /* 页面较长时，使用阻止默认事件
    即用户在盒子内部滚动鼠标滚轮时，不会引发页面滚动条的滚动 */
    e.preventDefault();
    if (e.deltaY > 0) {
      a--;
    } else {
      a++;
    }
    oInfo.innerText = a;
  };
</script>

e.stopPropagation()-阻止继续传播

在一些场合，非常有必要切断事件继续传播，否则会造成页面特效显示出bug
案例

<style>
  #box {
    width: 200px;
    height: 200px;
    background-color: red;
  }
</style>

<body>
	<div id="box">
		<button id="btn">按我</button>
	</div>
	<script>
		 var oBox = document.getElementById("box");
		 var oBtn = document.getElementById("btn");
		 //   oBox.onclick = function () {
		 //     console.log("我是盒子");
		 //   };
		 //   oBtn.onclick = function (e) {
		 //     //阻止冒泡-点击btn只打印我是按钮
		 //     e.stopPropagation();
			 //     console.log("我是按钮");
			 //   };
		 oBox.addEventListener(
		   "click",
		   function (e) {
		     // 阻止捕获-点击btn只打印我是盒子
		     e.stopPropagation();
		     console.log("我是盒子");
		   },
		   true
		 );
		 oBtn.addEventListener(
		   "click",
		   function () {
		     console.log("我是按钮");
		   },
		   true
		 );
	</script>
</body>

事件委托

性能问题

作用1-批量添加事件监听

每一个事件监听注册都会消耗一定的系统内存，而批量添加事件监听数量太多，导致内存消耗更大
例如：每个<1i>的事件处理函数都是不同的函数，占用更多内存

<ul id="list">
  <li>列表项</li>
  <li>列表项</li>
  <li>列表项</li>
  <li>列表项</li>
</ul>
<script>
  var oList = document.getElementById("list");
  var lis = oList.getElementsByTagName("li");
  // 循环语句，给元素批量添加监听
  for (var i = 0; i < lis.length; i++) {
    lis[i].onclick = function () {
      //this指代点击的元素
      this.style.color = "red";
    };
  }
</script>

作用2-实现自动绑定事件

新增元素不能自动获得事件监听
原理：利用事件冒泡机制，将后代元素事件委托给祖先元素

e.target-事件源元素

触发此事件的最早元素，即“事件源元素”

e.currentTarget-事件处理程序附加到的元素

使用场景

1）需要批量添加事件监听时
2）当有动态元素节点上树时
例1：点击任一个li元素,事件都会通过冒泡传递给祖先元素

<body>
    <button id="btn">按我添加新的li列表项</button>
    <ul id="list">
      <li>默认项</li>
      <li>默认项</li>
      <li>默认项</li>
    </ul>
    <script>
      var oBtn = document.getElementById("btn");
      var oList = document.getElementById("list");
      oList.onclick = function (e) {
        // e.target表示用户真正点击的那个元素
        e.target.style.color = "red";
      };
      oBtn.onclick = function () {
        var oLi = document.createElement("li");
        oLi.innerText = "我是新来的";
        oList.appendChild(oLi);
      };
    </script>
</body>

例2：

<button id="btn">按我添加新的li列表项</button>
<ul id="list">
	<li>默认项</li>
	<li>默认项</li>
	<li>默认项</li>
</ul>
<script>
	var oList = document.getElementById("list");
	var oBtn = document.getElementById("btn");
	// onmouseenter不冒泡
	//相当于事件处理函数直接附加给了DOM节点
	oList.onmouseenter = function (e) {
	// e.target表示用户真正点击的那个元素
		e.target.style.color = "red";
	};
	oBtn.onclick = function () {
		// 创建新的li元素
		var oLi = document.createElement("li");
		// 写内容
		oLi.innerText = "我是新来的";
		// 上树
		oList.appendChild(oLi);
	};
</script>

onmouseenter&onmouseover
都表示“鼠标进入"
区别：onmouseenter不冒泡，onmouseover冒泡。

chonger_feifei
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
@EventListener注解使用及源码解析
愤怒的苹果ext的博客
07-29 4万+
一、简介 @EventListener是一种事件驱动编程在spring4.2的时候开始有的，早期可以实现ApplicationListener接口, 想了解下ApplicationListener的可以参考下这篇文章https://blog.csdn.net/baidu_19473529/article/details/86683365Spring为我们提供的一个事件监听、订阅的实现，内部实现原...
java 实现事件监听EventListener的方式详解及分析
m0_57640408的博客
08-08 1万+
我们开发中经常遇到监听事件，首先我们先来了解下事件相关知识：使用场景(场景一)：银行操作转账成功后需要给客户发送短信和邮件，使用事件就可以实现解耦并异步。我们监听事件之前要有事件源source，创建事件源（Event），发布事件（publishEvent），然后才能到监听事件。事件驱动机制是观察者模式（称发布订阅）具体实现，事件对象（Event）相当于被观察对象(Subject), 事件监听(EventListener) 相当于观察者(Observer)......
Java 创建事件(Event)、事件监听器(EventListener)、事件发布(publishEvent)详解和相关demo
最新发布
m0_52767002的博客
05-16 1305
监听器的作用在于允许你对应用程序中发生的事件做出响应，并执行相应的逻辑。使用 Spring 的事件机制，你可以将应用程序分解成更小、更易于管理的部分，并允许这些部分之间以解耦的方式进行通信。解耦：通过将事件发布和处理逻辑分离，使得应用程序的不同部分之间解耦。事件发布者不需要知道谁在监听事件，而监听器也不需要直接调用事件发布者的方法。这种解耦可以使得代码更加模块化和可维护。扩展性：当你需要在应用程序的不同部分之间引入新的交互或逻辑时，可以轻松地添加新的事件和监听器，而不会影响现有的代码。
Spring注解 @EventListener 的介绍与使用示例以及异常处理
i余数的博客
01-05 1万+
将一个方法标记为监听器，用于监听应用程序事件，事件可以是 ApplicationEvent实例，也可以是其他任意的对象。
十二、Event Listener
stiven46的博客
03-06 215
AEM中的Event Listener
SpringBoot中@EventListener注解的使用
热门推荐
njitzyd
01-26 2万+
背景 在开发工作中，会遇到一种场景，做完某一件事情以后，需要广播一些消息或者通知，告诉其他的模块进行一些事件处理，一般来说，可以一个一个发送请求去通知，但是有一种更好的方式，那就是事件监听，事件监听也是设计模式中 发布-订阅模式、观察者模式的一种实现。 观察者模式：简单的来讲就是你在做事情的时候身边有人在盯着你，当你做的某一件事情是旁边观察的人感兴趣的事情的时候，他会根据这个事情做一些其他的事，但是盯着你看的人必须要到你这里来登记，否则你无法通知到他（或者说他没有资格来盯着你做事情）。 对于 Spring
springboot listeners 事件监听机制 @EventListener详解
qq_22351805的博客
02-02 5402
本人博客原地址：springboot listeners 事件监听机制 @EventListener详解 创作时间： 2019.06.11 16:53:43 基于springboot2.1.4 springboot在刚启动的时候构造SpringApplication对象就会加载一系列已配置的listeners(详细介绍)，此处的listeners实现的是org.springframework.context.ApplicationListener接口，准确来说是org.springframework.con
keycloak-kafka-event-listener:自定义事件监听器，将所有Keycloak事件发布到Kafka
04-10
标题提到的"keycloak-kafka-event-listener"是一个自定义的事件监听器，它的主要功能是将Keycloak中的所有事件实时地发布到Apache Kafka这个分布式流处理平台。 Apache Kafka是一个高吞吐量、分布式的发布订阅消息...
event_listener.7z
01-06
在Photoshop中，`event_listener.jsx` 是一个用于实现事件监听功能的JavaScript脚本。JavaScript在Photoshop中作为 ExtendScript 执行，它允许用户自定义和扩展软件的行为，响应Photoshop的各种内置事件。以下是关于...
Passive Event Listeners - 被动事件监听器1
08-08
被动事件监听器（Passive Event Listeners）是现代Web开发中的一个重要优化策略，尤其是在构建高性能的Web应用程序时。这个概念的引入主要是为了提高页面的滚动性能和响应速度，特别是对于移动设备上的触摸事件。...
js HTML DOM EventListener功能与用法实例分析
10-15
主要介绍了js HTML DOM EventListener功能与用法,结合实例形式分析了js HTML DOM EventListener事件监听相关用法及操作注意事项,需要的朋友可以参考下
eventlistener java_EventListener原理
weixin_39592240的博客
02-16 345
目录流程容器的刷新流程如下：public void refresh() throws BeansException, IllegalStateException {synchronized (this.startupShutdownMonitor) {// Prepare this context for refreshing.prepareRefresh();// Tell the subcla...
@EventListener Spring事件发布的深入学习与使用
终生学习践行者
11-28 5246
基于最新Spring 5.x，详细介绍了Spring的@EventListener事件发布机制的概念和使用方法，以及一些问题的解决办法！
Spring源码-事件监听机制（@EventListener实现方式）
it_lihongmin的博客
11-06 2万+
在看@EventListener之前需要先知道 继承EventListener方式在底层是怎么实现了，可以参见前一篇博客Spring源码-事件监听机制（实现EventListener接口）。 先梳理一下，首先Ioc容器启动的时候，ApplicationContext的refresh模板方法中，initApplicationEventMulticaster()方法中那个初始化了Sim...
@EventListener工作原理
maple05的博客
12-13 493
EventListener 是 Spring Framework 提供的用于处理事件监听的注解。它的工作原理基于观察者设计模式，其中有一个事件发布者（publisher）和一个或多个事件监听者（listener）。
JavaScript事件监听器总结
Maybe_ss的博客
10-19 3615
事件监听总结，事件流，捕获阶段、目标阶段、冒泡阶段，事件代理，阻止事件冒泡，阻止默认事件。
java 事件监听 多个事件_在Spring中的多个事件上使用@EventListener批注
weixin_39667398的博客
02-24 2088
这似乎是一个非常简单的问题，但我似乎在任何地方都找不到答案。在Spring中，我可以使用@EventListener注释为事件创建侦听器，如下所示：@Componentpublic class MyListener {@EventListenerpublic void handleEvent(ContextRefreshedEvent event) {...}}但是，如果我需要相同的方法来侦听多个...
springBoot的event事件发布/监听
奔跑的菜鸡
12-25 2535
springBoot的event事件发布/监听
laravel Event事件 和事件处理器(事件监听器)Listeners
...
06-16 1756
概念： 事件是一种常见的观察者模式的应用。 含义：当 (event)... 然后(干) (listener)... 业务逻辑处理：事件event除了定义属性和注入事件参数外不做业务逻辑处理，而是交给事件处理器（即监听器listener）的handle方法来处理具体的业务逻辑。 放置 event 和 listener 文件的位置 app/Events app/Listeners 定义 用 Artisan 命令可以快速生成一个模板： php artisan make:event UserEvent .
@EventListener用法
07-22
@EventListener 是 Spring Framework 中的一个注解，用于标记方法作为事件监听器。当触发相应的事件时，被 @EventListener 注解标记的方法会被自动调用。 使用 @EventListener 注解的步骤如下： 1. 在监听器类中，使用 @EventListener 注解标记要监听的方法。例如： ```java @Component public class MyEventListener { @EventListener public void handleEvent(MyEvent event) { // 处理事件的逻辑 } } ``` 2. 创建一个事件类，该类表示你希望监听的特定事件。例如： ```java public class MyEvent { // 事件的属性和行为 } ``` 3. 在触发事件的地方，发布事件对象。可以使用 Spring 的 ApplicationContext 或 ApplicationEventPublisher 来发布事件。例如： ```java @Autowired private ApplicationEventPublisher eventPublisher; public void doSomething() { // 执行某些操作后发布事件 MyEvent event = new MyEvent(); eventPublisher.publishEvent(event); } ``` 当发布事件时，Spring 会自动调用被 @EventListener 注解标记的方法，并将事件对象作为参数传递给这些方法。 需要注意的是，@EventListener 注解可以用于任何 Spring 管理的 Bean 中，并且可以监听多个不同类型的事件。同时，被 @EventListener 注解标记的方法可以有不同的访问修饰符和参数类型，但必须只有一个参数用于接收事件对象。 这样，你就可以使用 @EventListener 注解来简化和管理事件监听逻辑。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值