文章目录
一、事件对象
对象可以看成 属性的集合 函数也是属性的一种。（属性和函数的集合）
事件对象主要包含一些事件的信息。
事件绑定：
元素节点.on+事件类型 = 匿名函数；
事件对象的产生：在事件绑定完成后，就自动生成了一个事件对象。
事件绑定函数，因为不是在代码中直接调用函数，所以没有办法直接传参.
浏览器会给咱们一个默认的参数，这个参数就是事件对象。
获取事件对象：
在标准浏览器中。
直接在事件处理函数上定义一个形参。
会在事件触发的时候，由浏览器自动传递实参。
IE低版本
window.event
在标准浏览器下也可以使用
兼容写法：
var event = event || window.event;
HTML：
<div class="box">
123
</div>
JS：
function box() {
// 存储实参的
console.log(arguments.length);
}
box();
box.onclick = function(event) {
alert(arguments.length);
console.log(arguments[0]);
}
box.onclick = function(event) {
这三种写法都会触发
//IE低版本无法使用
// console.log(event);
//IE低版本使用，其它也适用
// console.log(window.event);
//兼容写法
var event = event || window.event;
console.log(event);
}
二、鼠标事件对象
鼠标事件对象
属性：
button：用来表示咱们按下的是哪一个按键
0 左键
1 滚轮
2 右键
- 获取当前鼠标的位置（原点不同）
clienX 可视窗口的左上角为原点
clienY
pageX 整个页面的左上角为原点
pageY
screenX 电脑屏幕的左上角为原点
screenY
offsetX 以事件触发的元素为原点
offsetY
.box {
margin: 50px;
width: 300px;
height: 300px;
background-color: brown;
}
window.onload = function() {
var box = document.querySelector(".box");
box.onmousedown = function(event) {
var event = event || window.event;
console.log(event.button);
console.log("clientX=" + event.clientX);
console.log("clientY=" + event.clientY);
console.log("pageX=" + event.pageX);
console.log("pageY=" + event.pageY);
console.log("screenX=" + event.screenX);
console.log("screenY=" + event.screenY);
console.log("offsetX=" + event.offsetX);
console.log("offsetY=" + event.offsetY);
}
}
三、获取元素尺寸
元素的占地面积
（宽高+内边距+边框） IE盒模型 设置的宽高就是元素的占地尺寸
offsetWidth
offsetHeight
元素的内容+内边距+边框
clientWidth
clientHeight
元素的内容 + 内边距
.box {
width: 300px;
height: 300px;
padding: 50px;
border: 10px solid;
margin: 100px auto;
background-color: brown;
/* display: none;隐藏时不会有宽高 */
/* opacity: 0; 透明时仍会有宽高*/
}
window.onload = function() {
var box = document.querySelector(".box");
console.log("offsetWidth=" + box.offsetHeight);
console.log("offsetHeight=" + box.offsetHeight);
console.log("clientWidth = " + box.clientWidth);
console.log("clientHeight = " + box.clientHeight)
}
四、获取元素偏移量
一个元素对于参考系的坐标位置。
- offsetParent
语法：元素.offsetParent
作用：拿到该元素获取偏移量时的参考父级
默认以body为参考系，如果父辈里有定位属性，则获取该父辈元素。 - offsetLeft offsetTop
语法：元素.offsetLeft 元素.offsetTop
作用：拿到元素相对于参考系的相对偏移量。
.father {
position: relative;
background-color: burlywood;
width: 600px;
height: 600px;
margin: 200px;
overflow: hidden;
}
.box {
width: 300px;
height: 300px;
padding: 50px;
border: 10px solid;
margin: 100px auto;
margin-left: 50px;
background-color: brown;
}
window.onload = function() {
var box = document.querySelector(".box");
console.log("offsetParent=" + box.offsetParent);
console.log("offsetLeft=" + box.offsetLeft);
console.log("offsetTop=" + box.offsetTop);
}
五、获取浏览器窗口尺寸
- BOM
innerWidth
innerHeight - DOM 文档 html的元素尺寸
document.documentElement.clientWidth
document.documentElement.clientHeight
window.onload = function() {
console.log(window.innerWidth);
console.log(window.innerHeight);
console.log(document.documentElement.clientWidth);
console.log(document.documentElement.clientHeight);
}
浏览器进行伸缩时，刷新会重新获取当前尺寸
六、鼠标跟随（案例）
- 1.需求：让div跟随鼠标移动
- 分析代码：
鼠标移动事件
1 获取鼠标的坐标位置
2.更改div的坐标位置
<style>
.box {
width: 100px;
height: 100px;
background-image: url("img/jl.gif");
background-size: contain;
position: absolute;
}
body {
background-color: black;
}
</style>
<script>
window.onload = function() {
var box = document.getElementsByClassName("box")[0];
document.onmousemove = function(event) {
var event = event || window.event;
var w = event.pageX;
var h = event.pageY;
box.style.left = w - box.offsetWidth / 2 + "px";
box.style.top = h - box.offsetHeight / 2 + "px";
}
}
</script>
七、键盘事件对象
键盘事件对象：可以判断你按下的是哪个键。
属性：
- key：你按下的是哪个键 区分大小写。
在IE低版本不适用 - keycode:
以编码格式返回 不区分大小写。
空格 32
回车（Enter） 13
在火狐低版本使用which属性。
尽量用keycode去判断你按下的键位。
altKey 判断是否按下alt键
shiftKey 判断是否按下shift键
ctrlKey 判断是否按下ctrl键
metaKey 判断是否按下 window win键 苹果系统（mac） comment键
以上四个值返回是布尔值，IE低版本不支持。
document.onkeydown = function(event) {
var enent = event || window.event;
console.log("您按下的是" + event.key + ",编码为：" + event.keyCode);
console.log(event.metaKey);
console.log(event.altKey);
console.log(event.shiftKey);
console.log(event.ctrlKey);
}
八、键盘控制小块移动
要求：
1. 按下键盘上的方向键，让div按照对应的方向进行移动。
2. 如果按下shift + 方向键， 让移动的速度乘以2。
步骤：
1.获取元素节点。
2.添加键盘事件
？键盘事件添加给谁 document
添加什么事件 keydown
3.事件中判断按下是什么键
如果是 → 让盒子向右移动，每次让它移动10px。
怎么让他移动？ 绝对定位 设置：left
4.移动范围
移动时判断移动范围是否超过大盒子。
<style>
* {
margin: 0;
padding: 0;
}
#bigBox {
width: 1000px;
height: 600px;
margin: 50px auto;
border: 1px solid;
position: relative;
}
#smallBox {
width: 50px;
height: 50px;
background-color: burlywood;
position: absolute;
left: 0;
top: 0;
}
</style>
<script>
window.onload = function() {
var bigBox = document.getElementById("bigBox");
var smallBox = document.getElementById("smallBox");
document.onkeydown = function(event) {
var event = event || window.event;
var speed = 40;
var l = parseInt(getComputedStyle(smallBox).left);
var t = parseInt(getComputedStyle(smallBox).top);
if (event.shiftKey) {
speed *= 2;
}
switch (event.keyCode) {
case 37:
if (l <= 0) {
smallBox.style.left = 0;
} else {
smallBox.style.left = smallBox.offsetLeft - speed + "px";
}
break;
case 39:
if (l >= bigBox.offsetWidth - smallBox.offsetWidth - speed) {
smallBox.style.left = bigBox.offsetWidth - smallBox.offsetWidth;
} else {
smallBox.style.left = smallBox.offsetLeft + speed + "px";
}
break;
case 38:
if (t <= 0) {
smallBox.style.top = 0;
} else {
smallBox.style.top = smallBox.offsetTop - speed + "px";
}
break;
case 40:
if (t > bigBox.offsetHeight - smallBox.offsetHeight - speed) {
smallBox.style.top = bigBox.offsetHeight - smallBox.offsetHeight;
} else {
smallBox.style.top = smallBox.offsetTop + speed + "px";
}
break;
default:
break;
}
}
}
</script>
九、事件传播机制
当你在一个元素上触发行为的时候，
会按照父级的顺序，从下往上进行传播行为,直到window为止。
事件传播只会传播同一类型的事件。
<div id="div1">
<div id="div2">
<div id="div3"></div>
</div>
<div id="other"></div>
</div>
window.onload = function() {
var boxs = document.getElementsByTagName("div");
for (var i = 0; i < boxs.length; i++) {
boxs[i].dataset.index = i + 1;
boxs[i].onclick = function() {
alert("div" + this.dataset.index);
}
}
}
点击div3会依次弹出div3，div2，div1
点击div2会依次弹出div2，div1
点击div1会弹出div1
只有在div3上移动时才会触发
十、冒泡和捕获
在事件的对象中，有一个属性叫做 target
表示本次事件触发，准确触发的对象。
事件目标。
事件：事件源，事件类型，事件处理函数
在低版本的IE中不支持
IE支持：srcElemen
兼容写法：
var event = event || window.event;
var target = event.srcElement || event.target;
- 冒泡：
从 事件目标 到 window 的顺序来执行所有的事件。 - 捕获：
从 window 到 事件目标 的顺序来执行所有的事件。
addEventListener 第三个参数为true的话 表示捕获。 false 表示 冒泡。
<div id="div1">
<div id="div2">
<div id="div3"></div>
</div>
</div>
var boxs = document.getElementsByTagName("div");
for (var i = 0; i < boxs.length; i++) {
boxs[i].dataset.index = i + 1;
使用监听去冒泡，从内到外获取
boxs[i].addEventListener("click", function () {
alert("div" + this.dataset.index);
});
}
点击div3会依次弹出div3，div2，div1
点击div2会依次弹出div2，div1
点击div1会弹出div1
var boxs = document.getElementsByTagName("div");
for (var i = 0; i < boxs.length; i++) {
boxs[i].dataset.index = i + 1;
使用监听去捕获，从外到内获取
boxs[i].addEventListener("click", function() {
alert("div" + this.dataset.index);
}, true);
点击div3会依次弹出div1，div2，div3
点击div2会依次弹出div1，div2
点击div1会弹出div1
var boxs = document.getElementsByTagName("div");
for (var i = 0; i < boxs.length; i++) {
boxs[i].onclick = function(event) {
// alert("div" + this.dataset.index);
// console.log(this);
console.log(event.target);
}
}
var div1 = document.getElementById("div1");
div1.onclick = function(event) {
var event = event || window.event;
var target = event.srcElement || event.target;
console.log(target);
}
十一、mouseenter
mouseenter mouseleave 他们不会进行事件传播。
var box = document.getElementById("box");
var intor = document.getElementById("intor");
box.onmouseenter = function () {
console.log("box移入了");
}
box.onmouseleave = function () {
console.log("box移出了");
}
intor.onmouseenter = function () {
console.log("intor移入了");
}
intor.onmouseleave = function () {
console.log("intor移出了");
}
}
box.onmouseover = function() {
console.log("box移入了");
}
box.onmouseout = function() {
console.log("box移出了");
}
intor.onmouseover = function() {
console.log("intor移入了");
}
intor.onmouseout = function() {
console.log("intor移出了");
}
十二、阻止事件传播
在标准浏览器中：
event.stopPropagation();
【注意】 书写在事件处理函数中
在IE低版本中：
event.cancelBubble = true;
兼容写法：
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
阻止事件传播之后，点击div3只能显示div3
var boxs = document.getElementsByTagName("div");
for (var i = 0; i < boxs.length; i++) {
boxs[i].index = i + 1;
boxs[i].onclick = function(event) {
var event = event || window.event;
alert("div" + this.index);
// 阻止事件传播兼容写法
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
// 标准浏览器
// event.stopPropagation();
}
}
十三、事件委托
循环绑定事件：
1.资源浪费
2.新增的节点没有绑定事件，需要手动再绑定一次。
- 事件委托：
原理：冒泡
步骤：
1.找到要操作的节点的共同的父节点或者祖先节点。
2.将事件添加到父节点上。
3.找到事件目标，判断事件目标是否是想要触发的对象，如果是，则触发响应的事件。 - 获取焦点：
元素节点.focus()
<button>添加</button>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
获取ul li
var lis = document.getElementsByTagName("li");
var ul = document.querySelector("ul");
for (var i = 0; i < lis.length; i++) {
lis[i].onclick = function() {
点击li时让背景色变换
this.style.backgroundColor = "red";
}
}
获取按钮
var btn = document.querySelector("button");
btn.onclick = function() {
点击按钮时创建一个元素节点
var li = document.createElement("li");
li.innerHTML = (lis.length + 1) * 111;
在父节点ul的最后添加新的子节点
ul.appendChild(li);
}
新增的节点点击没有背景色
var lis = document.getElementsByTagName("li");
var ul = document.querySelector("ul");
var btn = document.querySelector("button");
ul.onclick = function(event) {
var event = event || window.event;
var target = event.target || event.srcElement;
// 元素节点的nodeName 是大写的标签名
if (target.nodeName === "LI") {
target.style.backgroundColor = "red";
}
}
btn.onclick = function() {
var li = document.createElement("li");
li.innerHTML = (lis.length + 1) * 111;
ul.appendChild(li);
}
新添加的节点点击可以改变背景色
扫一扫
2186
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
