什么是事件

网页中每一个元素都可以产生触发js事件，如：我们可以在用户点击某个按钮时产生一个事件，然后去执行

事件有三要素：

事件源：对哪个标签进行操作，按钮、输出框还是文本
事件类型：单击、双击还是按下空格
事件处理程序：要执行什么操作或者输出什么

针对事件三要素，有对应的执行事件的三个步骤：

获取事件
注册事件（绑定事件）
添加事件处理程序

1、鼠标事件

序号	鼠标事件	触发条件
1	`onclick`	鼠标点击左键触发
2	`onmouseover`	鼠标经过触发
3	`onmouseout`	鼠标离开触发
4	`onfocus`	获取鼠标焦点时触发
5	`onblur`	失去鼠标焦点时触发
6	`onmousemove`	鼠标移动时触发
7	`onmouseup`	鼠标离开时触发
8	`onmousedown`	鼠标按下时触发

注意：onclick 和 onfocus的区别：

onclick：只有鼠标点击了才会触发事件处理程序
onfocus：只要获取焦点，就是我们可以鼠标点击的方式获取焦点、也可以使用tab按键来获取焦点

语法：

<button>勇气</button>
复制代码

let btn = document.querySelector('button')
btn.onfocus = function() {
    alert('人潮拥挤我能感觉你 放在我手心里')
}
复制代码

2、键盘事件

事件除了使用鼠标触发，还可以使用键盘触发

序号	键盘事件	触发条件
1	`onkeyup`	某个键盘按键被松开时触发
2	`onkeydown`	某个键盘按键被按下时触发
3	`onkeypress`	某个键盘按键被按下时触发，但是它不识别功能键，比如 `ctrl`、`shift` 箭头等

栗子：

// 按键松开时触发
document.onkeyup = function() {
    alert('人潮拥挤我能感觉你 放在我手心里')
}

// 按键按下时触发
document.onkeydown = function() {
    alert('爱真的需要勇气')
}

// 功能键除外
document.onkeypress = function() {
    alert('去相信会在一起')
}
复制代码

三个事件的识别顺序：keydown => keypress => keyup

3、注册事件

给元素添加事件，称为 注册事件 或 绑定事件

注册事件有两种方式：

传统方式
方法监听方式

3.1 传统方式

直接给元素绑定相关事件

<button onclick='alert("hi~")'><button>
btn.onclick = function() { alert("hi~") }

特点：注册事件的唯一性

同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数会覆盖前面注册的处理事件

let btn = document.querySelector('button')
btn.onclick = function() {
    alert('人潮拥挤我能感觉你 放在我手心里')
}
// 点击执行该语句
btn.onclick = function() {
    alert('爱真的需要勇气')
}
复制代码

3.2 方法监听方式

addEventListener() ：是一个方法（IE9之前不支持）
attachEvent()：可用于替换addEventListener()（少用）

特点：同一个元素同一个事件可以添加多个监听器

按照注册顺序依次执行

1、`addEventListener()` 监听方式

eventTarget.addEventListener(type, listener[, useCapture])
复制代码

addEventListener() 方法将指定的监听器注册到 eventTarget (目标对象) 上，当该对象触发指定事件时，就会执行事件处理函数

type：事件类型，如：click、mouseover ，注意：不需要带 on
listener：事件处理函数，事件发挥时，会掉调用该监听函数
useCapture：可选参数，是一个布尔值，默认为false

useCapture 为false：在捕获阶段调用该监听函数

useCapture 为true：在冒泡阶段调用该监听函数

// 点击按钮先后执行两个语句
btn.addEventListener('click', function() {
    alert('爱真的需要勇气')
})

btn.addEventListener('click', function() {
    alert('人潮拥挤我能感觉你 放在我手心里')
})
复制代码

2、`attachEvent` 事件监听方式

eventTarget.attachEvent(eventNameWithon, callback);
复制代码

attachEvent() 方法将指定的监听器注册到 eventTarget （目标对象）上，当该对象触发指定的事件时，指定的回调函数就会被执行

eventNameWithon：事件类型，比如 onclick 、onmouseover，注意：这里要带 on
callback ：事件处理函数

