1、注册事件（绑定事件） 给元素添加事件，称为注册事件或绑定事件 注册事件有两种方式：传统方式和方法监听注册方式
传统注册方式 利用on开头的事件onclick /特点 注册事件的唯一性
方法监听注册事件 addEventListener 同一事件可以添加多个事件处理程序
2、删除事件（解绑事件） 传统注册方式 xx.onclick=null
方法监听 removeEventListener
3、DOM事件流 事件流描述的是从页面中接受时间的顺序
事件发生时会在元素节点之间按照特定顺序传播，这个传播过程就是事件流
DOM事件流3阶段 1、捕获阶段 2、当前目标阶段 3、冒泡阶段 好比往水里扔一个石头 石头沉入水底（事件捕获） 水泡往上冒出（冒泡阶段）
实际开发很少使用捕获事件 重点事件冒泡 onblur\onfous\onmouseencer\onmouseleave 这些事件是没有冒泡的
<body>
<div class="father">
<div class="son">son盒子</div>
</div>
<script>
// dom 事件流 三个阶段
// 1. JS 代码中只能执行捕获或者冒泡其中的一个阶段。
// 2. onclick 和 attachEvent（ie） 只能得到冒泡阶段。
// 3. 捕获阶段 如果addEventListener 第三个参数是 true 那么则处于捕获阶段 document -> html -> body -> father -> son
var son = document.querySelector('.son');
son.addEventListener('click', function() {
alert('son');
}, true);
var father = document.querySelector('.father');
father.addEventListener('click', function() {
alert('father');
}, true);
// 4. 冒泡阶段 如果addEventListener 第三个参数是 false 或者 省略 那么则处于冒泡阶段 son -> father ->body -> html -> document
var son = document.querySelector('.son');
son.addEventListener('click', function() {
alert('son');
}, false);
var father = document.querySelector('.father');
father.addEventListener('click', function() {
alert('father');
}, false);
document.addEventListener('click', function() {
alert('document');
})
</script>
4、事件对象
var div = document.querySelector('xx')
xx.onclick=function(event){}
1、event就是一个事件对象 写到我们的函数小括号里面 当形参看
2、事件对象有了事件才会存在 系统自动创建 不需要我们传递参数
3、事件对象可以自己命名 event \ e
4、事件发生后，根事件相关的一系列数据集合都放在这个对象里面 就是event 它有很多属性和方法
//事件对象常见属性和方法
5、事件委托
原理：不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，让后利用冒泡原理影响设置每个子节点
作用：只操作一次DOM，提高性能
6、常用鼠标事件
获取鼠标在页面中的坐标
document.addEventListener('click',function(e){
console.log(e);
console.log(e.clientX); //可视窗口的XY坐标
console.log(e.clientY); //可视窗口的XY坐标
console.log(e.pageX); //页面文档的XY坐标
console.log(e.pageY); //页面文档的XY坐标
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
img {
position: absolute;
top: 2px;
}
</style>
</head>
<body>
<img src="images/angel.gif" alt="">
<script>
var pic = document.querySelector('img');
document.addEventListener('mousemove', function(e) {
// 1. mousemove只要我们鼠标移动1px 就会触发这个事件
// console.log(1);
// 2.核心原理： 每次鼠标移动，我们都会获得最新的鼠标坐标， 把这个x和y坐标做为图片的top和left 值就可以移动图片
var x = e.pageX;
var y = e.pageY;
console.log('x坐标是' + x, 'y坐标是' + y);
//3 . 千万不要忘记给left 和top 添加px 单位
pic.style.left = x - 50 + 'px';
pic.style.top = y - 40 + 'px';
});
</script>
</body>
</html>
=========================================================================================================
/ 7、 常用键盘事件
<script>
// 常用的键盘事件
//1. keyup 按键弹起的时候触发
document.addEventListener('keyup', function() {
console.log('我弹起了');
})
//2. keydown 按键按下的时候触发 能识别功能键 比如 ctrl shift 左右箭头
document.addEventListener('keydown', function() {
console.log('我按下了down');
})
//3. keypress 按键按下的时候触发 不能识别功能键 比如 ctrl shift 左右箭头
document.addEventListener('keypress', function() {
console.log('我按下了press');
})
// 4. 三个事件的执行顺序 keydown -- keypress -- keyup
</script>
