【JavaScript】事件绑定、事件解绑、常见事件类型、事件对象
2024-04-29 15:13:30
文章目录
- 事件
- 认识事件
- 事件绑定
- - DOM 0级 事件
- - DOM 2级 事件(事件侦听器 事件监听)
- 事件解绑
- 解绑dom0级事件
- 解绑dom2级事件
- 常见的事件类型
- 1. 鼠标事件
- click 鼠标左键点击
- dblclick 鼠标左键双击
- contextmenu 鼠标右键单击
- mousedown 鼠标按下
- mouseup 鼠标抬起
- mousemove 鼠标移动
- mouseover 鼠标移入
- mouseout 鼠标移出
- mouseenter 鼠标移入事件
- mouseleave 鼠标离开
- 2. 键盘事件
- keydown 键盘按下事件
- keyup 键盘抬起
- keypress 键盘键入事件
- 3. 浏览器事件
- 4. 表单事件
- focus 表单空间获取焦点
- blur 表单失去焦点
- change 表单内容改变
- input 表单输入事件
- submit 表单提交
- reset 表单重置
- 5. 触摸事件
- touchstart 开始触摸
- touchmove 触摸移动
- touchend 触摸结束
- 6. 拖拽事件
- dragstart 开始拖拽
- drag 拖拽移动
- dragend 拖拽结束
- dragenter 拖拽元素进入拖放元素范围内触发
- dragleave 拖拽元素离开拖放元素范围触发
- dragover 拖拽元素完全进入元素范围内触发
- drop 拖拽元素在拖放元素范围内放手的时候触发
- 事件对象
- 获取事件对象
- - 标准浏览器
- - IE浏览器
- 鼠标事件对象
- 1. client
- 2. page
- 3. offset
- 鼠标坐标点
事件
认识事件
事件：捕获用户的行为
事件的三要素1. 事件源 绑定在谁身上的事件2. 事件类型 什么事件3. 事件处理函数 当触发了行为之后，发生的事情eg div.onclick = function() {}事件源 div事件类型 click事件处理函数 function() {}
事件绑定
事件绑定方式
- DOM 0级 事件
-> 语法 事件源.on事件类型 = 事件处理函数-> 特点 同一个事件源的同一个事件类型只能绑定一个事件处理函数
- DOM 2级 事件(事件侦听器 事件监听)
-> 语法 事件源.addEventListener('事件类型', 事件处理函数)-> 特点 可以个同一个事件源的同一个事件类型绑定多个事件处理函数，会按照顺序依次触发
// dom 0级事件var div = document.querySelector("div");// div.onclick = function () {// console.log("绑定了一个点击事件");// };// div.onclick = function () {// console.log("再绑定一个事件");// };// dom 2级事件div.addEventListener("click", function () {console.log("绑定一个点击事件");});function clickFn() {console.log("再绑定一个点击事件");}div.addEventListener("click", clickFn);
事件解绑
解绑dom0级事件
- 语法 事件源.on事件类型 = null
解绑dom2级事件
- 语法 事件源.removeEventListener('事件类型', 要解绑的事件处理函数)- 注意 如果用dom2级解绑， 绑定的时候的事件处理函数必须要在外面单独定义，用函数名的形式进行绑定
// 给div绑定0级事件var div = document.querySelector("div");div.onclick = function () {console.log("绑定0级事件");};var btn = document.querySelector("button");btn.onclick = function () {div.onclick = null;};// 给div绑定2级事件
var div = document.querySelector("div");
var clickFn = function () {console.log("绑定dom2级事件");
};div.addEventListener("click", clickFn);
var btn = document.querySelector("button");btn.onclick = function () {div.removeEventListener("click", clickFn);
};
常见的事件类型
1. 鼠标事件
click 鼠标左键点击
dblclick 鼠标左键双击
contextmenu 鼠标右键单击
mousedown 鼠标按下
mouseup 鼠标抬起
mousemove 鼠标移动
mouseover 鼠标移入
mouseout 鼠标移出
mouseenter 鼠标移入事件
mouseleave 鼠标离开
<style>div {width: 100px;height: 100px;background-color: pink;overflow: hidden;}p {padding: 0;margin: 0;width: 50px;height: 50px;background-color: yellow;}</style></head><body><div><p></p></div></body>
<script>/*鼠标事件*/var div = document.querySelector("div");// * 1. click 鼠标左键点击div.onclick = function () {console.log("鼠标左键点击");};// 2. dblclick 鼠标左键双击// 是要是300ms内有两次click就会触发双击div.ondblclick = function () {console.log("鼠标左键双击");};// * 3. contextmenu 鼠标右键单击div.oncontextmenu = function () {console.log("鼠标右键单击");};// * 4. mousedown 鼠标按下div.onmousedown = function () {console.log("鼠标按下");};// * 5. mouseup 鼠标抬起div.onmouseup = function () {console.log("鼠标抬起");};// * 6. mousemove 鼠标移动div.onmousemove = function () {console.log("鼠标移动");};// 7. mouseover 鼠标移入// 注意 mouseover 和 mouseout 在鼠标移入到子元素上依然可以触发div.onmouseover = function () {console.log("鼠标移入");};// // 8. mouseout 鼠标移出div.onmouseout = function () {console.log("鼠标移出");};// * 9. mouseenter 鼠标移入事件mouseenter 和 mouseleave 在鼠标移入子元素的时候，不会触发div.onmouseenter = function () {console.log("鼠标移入事件");};// * // 10. mouseleave 鼠标离开div.onmouseleave = function () {console.log("鼠标离开");};
</script>
2. 键盘事件
keydown 键盘按下事件
keyup 键盘抬起
keypress 键盘键入事件
- 可以给所有元素绑定键盘事件, 不是所有元素都能触发键盘事件- 一般给 window/document/表单元素 绑定键盘元素- 键盘事件不考虑中文
var inp = document.querySelector("input");// 1. keydown 键盘按下事件inp.onkeydown = function () {console.log("键盘按下事件");};// 2. keyup 键盘抬起inp.onkeyup = function () {console.log("键盘抬起");};// 3. keypress 键盘键入事件// 注意 按下的内容必须和出现的内容一致inp.onkeypress = function () {console.log("键盘键入事件");};
3. 浏览器事件
4. 表单事件
focus 表单空间获取焦点
blur 表单失去焦点
change 表单内容改变
input 表单输入事件
submit 表单提交
reset 表单重置
<body><form action="./00-回顾.html"><!-- <input type="text" /> --><input type="text" value="小花" /><button type="submit">提交</button><button type="reset">重置</button></form></body>
<script>/*表单事件*/var inp = document.querySelector("input");var form = document.querySelector("form");// 1. focus 表单空间获取焦点// inp.onfocus = function () {// console.log("表单空间获取焦点");// };// // 2. blur 表单失去焦点// inp.onblur = function () {吃饭啦// console.log("表单失去焦点");// };// 3. change 表单内容改变// 注意 文本框 要求获取焦点和失去焦点内容不一样的时候会触发// inp.onchange = function () {// console.log("表单内容改变");// };// 4. input 表单输入事件// 注意 只要输入或删除就会触发// inp.oninput = function () {// console.log("表单输入事件");// };// 表单 提交 和 重置 都必须绑定在form表单域上面// 5. 表单提交 submitform.onsubmit = function () {console.log("表单提交");// 禁止默认行为 刷新页面return false;};// 6. 表单重置 resetform.onreset = function () {console.log("表单重置");};
</script>
5. 触摸事件
touchstart 开始触摸
touchmove 触摸移动
touchend 触摸结束
var div = document.querySelector("div");// 1. touchstart 开始触摸
div.ontouchstart = function () {console.log("开始触摸");
};// 2. touchmove 触摸移动
div.ontouchmove = function () {console.log("触摸移动");
};// 3. touchend 触摸结束
div.ontouchend = function () {console.log("触摸结束");
};
6. 拖拽事件
dragstart 开始拖拽
drag 拖拽移动
dragend 拖拽结束
dragenter 拖拽元素进入拖放元素范围内触发
dragleave 拖拽元素离开拖放元素范围触发
dragover 拖拽元素完全进入元素范围内触发
drop 拖拽元素在拖放元素范围内放手的时候触发
拖拽事件
- 拖拽关联两个元素
1. 拖拽元素 正在拖着的元素
2. 拖放元素 将要松手放置的元素
- 如何让一个元素可以被拖拽
置一个属性 draggable = ‘true’
<style>div {width: 200px;height: 200px;background-color: pink;}p {width: 300px;height: 300px;background-color: green;}</style></head><body><!-- 设置 draggable 属性 让元素可以拖拽 --><div draggable="true"></div><p draggable="true"></p></body>
<script>var div = document.querySelector("div");var p = document.querySelector("p");// 1. dragstart 开始拖拽// div.ondragstart = function () {// console.log("开始拖拽");// };// // 2. drag 拖拽移动// div.ondrag = function () {// console.log("正在拖着走");// };// // 3. dragend 拖拽结束// div.ondragend = function () {// console.log("拖拽结束");// };// 4. dragenter 拖拽元素进入拖放元素范围内触发// p.ondragenter = function () {// console.log("把别的元素拖进来");// };// // 5. dragleave 拖拽元素离开拖放元素范围触发// p.ondragleave = function () {// console.log("把别的元素拖走了");// };// 6. dragover 拖拽元素完全进入元素范围内触发p.ondragover = function () {console.log("拖进来了");// 阻止默认行为return false;};// 7. drop 拖拽元素在拖放元素范围内放手的时候触发// 注意 如果想要让drop事件生效， 需要阻止 dragover事件的默认行为p.ondrop = function () {console.log("把元素拖进来撒手");};
</script>
事件对象
- 当事件行为发生的时候，浏览器主动记录的一个对象数据，内部存储了关于本次事件的相关信息
获取事件对象
- 标准浏览器
在事件处理函数有一个参数，参数就是事件对象
- IE浏览器
IE浏览器天生有一个事件对象 window.event
<style>div {width: 200px;height: 200px;background-color: pink;}</style></head><body><div></div>
</body>
<script>var div = document.querySelector("div");// 标准浏览器div.onclick = function (e) {console.log(e);};// IE 浏览器事件对象div.onclick = function () {console.log(window.event);};// 兼容性操作div.onclick = function (e) {var e = e || window.event;};
</script>
鼠标事件对象
1. client
- 语法 entX事件对象.clientY- 光标相对于浏览器可视窗口左上角的坐标点
2. page
- 语法 eX事件对象.pageY- 光标相对于文档流左上角的坐标点
3. offset
- 语法 setX事件对象.offsetY- 光标相对于 准确触发事件的元素 左上角的坐标点
<style>* {margin: 0;padding: 0;}div {width: 200px;height: 300px;background-color: pink;margin: 100px;margin-top: 700px;}
</style>
<body><div></div>
</body>
<script>var div = document.querySelector("div");div.onclick = function (e) {// 光标相对于浏览器可视窗口左上角的坐标点console.log("e.clientX, e.clientY");console.log(e.clientX, e.clientY);console.log("==========================");// 光标相对于文档流左上角的坐标点console.log("e.pageX, e.pageY");console.log(e.pageX, e.pageY);console.log("==================");// 光标相对于 准确触发事件的元素 左上角的坐标点console.log("e.offsetX, e.offsetY");console.log(e.offsetX, e.offsetY);};
</script>
鼠标坐标点
// 0 获取元素
var xBox = document.querySelector(".x");
var yBox = document.querySelector(".y");document.onmousemove = function (e) {var x = e.clientX;var y = e.clientY;// 把 x 和 y 放到span中xBox.innerHTML = x;yBox.innerHTML = y;
};
【JavaScript】事件绑定、事件解绑、常见事件类型、事件对象相关推荐
- jQuery事件绑定与解绑
一.jQuery事件 方法 描述 执行时机 click() 触发或将函数绑定到指定元素的click事件 单击鼠标时 dblclick() 触发或将函数绑定到指定元素的dblclick事件 双击鼠标时 ...
- Vue 事件绑定与解绑
目录 事件绑定 基础知识 使用场景 注意事项 v-on 绑定事件 语法 实例 $ref绑定事件 语法 实例 事件解绑 语法 实例 事件绑定 基础知识 使用场景 子组件==>父组件传数据 在父组件 ...
- 组件的自定义事件(绑定、解绑)
温馨提示:总结在最下方,如若不想看代码,请滚动至最下方查看相关知识点,谢谢! App.vue <template><div class="app">< ...
- js元素事件绑定与解绑兼容代码
一.元素事件的绑定方法兼容代码 为任意元素绑定任意事件的兼容代码 /*** 为任意元素绑定任意事件* @param {*} element 元素* @param {*} type 事件类型* @par ...
- JQuery_003_事件绑定与解绑
$(function () {//第一个按钮通过on的方式绑定点击事件$("#btn1").on("click",function () {alert(&quo ...
- js 事件（绑定、解绑、三个阶段、相关方法）
事件绑定与解绑: DOM0级事件(这类事件可以使用 return false来阻止事件往下执行,包含默认事件) 绑定: html内<input οnclick=''> js中el.οncl ...
- vue：组件自定义事件、绑定、解绑事件
vue:组件自定义事件.绑定.解绑事件 自定义组件绑定事件: 使用方法:在引入组件中的methods定义一个回调方法,在组件标签中使用如下两种方式自定义事件,去到引入的组件的中,使用 this.$em ...
- jQuery的绑定与解绑方法
jQuery的4种绑定方法 一.bind()与unbind() I.bind():绑定 1.定义 2.语法 3.参数 4.案例 (1)绑定单一事件 (2)绑定多个事件 II.unbind():解绑 1 ...
- Android 蓝牙开发（扫描设备、绑定、解绑）Kotlin版
Kotlin版 蓝牙开发 (扫描设备.绑定.解绑) 前言 运行效果图 正文 ① 配置项目 ② 布局和样式 ③ 编码 1. 通知栏样式修改 2. 蓝牙设备列表适配器编写 3. 权限请求 4. 初始化蓝牙 ...
- Android 蓝牙开发（扫描设备、绑定、解绑）
Android 蓝牙开发(扫描设备.绑定.解绑) 前言 效果图 一.配置项目 二.布局和样式 三.编码 四.源码 前言 公司最近给我丢了一个蓝牙开发的项目,不了解怎么办呢,那当然是从最基础的开始了,所 ...
最新文章
- 专家手把手教你写出高水平个人简历
- python 类继承和组合_Python：继承与组合
- python3写一个计算器_Python3 写了一个简单的模拟计算器 总是报错 有知道的大神 帮忙解答下 非常感谢...
- KDD 18 论文解读 | GraphWave：一种全新的无监督网络嵌入方法
- 太原师范学院计算机二级报名,山西计算机等级考试报名地点
- [vue-element] ElementUI怎么修改组件的默认样式？
- Dynamic programming solving ULS
- 如何使用线程完成售票系统
- 使用FPM打包工具打rpm包
- 如何用python获得实时股票信息_【python】用命令行获取实时股票信息
- 【EMNLP2020】超越MLM，微软打造全新预训练任务
- 【Django 2021年最新版教程28】前端模板中 时间日期星期格式化
- JTAG to AXI Master的API函数读写操作
- messenger支持查找附近的人功能吗_玩微信，附近的人，是否双方都在查找附近的人，才能显示？...
- hashcat破解密码规则示例
- ActiveMQ 反序列化漏洞 (CVE-2015-5254)复现
- 使用POI操作Ecxel文档遇到转化成String类型的电话号码无法转化成Cell类型了
- 大数据信息安全问题有哪些
- CAD制图初学入门 零基础学CAD要掌握技能精选
- CAPL创建与语法简介