btn.attachEvent('onclick', function() {
    alert('人潮拥挤我能感觉你 放在我手心里')
})
复制代码

IE11已不支持该方法

4、删除事件

1、传统删除方式

eventTarget.onclick = null;
复制代码

栗子：

btn.onclick = function() {
    alert('爱真的需要勇气')
    // 删除事件，只能点击一次
    btn.onclick = null
}
复制代码

2、方法监听删除方式

eventTarget.removeEventListener(type, listener[, useCapture]);
复制代码

栗子：

btn.addEventListener('click', foo)

function foo() {
    alert('爱真的需要勇气')
    btn.removeEventListener('click', foo)
}
复制代码

attachEvent 事件监听方式

eventTarget.detachEvent();
复制代码

5、事件对象 `e`

官方解释：event 对象代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态

简理理解：事件发生后，跟事件相关的一系列信息的集合都放到一个对象里面。这个对象就是事件对象 event

它有很多属性和方法，比如：

是谁绑定了这个事件
鼠标绑定事件的话，会得到鼠标的相关信息，如鼠标位置
键盘绑定事件的话，会得到键盘的相关信息，如按了哪个键

5.1 事件对象使用方法

// event 就是事件对象
btn.onclick = function(event) {
    console.log(event);
}

btn.addEventListener('click', function(event) {
    console.log(event);
})
复制代码

event 是个形参，js已经帮我们设定为事件对象，不需要传实参
event 事件对象我们可以写成 e（推荐）

5.2 事件对象常见属性和方法

事件对象属性方法	描述	说明
`e.target`	返回触发事件的对象	标准
`e.srcElement`	返回触发事件的对象	非标准 ie6~8使用
`e.type`	返回事件的类型	比如`click mouseover` 不带`on`
`e.cancelBubble`	该属性阻止冒泡	非标准 ie6~8使用
`e.returnValue`	该属性阻止默认事件（默认行为）	非标准 ie6~8使用比如不让链接跳转
`e.preventDefault()`	该方法阻止默认事件（默认行为）	标准比如不让链接跳转
`e.stopPropagation()`	阻止冒泡	标准

this 和 e.target 都是指绑定的事件对象，那它们有什么区别呢？

e.target：获取触发事件的对象（元素）
this：this返回的是绑定事件的对象（元素）

<button>勇气</button>
<ul>
    <li>最好的我们</li>
</ul>
复制代码

var btn = document.querySelector('button')
var ul = document.querySelector('ul')
// 两者返回相同的事件对象
btn.addEventListener('click', function(e) {
    console.log(e.target);  // <button>勇气</button>
    
    console.log(this);  // <button>勇气</button>
})

// 点击li，
ul.addEventListener('click', function(e) {
    console.log(e.target);  // <li>最好的我们</li>
    
    console.log(this);  // <ul>...</ul>
})
复制代码

5.3 其它鼠标事件

1、禁止鼠标右键菜单

contextmenu 主要控制应该何时显示上下文菜单，主要用于我们取消默认的上下文菜单

document.addEventListener('contextmenu', function(e) {
	e.preventDefault();
})
复制代码

当我们在页面上单击右键时，不会出现菜单让我们选择

2、禁止鼠标选中

selectstart 开始选中

<body>
    <div>我就要复制这段文字</div>
    <script>
        // selectstart  禁止选中文字
        document.addEventListener('selectstart', function(e) {
            e.preventDefault();
        })
    </script>
</body>
复制代码

无法复制文本

3、鼠标事件对象

序号	鼠标事件对象	说明
1	`e.clientX`	返回鼠标相对于浏览器窗口可视化的X坐标
2	`e.clientY`	返回鼠标相对于浏览器窗口可视化的Y坐标
3	`e.pageX`	返回鼠标相对于文档页面的X坐标 IE9+支持
4	`e.pageY`	返回鼠标相对于文档页面的Y坐标 IE9+支持
5	`e.screenX`	返回鼠标相对于电脑屏幕的X坐标
6	`e.screenY`	返回鼠标相对于电脑屏幕的Y坐标

栗子：

document.addEventListener('click', function(e) {
    console.log(e.clientX);
    console.log(e.clientY);

    console.log(e.pageX);
    console.log(e.pageY);
})
复制代码