目录
事件绑定方式
方式一
利用on开头的事件，例如onclick
同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数
javascript
let but = document.querySelectorAll("button");
but[0].onclick = function () {
alert(1);
}
but[0].onclick = function () {
alert(222);
}
输出222，1被覆盖方式二
addEventListener()
通过这个方法也可以为元素绑定响应函数
可以同时为一个元素的相同事件同时绑定多个响应函数
这样当事件被触发时，响应函数将会按照函数的绑定顺序执行
参数：
1:事件的字符串 不要on
2:回调函数，当事件触发时，会被调用
3:是否在捕获阶段触发事件，需要一个布尔值，一般都是false
注意：ie8及以下不支持
javascript
let btn = document.querySelector("button");
btn[1] = addEventListener("click", () => {
alert(1);
})
btn[1] = addEventListener("click", () => {
alert(222);
})
输出1 和222方式三（一般不用）
attachEvent(type,listener) 只有ie8中可以使用，其他浏览器不能用
参数：
type：事件的字符串，要on
listener：回调函数
注意：
这个方法也可以同时为一个事件绑定多个处理函数，不同的是它后绑定先执行
javascript
btns[2].attachEvent("onclick", function () {
alert("attachEvent 1");
});
btns[2].attachEvent("onclick", function () {
alert("attachEvent 2");
});事件的解绑
解绑方式和绑定方式一一对应
方式一
语法：eventTarget.οnclick=null
javascript
// 1、传统注册方式
btns[0].onclick = () => {
alert("1");
// 事件的解绑
btns[0].onclick = null;//这样只有第一次点击会出现弹窗，后续点击无反应
};方式二
语法：eventTarget.removeEventListener(type,listener)
javascript
btns[1].addEventListener("click", fun);//这里要把函数拿出来
function fun() {
alert(1);
btns[1].removeEventListener("click", fun);
}方式三
javascript
btns[2].attachEvent("onclick", fun1);
function fun1() {
alert("attachEvent 1");
btns[2].detachEvent("onclick", fun1);
}事件流
js代码中只能执行捕获或者冒泡其中的一个阶段，
其中onclick和attachEvent只能得到冒泡阶段，
我们可以通过addEventListener(type,listener,[useCapture])中的第三个参数来分别演示冒泡和捕获
useCapture：可选，是否在捕获阶段触发事件，需要一个布尔值，默认是false，在冒泡阶段处理程序，如果是true，就是在捕获阶段处理程序
捕获阶段，由外向内，如下代码输出3 2 1
javascript
<body>
<div class="box">
<div class="box1">
<button>按钮</button>
</div>
</div>
<script>
var box = document.querySelector(".box");
var box1 = document.querySelector(".box1");
var btn = document.querySelector("button");
btn.addEventListener("click", () => {
alert(1);
}, true);
box1.addEventListener("click", () => {
alert(2);
}, true);
box.addEventListener("click", () => {
alert(3);
}, true);
</script>
</body>注意：
实际开发中我们很少使用事件捕获，我们更关注事件冒泡
有些事件是没有冒泡的，比如onblur、onfoucs、onmuseenter、onmouseleave
事件冒泡有时我们需要，有时需要避免
事件对象
简单理解：事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象，它有很多的属性和方法
javascript
box1.onmousemove = function (event) {};event 就是一个事件对象，写在我们侦听函数的小括号里面 ，当形参来看，这个形参，我们可以自己命名，例如event、evt、e等
事件对象是当事件触发了，系统自动给我们创建的，不需要我们去传入实参
事件对象在ie低版本中有兼容性问题，其兼容性的写法：event = event || window.event;，一般不用考虑
事件对象属性
e.target：返回触发事件的对象
e.preventDefault()：阻止默认行为 非 ie6-8使用
e.stopPropagation()：阻止冒泡 非 ie6-8使用
e.offsetX、e.offsetY：获取鼠标相对于当前元素的位置
e.clientX、e.clientY：获取鼠标相对于浏览器可见窗口的坐标
e.pageX、e.pageY：获取鼠标相对于文档页面的坐标
e.screenX,e.screenY：返回鼠标相对于电脑屏幕的x坐标
事件委托
不给每个子节点单独设置事件监听，而是将事件统一绑定给元素的共同的祖先元素，然后利用冒泡原理影响设置每个子节点，通过事件委派可以减少事件绑定的次数，提高程序的性能；对于新增或删除的元素，事件不需要重新绑定
javascript
<body>
<!-- 需求：为每个超链接都绑定单击响应函数 -->
<button id="btn01">增加链接</button>
<ul id="u1">
<li><a href="#" class="link">链接一</a></li>
<li><a href="#" class="link">链接二</a></li>
<li><a href="#" class="link">链接三</a></li>
</ul>
<script>
//点击按钮，新建超链接
var btn01 = document.getElementById("btn01");
var u1 = document.querySelector("#u1");
btn01.onclick = function () {
//新建一个li
var li = document.createElement("li");
li.innerHTML = '<a href="#" class="link">新建超链接</a>';
u1.appendChild(li);
};
//为ul绑定单击响应函数
u1.onclick = function (event) {
console.log(event.target);//指向子元素
if (event.target.className == "link") {
alert("hi");
}
};
</script>
</body>键盘事件
|------------|--------------|
| 键盘事件 | 触发条件 |
| onkeyup | 某个键盘按键被松开时触发 |
| onkeydown | 某个键盘按键被按下时触发 |
| onkeypress | 某个键盘按键被按下时触发 |
e.keyCode 返回该键的ASCII值 键盘上每个字符有对应的数字
javascript
<body>
<input type="text" />
<script>
document.onkeydown = function (e) {
console.log(e.keyCode);
};
//需求： 使文本框不能输入数字
var int = document.querySelector("input");
int.onkeydown = function (e) {
if (e.keyCode >= 48 && e.keyCode <= 57) {
/* 在文本框输入内容，属于keyCode的默认行为
return false则会取消默认行为 */
return false;
}
};
</script>
</body>