文章目录

一、事件对象
二、鼠标事件对象
三、获取元素尺寸
四、获取元素偏移量
五、获取浏览器窗口尺寸
六、鼠标跟随（案例）
七、键盘事件对象
八、键盘控制小块移动
九、事件传播机制
十、冒泡和捕获
十一、mouseenter
十二、阻止事件传播
十三、事件委托

一、事件对象

对象可以看成属性的集合函数也是属性的一种。（属性和函数的集合）
事件对象主要包含一些事件的信息。
事件绑定：
元素节点.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   整个页面的左上角为原点pageYscreenX  电脑屏幕的左上角为原点screenYoffsetX 以事件触发的元素为原点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 livar 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);}

新添加的节点点击可以改变背景色

2021-01-13事件对象相关推荐

（三十七：2021.01.13）Pre-MICCAI 2019学习（二）《前列腺近距离放射治疗中，检测粒子在CT中的3D位置和方向》
<Automatic 3D seed location and orientation in CT images for prostate brachytherapy> 讲在前面摘要论 ...
无名2021/01/13
最喜欢的风轻云淡,现在仍在追逐中当年你说的,离开,放弃. 如今我早已释怀.甚至已经记不清,你的脸. 刚接到家里的通知,建议在外务工人员,就地过年. 如果返乡,需配合检查,提前报告行程. 感谢家乡的人 ...
【更新】网盘不限速下载 2021.01.13
哈喽大家好嘞! 最近一直都有好多朋友们反馈, 以往的百度网盘都不能用了, 安排,这就安排. 大家在学习知识的同时,不要忘记点赞呦! ★ KinhDown 搜集了全网,可算是找到了一个能用的! 依旧是 ...
JS事件对象 (event)
#事件对象 (event) div.onclick = function(event){ console.log(event); let e = event||wind ...
PowerBI视觉对象共计271组，2021.01.20日更新
PowerBI视觉对象共计271组,2021.01.20日更新内容包含导入文件和图标.预览图.文件名一致,在预览图内找到合适的可以直接在视觉对象文件夹搜索下载地址:点击下载超便宜或者复制链接打 ...
后处理程序文件大小的变量_【每日一题】(17题)面试官问：JS中事件流，事件处理程序，事件对象的理解？...
关注「松宝写代码」,精选好文,每日一题作者:saucxs | songEagle 2020,实「鼠」不易 2021,「牛」转乾坤风劲潮涌当扬帆,任重道远须奋蹄! 一.前言 2020.12.23 立 ...
JS(内置对象,全局函数,事件,事件对象)
目录内置对象全局函数事件事件对象内置对象 <!DOCTYPE html> <html><head><meta charset="utf-8 ...
js进阶课程 12-9 jquery的事件对象event的方法有哪些？
js进阶课程 12-9 jquery的事件对象event的方法有哪些? 一.总结一句话总结:三组六个,阻止默认事件一组,阻止冒泡一组,阻止冒泡和剩余事件一组. 1.事件的默认动作指什么? 比如点a标 ...
从零开始学习jQuery (五) 事件与事件对象【转】
一.摘要事件是脚本编程的灵魂. 所以本章内容也是jQuery学习的重点. 本文将对jQuery中的事件处理以及事件对象进行详细的讲解. 二.前言本篇文章是至今为止本系列内容最多的一篇, 足以可见其 ...
104_鼠标事件对象
1. 当发生mousedown.mouseup.dblclick.mouseover.mouseenter.mousemove.mouseout和 mouseleave事件时, 它们的执行函数都会传递 ...

2021-01-13事件对象