一、语法：标签.on类型 = 函数

标签：获取到的标签

1、document

2、window

3、body

4、获取到的标签

类型：

鼠标类：

1、单击：标签.onclick

2、双击：标签.ondblclick

3、移入：标签.onmouseover / 标签.onmouseenter ***

4、移出：标签.onmouseout / 标签.onmouseleave ***

5、移动：标签.onmousemove ***

6、按下：标签.onmousedown

7、弹起：标签.onmouseup

8、滚轮：标签.onmousewheel

9、右击：标签.oncontextmenu

键盘类：标签.on类型 = 函数

1、键盘按住：标签.onkeydown /标签.keypress

2、键盘弹起：标签.onkeyup ***

表单类：

1、获取焦点：标签.onfocus

2、失去焦点：标签.onblur

3、改变：标签.onchange ***

4、表单提交：标签.onsubmit ***

5、文本框内容变化：标签.oninput

window：

1、window.onscroll 当浏览器卷去的距离发生改变，触发执行

2、window.onload 当所有资源加载完成后，触发执行

3、window.onresize 当所有资源加载完成后，触发执行

二、事件流：

概念:事件从开始触发到执行结束的整个过程

三个阶段：

1、捕获阶段：由外向内找目标元素的过程

2、目标阶段：找到目标元素执行他的执行

3、冒泡阶段：由内向外离开目标元素的过程（祖宗标签的同类型事件会在冒泡阶段执行）

三、事件侦听器：

概念：另外一种绑定事件的方式

语法：标签.addEventListener(事件类型, 函数, 这个事件是否在后代表标签的捕获阶段执行（true/false）)

small.addEventListener('click', function() {
    console.log('小');
}, false)

解绑：

1、标签.on类型绑定的事件：标签.on类型 = null

div.onclick = function() {
    // 将div的点击事件解绑
    box.onclick = null
}

2、事件侦听器绑定的事件：标签.removeEventListener(事件类型, 对应的函数)

注意：解绑的类型和绑定的类型要保持一致；解绑的函数和绑定的函数必须是同一个

btn.onclick = function() {
    // 解绑div的点击事件
    box.removeEventListener('click', fn)
}


box.addEventListener('click', function() {
    console.log('盒子的点击事件');
})
// 如果使用事件侦听器绑定事件，使用匿名函数的话，就无法解绑了
btn.onclick = function() {
    // 解绑div的点击事件
    box.removeEventListener('click', function() {
        console.log('盒子的点击事件');
    })
}

四、事件对象：

概念：事件中用于记录当前事件所有详细信息的对象

获取：

1、事件函数的参数1

2、事件函数中用 window.event

作用：

获取鼠标位置：

1、相对于浏览器可视窗口:

e.clientX/e.clientY

2、相对于当前标签：

e.offsetX/e.offsetY

3、相当于当前文档：

e.pageX/e.pageY

获取键盘按键码：

e.keyCode：

1、字母是大写的阿斯克码

2、数字是数字的阿斯克码

3、回车 -- 13

4、空格 -- 32

5、上下左右 -- 38 40 37 39

组合键：

1、e.shiftKey

2、e.ctrlKey

3、e.altKey

获取事件类型：

e.type

获取鼠标按键码：

e.button

阻止事件冒泡：***

e.stopPropagation()


small.onclick = function(e) {
    // 阻止事件冒泡 - e.stopPropagation()
    e.stopPropagation()
    console.log('小');
}

阻止默认行为：

e.preventDefault()

在事件函数末尾 return false***

document.oncontextmenu = function(e) {
    e.preventDefault()
    console.log('右击了文档');
    // 阻止默认行为，还可在事件函数的末尾 - return false
    return false
}

获取精准的目标元素：

e.target

实现事件委托：

事件

一、语法： 标签.on类型 = 函数