事件
认识事件
事件：捕获用户的行为
事件的三要素
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. 表单提交 submit
form.onsubmit = function () {
console.log("表单提交");
// 禁止默认行为 刷新页面
return false;
};
// 6. 表单重置 reset
form.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;
};
557
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
