Javascript中常用事件集合和事件使用方法

简介: Javascript中常用事件集合和事件使用方法

一、事件绑定


格式:

事件源 . on事件类型=事件处理函数

事件绑定三要素


1、事件源:和谁绑定


2、事件类型:什么事件


3、事件处理函数:触发了要执行什么


二、常用事件类型


image.png


三、事件传播


什么是事件传播:当几个div是父子关系时,点击子的事件,父的事件也会触发


1.阻止事件传播

格式:事件对象 . stopPropagation()


//点击divc只输出divc的内容
<div id="a">
  <div id="b">
<div id="c" ></div>
  </div>
</div>
<script>
var  diva=document.getgetElementById("a") 
var  divb=document.getgetElementById("b") 
var  divc=document.getgetElementById("c") 
diva.onclick=function(){
   console.log("diva被触发")
}
divb.onclick=function(){
   console.log("divb被触发")
}
divc.onclick=function(e){
   console.log("divc被触发")
    e.stopPropagation()    //阻止触发(如果没有这个,三个都会触发)
}
</script>
相关文章
|
30天前
|
JavaScript 前端开发
js事件队列
js事件队列
|
19天前
|
JavaScript 前端开发
JavaScript 事件
JavaScript 事件
27 2
|
1月前
|
JavaScript 前端开发
JavaScript 事件的绑定
JavaScript 事件的绑定
32 0
|
1天前
|
JavaScript 前端开发
JavaScript HTML DOM 事件
JavaScript HTML DOM 事件
12 5
|
2天前
|
监控 JavaScript 前端开发
|
19天前
Nest.js 实战 (十二):优雅地使用事件发布/订阅模块 Event Emitter
这篇文章介绍了在Nest.js构建应用时,如何通过事件/发布-订阅模式使应用程序更健壮、灵活、易于扩展,并简化服务间通信。文章主要围绕@nestjs/event-emitter模块展开,这是一个基于eventemitter2库的社区模块,提供了事件发布/订阅功能,使得实现事件驱动架构变得简单。文章还介绍了如何使用该模块,包括安装依赖、初始化模块、注册EventEmitterModule、使用装饰器简化监听等。最后总结,集成@nestjs/event-emitter模块可以提升应用程序的事件驱动能力,构建出更为松耦合、易扩展且高度灵活的系统架构,是构建现代、响应迅速且具有高度解耦特性的Nest.
|
1月前
|
编解码 JavaScript 前端开发
JS逆向浏览器脱环境专题:事件学习和编写、DOM和BOM结构、指纹验证排查、代理自吐环境通杀环境检测、脱环境框架、脱环境插件解决
JS逆向浏览器脱环境专题:事件学习和编写、DOM和BOM结构、指纹验证排查、代理自吐环境通杀环境检测、脱环境框架、脱环境插件解决
52 1
|
14天前
|
JavaScript 前端开发
|
1月前
|
JavaScript 前端开发
js的回车事件
js的回车事件
39 3
|
1月前
|
JavaScript 前端开发
js常用的几种事件
js常用的几种事件
29 0