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>
相关文章
|
2月前
|
Web App开发 JavaScript 前端开发
javascript onkeydown事件
javascript onkeydown事件
|
2月前
|
JavaScript
js两种移除事件的方法
js两种移除事件的方法
39 3
|
19天前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
28 5
|
1月前
|
存储 JavaScript 前端开发
decimal.js库的安装和使用方法
【10月更文挑战第24天】decimal.js 是一个非常实用的高精度计算库,通过合理的安装和使用,可以在 JavaScript 中实现精确的数值计算和处理。你可以根据具体的需求和项目情况,灵活运用该库来解决数字精度丢失的问题。
|
2月前
|
存储 JavaScript 前端开发
js事件队列
【10月更文挑战第15天】
50 6
|
2月前
|
JavaScript API
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
139 0
|
2月前
|
缓存 JavaScript 前端开发
Node.js模块化的基本概念和分类及使用方法
Node.js模块化的基本概念和分类及使用方法
37 0
|
2月前
|
JavaScript 前端开发 容器
js之弹性布局使用方法
js之弹性布局使用方法
32 0
|
2月前
|
JavaScript
js两种移除事件的方法
js两种移除事件的方法
58 0
|
2月前
|
JavaScript
js两种移除事件的方法
js两种移除事件的方法