一、事件概述
HTML事件可以触发浏览器中的行为，比方说当用户点击某个 HTML 元素时启动一段 JavaScript。
二、窗口事件
由窗口触发该事件 (同样适用于 <body> 标签)
| onblur | 当窗口失去焦点时运行脚本。 |
| onfocus | 当窗口获得焦点时运行脚本。 |
| onload | 当文档加载之后运行脚本。 |
| onresize | 当调整窗口大小时运行脚本。 |
| onstorage | 当 Web Storage 区域更新时（存储空间中的数据发生变化时）运行脚本。 |
案例演示1：当窗口失去焦点时，输出“窗口失去焦点”
<script>
window.onblur = function () {
console.log("窗口失去焦点");
};
</script> 
案例演示2：当窗口获取焦点时，输出“窗口获取焦点”
<script>
window.onfocus = function () {
console.log("窗口获取焦点");
};
</script>
案例演示3：当页面文档加载完成后，输出”Hello, World”
<script>
window.onload = function () {
console.log("Hello,World");
};
</script>
案例演示4：当调整窗口大小时，输出”窗口大小正在改变”
<script>
window.onresize = function () {
console.log("窗口大小正在改变");
};
</script> 
三、表单事件
表单事件在HTML表单中触发 (适用于所有 HTML 元素，但该HTML元素需在form表单内)
| onblur | 当元素失去焦点时运行脚本。 |
| onfocus | 当元素获得焦点时运行脚本。 |
| onchange | 当元素改变时运行脚本。 |
| oninput | 当元素获得用户输入时运行脚本。 |
| oninvalid | 当元素无效时运行脚本。 |
| onselect | 当选取元素时运行脚本。 |
| onsubmit | 当提交表单时运行脚本。 |
案例演示1：当文本框获取焦点，文本框背景为红色，当文本框失去焦点，文本框背景为黄色
<body>
<form>
<input type="text" id="text">
</form>
<script>
var textInput = document.getElementById("text");
/* 当文本框获取焦点，文本框背景为红色 */
textInput.onfocus = function () {
this.style.background = "red";
};
/* 当文本框失去焦点，文本框背景为绿色 */
textInput.onblur = function () {
this.style.background = "green";
};
</script>
</body> 注意：这里为什么要用this，你不用this也可以，就直接textInput.style.background = "red";也不是不可以的，但是方法的调用规则就是谁调用this，this就指向谁，这样我们就可以简化代码了
案例演示2：当文本框内容改变时，鼠标离开文本框，自动将文本框的内容输出到控制台
<body>
<form>
<input type="text" id="text">
</form>
<script>
var textInput = document.getElementById("text");
/* 当文本框内容改变时，鼠标离开文本框，自动将文本框的内容输出到控制台 */
textInput.onchange = function () {
console.log(this.value);
};
</script>
</body>案例演示3：当文本框内容改变时，立即将改变的内容输出到控制台
<body>
<form>
<input type="text" id="text">
</form>
<script>
var textInput = document.getElementById("text");
/* 当文本框内容改变时，立即将改变的内容输出到控制台 */
textInput.oninput = function () {
console.log(this.value);
};
</script>
</body>案例演示4：如果单击“submit”，则不填写文本字段，将发生警报消息
<body>
<form>
<input type="text" id="text" required>
<input type="submit" value="submit">
</form>
<script>
var textInput = document.getElementById("text");
/* 如果单击“submit”，则不填写文本字段，将发生警报消息 */
textInput.oninvalid = function () {
console.log("请您完善表单内容！");
};
</script>
</body> 
案例演示5：当选中文本框的内容时，输出“您已经选择了文本框内容！”
<body>
<form>
<input type="text" id="text">
</form>
<script>
var textInput = document.getElementById("text");
/* 当选中文本框的内容时，输出“您已经选择了文本框内容！” */
textInput.onselect = function () {
console.log("您已经选择了文本框内容！");
};
</script>
</body>
案例演示6：当提交表单的时候，在控制台输出“表单提交”
<body>
<form id="myform">
<input type="submit" id="submit">
</form>
<script>
var myform = document.getElementById("myform");
/* 当提交表单的时候，在控制台输出“表单提交” */
myform.onsubmit = function () {
console.log("表单提交");
return false;/* 用来阻止表单提交的，你不写它会跳转请求 */
};
</script>
</body>
四、键盘事件
通过键盘触发事件，类似用户的行为
| onkeydown | 当按下按键时运行脚本。 |
| onkeyup | 当松开按键时运行脚本。 |
| onkeypress | 当按下并松开按键时运行脚本。 |
案例演示1：当键盘按下判断当前的按键是不是 a ，如果是就输出true，否则输出false
<body>
<script>
/* 当键盘按下判断当前的按键是不是 a ，如果是就输出true，否则输出false */
window.onkeydown = function (event) {
/* 解决兼容性问题 */
event = event || window.event;
if (event.keyCode == 65) {
console.log("true");
} else {
console.log("false");
}
};
</script>
</body>案例演示2：使div可以根据不同的方向键向不同的方向移动
<body>
<div id="box" style="width: 100px;height: 100px;background: red;position: absolute;"></div>
<script>
var box = document.getElementById("box");
//为document绑定一个按键按下的事件
document.onkeydown = function (event) {
event = event || window.event;
// 定义移动速度
var speed = 10;
// 选择移动方向
switch (event.keyCode) {
case 37:
box.style.left = box.offsetLeft - speed + "px";
break;
case 39:
box.style.left = box.offsetLeft + speed + "px";
break;
case 38:
box.style.top = box.offsetTop - speed + "px";
break;
case 40:
box.style.top = box.offsetTop + speed + "px";
break;
}
};
</script>
</body>键鼠属性：
ctrlKey 返回当事件被触发时，“CTRL” 键是否被按下。
altKey 返回当事件被触发时，“ALT” 是否被按下。
shiftKey 返回当事件被触发时，“SHIFT” 键是否被按下。
clientX 返回当事件被触发时，鼠标指针的水平坐标。
clientY 返回当事件被触发时，鼠标指针的垂直坐标。
screenX 返回当某个事件被触发时，鼠标指针的水平坐标。
screenY 返回当某个事件被触发时，鼠标指针的垂直坐标。
五、鼠标事件
通过鼠标触发事件，类似用户的行为
| onclick | 当单击鼠标时运行脚本。 |
| ondblclick | 当双击鼠标时运行脚本。 |
| onmousedown | 当按下鼠标按钮时运行脚本。 |
| onmouseup | 当松开鼠标按钮时运行脚本。 |
| onmousemove | 当鼠标指针移动时运行脚本。 |
| onmouseover | 当鼠标指针移至元素之上时运行脚本，不可以阻止冒泡。 |
| onmouseout | 当鼠标指针移出元素时运行脚本，不可以阻止冒泡。 |
| onmouseenter | 当鼠标指针移至元素之上时运行脚本，可以阻止冒泡。 |
| onmouseleave | 当鼠标指针移出元素时运行脚本，可以阻止冒泡。 |
| onmousewheel | 当转动鼠标滚轮时运行脚本。 |
| onscroll | 当滚动元素的滚动条时运行脚本。 |
案例演示1：创建一个正方形div，默认颜色为黑色，当鼠标移入div，背景颜色变为红色，当鼠标移出div，背景颜色变为绿色
<body>
<div id="box" style="width: 100px;height: 100px;background: black;"></div>
<script>
var box = document.getElementById("box");
/* 当鼠标移入div，背景颜色变为红色 */
box.onmouseenter = function () {
this.style.background = "red";
};
/* 当鼠标移出div，背景颜色变为绿色 */
box.onmouseleave = function () {
this.style.background = "green";
};
</script>
</body>案例演示2：编写一个通用的拖拽元素函数，创建两个div，进行拖拽演示，要求兼容IE8、火狐、谷歌等主流浏览器
<body>
<div id="box1" style="width: 100px;height: 100px;background: red;position: absolute;"></div>
<div id="box2" style="width: 100px;height: 100px;background: green;position: absolute;"></div>
<script>
var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
drag(box1);
drag(box2);
/*
* 提取一个专门用来设置拖拽的函数
* 参数：开启拖拽的元素
*/
function drag(obj) {
//当鼠标在被拖拽元素上按下时，开始拖拽
obj.onmousedown = function (event) {
// 解决事件的兼容性问题
event = event || window.event;
// 设置obj捕获所有鼠标按下的事件
/**
* setCapture()：
* 只有IE支持，但是在火狐中调用时不会报错，
* 而如果使用chrome调用，它也会报错
*/
obj.setCapture && obj.setCapture();
// obj的偏移量 鼠标.clentX - 元素.offsetLeft
// obj的偏移量 鼠标.clentY - 元素.offsetTop
var ol = event.clientX - obj.offsetLeft;
var ot = event.clientY - obj.offsetTop;
// 为document绑定一个鼠标移动事件
document.onmousemove = function (event) {
// 解决事件的兼容性问题
event = event || window.event;
// 当鼠标移动时被拖拽元素跟随鼠标移动
// 获取鼠标的坐标
var left = event.clientX - ol;
var top = event.clientY - ot;
// 修改obj的位置
obj.style.left = left + "px";
obj.style.top = top + "px";
};
// 为document绑定一个鼠标松开事件
document.onmouseup = function () {
// 取消document的onmousemove事件
document.onmousemove = null;
// 取消document的onmouseup事件
document.onmouseup = null;
// 当鼠标松开时，取消对事件的捕获
obj.releaseCapture && obj.releaseCapture();
};
/*
* 当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容，
* 此时会导致拖拽功能的异常，这个是浏览器提供的默认行为，
* 如果不希望发生这个行为，则可以通过return false来取消默认行为，
* 但是这招对IE8不起作用
*/
return false;
};
}
</script>
</body>六、媒体事件
通过视频（videos），图像（images）或音频（audio） 触发该事件。
| onabort | 当发生中止事件时运行脚本。 |
| oncanplay | 当媒介能够开始播放但可能因缓冲而需要停止时运行脚本。 |
| oncanplaythrough | 当媒介能够无需因缓冲而停止即可播放至结尾时运行脚本。 |
| ondurationchange | 当媒介长度改变时运行脚本。 |
| onemptied | 当媒介资源元素突然为空时（网络错误、加载错误等）运行脚本。 |
| onended | 当媒介已抵达结尾时运行脚本。 |
| onerror | 当在元素加载期间发生错误时运行脚本。 |
| onloadeddata | 当加载媒介数据时运行脚本。 |
| onloadedmetadata | 当媒介元素的持续时间以及其它媒介数据已加载时运行脚本。 |
| onloadstart | 当浏览器开始加载媒介数据时运行脚本。 |
| onpause | 当媒介数据暂停时运行脚本。 |
| onplay | 当媒介数据将要开始播放时运行脚本。 |
| onplaying | 当媒介数据已开始播放时运行脚本。 |
| onprogress | 当浏览器正在取媒介数据时运行脚本。 |
| onratechange | 当媒介数据的播放速率改变时运行脚本。 |
| onreadystatechange | 当就绪状态（ready-state）改变时运行脚本。 |
| onseeked | 当媒介元素的定位属性不再为真且定位已结束时运行脚本。 |
| onseeking | 当媒介元素的定位属性为真且定位已开始时运行脚本。 |
| onstalled | 当取回媒介数据过程中（延迟）存在错误时运行脚本。 |
| onsuspend | 当浏览器已在取媒介数据但在取回整个媒介文件之前停止时运行脚本。 |
| ontimeupdate | 当媒介改变其播放位置时运行脚本。 |
| onvolumechange | 当媒介改变音量亦或当音量被设置为静音时运行脚本。 |
| onwaiting | 当媒介已停止播放但打算继续播放时运行脚本。 |
七、其它事件
| onshow | 当 <menu> 元素在上下文显示时触发。 |
| ontoggle | 当用户打开或关闭 <details> 元素时触发。 |
八、事件冒泡
事件的冒泡（Bubble）：所谓的冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发，在开发中大部分情况冒泡都是有用的，如果不希望发生事件冒泡可以通过事件对象来取消冒泡。
案例演示1：创建两个div，叠放在一起，分别绑定单击事件，点击最里边的div，会触发两个div的单击事件
<body>
<div id="div1">
我是DIV1
<div id="div2">
我是DIV2
</div>
</div>
<script>
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
// 为div1绑定单击事件
div1.onclick = function () {
console.log("div1 的单击事件触发了！");
};
// 为div2绑定单击事件
div2.onclick = function () {
console.log("div2 的单击事件触发了！");
};
</script>
</body> 
案例演示2：创建两个div，叠放在一起，分别绑定单击事件，点击最里边的div，不会触发两个div的单击事件，只会触发自己的单击事件，这时候我们可以取消事件冒泡
<body>
<div id="div1">
我是DIV1
<div id="div2">
我是DIV2
</div>
</div>
<script>
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
// 为div1绑定单击事件
div1.onclick = function () {
console.log("div1 的单击事件触发了！");
stopBubble();
};
// 为div2绑定单击事件
div2.onclick = function () {
console.log("div2 的单击事件触发了！");
stopBubble();
};
// 取消事件冒泡
function stopBubble(event) {
// 如果提供了事件对象，则这是一个非IE浏览器
if (event && event.stopPropagation) {
// 因此它支持W3C的stopPropagation()方法
event.stopPropagation();
} else {
// 否则，我们需要使用IE的方式来取消事件冒泡
window.event.cancelBubble = true;
}
}
</script>
</body>案例演示3：当点击a标签的时候，阻止a标签的默认跳转事件，采用事件阻止
<style>
#div1 {
width: 200px;
height: 200px;
background: pink;
}
#div2 {
width: 100px;
height: 100px;
background: coral;
}
</style>
</head>
<body>
<a href="https://www.baidu.com" id="a">打开百度，你就知道！</a>
<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>
var a = document.getElementById("a");
// 为a绑定单击事件
a.onclick = function () {
stopDefault();
};
// 阻止浏览器的默认行为
function stopDefault(event) {
if (event && event.preventDefault) {
// 阻止默认浏览器动作(W3C)
event.preventDefault();
} else {
// IE中阻止函数器默认动作的方式
window.event.returnValue = false;
}
return false;
}
</script>
</body>九、事件委派
我们希望只绑定一次事件，即可应用到多个的元素上，即使元素是后添加的，我们可以尝试将其绑定给元素的共同的祖先元素，也就是事件的委派。事件的委派，是指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件。事件委派是利用了事件冒泡，通过委派可以减少事件绑定的次数，提高程序的性能。
案例演示：为ul列表中的所有a标签都绑定单击事件
<body>
<ul id="u1">
<li><a href="javascript:;" class="link">超链接一</a></li>
<li><a href="javascript:;" class="link">超链接二</a></li>
<li><a href="javascript:;" class="link">超链接三</a></li>
</ul>
<script>
var u1 = document.getElementById("u1");
// 为ul绑定一个单击响应函数
u1.onclick = function (event) {
event = event || window.event;
// 如果触发事件的对象是我们期望的元素，则执行，否则不执行
if (event.target.className == "link") {
console.log("我是ul的单击响应函数");
}
};
</script>
</body>十、事件绑定
我们以前绑定事件代码只能一个事件绑定一个函数，那我们要是想一个事件对应多个函数，并且不存在兼容性的问题该如何解决呢？
案例演示：为按钮1的单击事件绑定两个函数，然后点击按钮2取消按钮1的单机事件绑定函数f1
<body>
<button id="btn1">按钮1</button>
<button id="btn2">按钮2</button>
<script>
function f1() {
console.log("output1 ...");
};
function f2() {
console.log("output2 ...");
};
// 为按钮1的单击事件绑定两个函数
addEventListener(document.getElementById("btn1"), "click", f1);
addEventListener(document.getElementById("btn1"), "click", f2);
// 点击按钮2取消按钮1的单机事件绑定函数f1
document.getElementById("btn2").onclick = function () {
removeEventListener(document.getElementById("btn1"), "click", f1);
};
/*为元素绑定事件兼容性代码*/
function addEventListener(element, type, fn) {
if (element.addEventListener) {
element.addEventListener(type, fn, false);
} else if (element.attachEvent) {
element.attachEvent("on" + type, fn);
} else {
element["on" + type] = fn;
}
}
/*为元素解绑事件兼容性代码*/
function removeEventListener(element, type, fnName) {
if (element.removeEventListener) {
element.removeEventListener(type, fnName, false);
} else if (element.detachEvent) {
element.detachEvent("on" + type, fnName);
} else {
element["on" + type] = null;
}
}
</script>
</body>十一、事件传播
事件的传播：关于事件的传播网景公司和微软公司有不同的理解
微软公司认为事件应该是由内向外传播，也就是当事件触发时，应该先触发当前元素上的事件，然后再向当前元素的祖先元素上传播，也就说事件应该在冒泡阶段执行。
网景公司认为事件应该是由外向内传播的，也就是当前事件触发时，应该先触发当前元素的最外层的祖先元素的事件，然后在向内传播给后代元素。
W3C综合了两个公司的方案，将事件传播分成了三个阶段：
捕获阶段：在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件
目标阶段：事件捕获到目标元素，捕获结束开始在目标元素上触发事件
冒泡阶段：事件从目标元素向它的祖先元素传递，依次触发祖先元素上的事件
注意：如果希望在捕获阶段就触发事件，可以将addEventListener()的第三个参数设置为true，一般情况下我们不会希望在捕获阶段触发事件，所以这个参数一般都是false，并且注意，IE8及以下的浏览器中没有捕获阶段，我们可以使用event.stopPropagation();取消事件传播。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/79779.html
