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>
相关文章
|
5月前
|
JavaScript 前端开发 Java
【Java进阶】详解JavaScript事件
总的来说,JavaScript事件是JavaScript交互设计的核心,理解和掌握JavaScript事件对于编写高效、响应式的网页应用至关重要。
91 15
|
11月前
|
JavaScript
js两种移除事件的方法
js两种移除事件的方法
98 3
|
8月前
|
JavaScript 前端开发 测试技术
盘点原生JavaScript中直接触发事件的方式
本文全面探讨了原生JavaScript中触发事件的多种方式,包括`dispatchEvent`、`Event`构造函数、`CustomEvent`构造器、直接调用事件处理器以及过时的`createEvent`和`initEvent`方法。通过技术案例分析,如模拟点击事件、派发自定义数据加载事件和实现提示框系统,帮助开发者掌握这些方法在实际开发中的应用,提升灵活性与兼容性。
232 3
|
10月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
338 5
|
10月前
|
存储 JavaScript 前端开发
decimal.js库的安装和使用方法
【10月更文挑战第24天】decimal.js 是一个非常实用的高精度计算库,通过合理的安装和使用,可以在 JavaScript 中实现精确的数值计算和处理。你可以根据具体的需求和项目情况,灵活运用该库来解决数字精度丢失的问题。
|
11月前
|
存储 JavaScript 前端开发
js事件队列
【10月更文挑战第15天】
157 6
|
11月前
|
JavaScript API
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
563 0
|
11月前
|
缓存 JavaScript 前端开发
Node.js模块化的基本概念和分类及使用方法
Node.js模块化的基本概念和分类及使用方法
191 0
|
11月前
|
JavaScript 前端开发 容器
js之弹性布局使用方法
js之弹性布局使用方法
125 0
|
11月前
|
JavaScript
js两种移除事件的方法
js两种移除事件的方法
107 0