1、事件概述
JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为。
简单理解： 触发— 响应机制。
网页中的每个元素都可以产生某些可以触发 JavaScript 的事件，例如，我们可以在用户点击某按钮时产生一个 事件，然后去执行某些操作。
2、事件三要素
- 事件源（谁）：触发事件的元素
- 事件类型（什么事件）： 例如 click 点击事件
- 事件处理程序（做啥）：事件触发后要执行的代码(函数形式)，事件处理函数
2.1、示例
<body>
<button id="btn">唐伯虎</button>
<script>
// 点击一个按钮，弹出对话框
// 1. 事件是有三部分组成 事件源 事件类型 事件处理程序 我们也称为事件三要素
//(1) 事件源 事件被触发的对象 谁 按钮
var btn = document.getElementById("btn");
//(2) 事件类型 如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下
//(3) 事件处理程序 通过一个函数赋值的方式 完成
btn.onclick = function () {
alert("点秋香");
};
</script>
</body>
3、执行事件的步骤
1、获取事件源；
2、注册事件（绑定事件）；
3、添加事件处理程序（采取函数赋值形式）；
3.1、示例
<body>
<div>123</div>
<script>
// 执行事件步骤
// 点击div 控制台输出 我被选中了
// 1. 获取事件源
var div = document.querySelector("div");
// 2.绑定事件 注册事件
// div.onclick
// 3.添加事件处理程序
div.onclick = function () {
console.log("我被选中了");
};
</script>
</body>
4、常见的事件
4.1、onclick
鼠标点击左键触发
4.2、onmouseover
鼠标经过触发
4.3、onmouseout
鼠标离开触发
4.4、onfocus
获取鼠标焦点触发
4.5、onblur
失去鼠标焦点触发
4.6、onmousemove
鼠标移动触发
4.7、onmouseup
鼠标弹起触发
4.8、onmousedown
鼠标按下触发
5、注册事件（2种方式）
给元素添加事件，称为注册事件或者绑定事件。
注册事件有两种方式：传统方式和监听注册方式。
5.1、传统注册方式
- 利用 on 开头的事件 onclick
<button onclick=“alert('hi~')”></button>btn.onclick = function() {}- 特点： 注册事件的唯一性
- 同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数
5.2、方法监听注册方式
- w3c 标准 推荐方式
addEventListener()它是一个方法- IE9 之前的 IE 不支持此方法，可使用
attachEvent()代替 - 特点：同一个元素同一个事件可以注册多个监听器
- 按注册顺序依次执行
6、事件监听
6.1、addEventListener()事件监听（IE9以后支持）
eventTarget.addEventListener()方法将指定的监听器注册到 eventTarget（目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数。
6.1.1、语法
eventTarget.addEventListener(type, listener[, useCapture])
6.1.2、参数
- type：事件类型字符串，比如 click 、mouseover ，注意这里不要带 on
- listener：事件处理函数，事件发生时，会调用该监听函数
- useCapture：可选参数，是一个布尔值，默认是 false
6.2、attacheEvent()事件监听（IE678支持）
eventTarget.attachEvent()方法将指定的监听器注册到 eventTarget（目标对象） 上，当该对象触发指定的事件时，指定的回调函数就会被执行。
6.2.1、语法
eventTarget.attachEvent(eventNameWithOn, callback)
6.2.2、参数
- eventNameWithOn：事件类型字符串，比如 onclick 、onmouseover ，这里要带 on
- callback： 事件处理函数，当目标触发事件时回调函数被调用
注意：IE8 及早期版本支持
6.3、注册事件兼容性解决方案
兼容性处理的原则：首先照顾大多数浏览器，再处理特殊浏览器
function addEventListener(element, eventName, fn) {
// 判断当前浏览器是否支持 addEventListener 方法
if (element.addEventListener) {
element.addEventListener(eventName, fn); // 第三个参数 默认是false
} else if (element.attachEvent) {
element.attachEvent("on" + eventName, fn);
} else {
// 相当于 element.onclick = fn;
element["on" + eventName] = fn;
}
}
6.4、示例
<button>传统注册事件</button>
<button>方法监听注册事件</button>
<button>ie9 attachEvent</button>
<script>
var btns = document.querySelectorAll("button");
// 1. 传统方式注册事件
btns[0].onclick = function () {
alert("hi");
};
btns[0].onclick = function () {
alert("hao a u");
};
// 2. 事件侦听注册事件 addEventListener
// (1) 里面的事件类型是字符串 必定加引号 而且不带on
// (2) 同一个元素 同一个事件可以添加多个侦听器（事件处理程序）
btns[1].addEventListener("click", function () {
alert(22);
});
btns[1].addEventListener("click", function () {
alert(33);
});
// 3. attachEvent ie9以前的版本支持
btns[2].attachEvent("onclick", function () {
alert(11);
});
</script>
7、删除事件（解绑事件）
7.1、传统注册方式
eventTarget.onclick = null;
7.2、方法监听注册方式
① eventTarget.removeEventListener(type, listener[, useCapture]);
② eventTarget.detachEvent(eventNameWithOn, callback);
7.3、示例
<div>1</div>
<div>2</div>
<div>3</div>
<script>
var divs = document.querySelectorAll("div");
divs[0].onclick = function () {
alert(11);
// 1. 传统方式删除事件
divs[0].onclick = null;
};
// 2. removeEventListener 删除事件
divs[1].addEventListener("click", fn); // 里面的fn 不需要调用加小括号
function fn() {
alert(22);
divs[1].removeEventListener("click", fn);
}
// 3. detachEvent
divs[2].attachEvent("onclick", fn1)
function fn1() {
alert(33);
divs[2].detachEvent("onclick", fn1);
}
</script>
7.4、删除事件兼容性解决方案
function removeEventListener(element, eventName, fn) {
// 判断当前浏览器是否支持 removeEventListener 方法
if (element.removeEventListener) {
element.removeEventListener(eventName, fn); // 第三个参数 默认是false
} else if (element.detachEvent) {
element.detachEvent("on" + eventName, fn);
} else {
element["on" + eventName] = null;
}
}
后记
如果你感觉文章不咋地
//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*//
如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！
