Javascript中常用事件集合和事件使用方法
2024-09-03 05:07:03
Javascript中常用事件集合和事件使用方法
一、事件绑定
格式:
事件源 . on事件类型=事件处理函数
事件绑定三要素
1、事件源:和谁绑定
2、事件类型:什么事件
3、事件处理函数:触发了要执行什么
二、常用事件类型
鼠标事件 | 键盘事件 | 浏览器事件 | 触摸事件 | 表单事件 |
---|---|---|---|---|
click - 单击 | keydown - 键盘按下 | load - 加载完毕 | touchstart - 触摸开始 | focus - 聚焦 |
dblclick - 双击 | keyup - 键盘抬起 | scroll - 滚动条滚动 | touchmove - 触摸移动 | blie - 失焦 |
mousedown - 鼠标按下 | keypress - 键盘键入 | resize - 尺寸改变 | touchend - 触摸结束 | change - 改变 |
contextmenu - 左键单击 | input - 输入 | |||
mouseup - 鼠标抬起 | reset - 重置 | |||
mousemove - 鼠标移动 | ||||
mouseover - 鼠标移入 | ||||
mouseout - 鼠标移出 |
三、事件传播
什么是事件传播:当几个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>
最新文章
- Angularjs学习笔记9_JSON和JSONP
- javascript之八——BOM
- MemcacheQ安装及使用
- 安装ADT 提示 android ADT Unable to connect to repository
- 玩转html5(五)---月球绕着地球转,地球绕着太阳转(canvas实现,同样可以动哦)
- linux 下安装jdk及配置jdk环境图解
- iOS、真机调试
- 重学C语言---01概述
- [3] TensorFlow 深层神经网络
- 响应式 Web 设计指南「实践篇」
- 控件之ReleLayout属性
- ASP.NET Core 1.0 中使用 Log 日志配置
- maven jetty debug 无法关联第三方类库解决办法
- python实例[判断操作系统类型]
- JQuery Mobile - 需要注意问题!
- Delphi中BCD和Currency类型
- python基础===数据伪造模块faker
- 【树链剖分/倍增模板】【洛谷】3398:仓鼠找sugar
- sickit-learn库实现机器学习
- WWW缓存方式
热门文章
- 万字长文入门 Redis 命令、事务、锁、订阅、性能测试
- SpringSecurity自定义注解和处理器
- 联盛德 HLK-W806 (十二): Makefile组织结构和编译流程说明
- jetbrain家的fleet(已获得预览权限)直接对标vscode , fleet有望超过vscode吗?今天我们实际操作下
- LuoguP7911 [CSP-J 2021] 网络连接 题解
- JAVA结合Redis处理缓存穿透问题
- 【LeetCode】104. Maximum Depth of Binary Tree 解题报告(Python)
- 【九度OJ】题目1080:进制转换 解题报告
- 【LeetCode】575. Distribute Candies 解题报告(Java & Python)
- Hexo添加Live2D看板娘+模型预览