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

热门文章

最新文章

  • 1
    当面试官再问我JS闭包时,我能答出来的都在这里了。
    46
  • 2
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    29
  • 3
    Node.js 中实现多任务下载的并发控制策略
    34
  • 4
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    26
  • 5
    【JavaScript】深入理解 let、var 和 const
    49
  • 6
    【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
    47
  • 7
    【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
    57
  • 8
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
    57
  • 9
    如何通过pm2以cluster模式多进程部署next.js(包括docker下的部署)
    72
  • 10
    【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
    55