文章目录
- 事件
- 认识事件
- 事件绑定
- - 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;
};
