image.png

1、DOM0 事件绑定

语法：元素.on事件行为=function(){}
原理：给元素的私有属性赋值，当事件触发，浏览器会帮我们把赋的值执行，但是这样也导致 “只能给当前元素某一个事件行为绑定一个方法”

box.onclick = function () {
    console.log('哈哈哈~~');
}
box.onclick = function () {
    console.log('呵呵呵~~');
} 
复制代码

只输出后面的：

image.png

移除

box.onclick = function () {
    console.log('哈哈哈~~');
    //=>移除事件绑定：DOM0直接赋值为null即可
    box.onclick = null;
}
复制代码

2、DOM2 事件绑定

语法：
- 元素.addEventListener(事件行为,function(){},true/false)
  - true/false 可以省略，默认是false
  - IE6~8中：元素.attachEvent('on事件行为',function(){})
原理：
- 基于原型链查找机制，找到EventTarget.prototype上的方法并且执行，此方法执行，会把给当前元素某个事件行为绑定的所有方法，存放到浏览器默认的事件池中（绑定几个方法，会向事件池存储几个）；
- 当事件行为触发，会把事件池中存储的对应方法，依次按照顺序执行 “给当前元素某一个事件行为绑定多个不同方法”
事件池特点:
- 基于addEventListener向事件池增加方法，存在去重的机制 “同一个元素，同一个事件类型，在事件池中只能存储一遍这个方法，不能重复存储”

box.addEventListener('click', function () {
    console.log('哈哈哈~~');
}, false);
box.addEventListener('click', function () {
    console.log('呵呵呵~~');
}, false);
复制代码

两个都能输出：

image.png

绑定注意点：DOM2事件绑定的时候，我们一般都采用实名函数
- 目的：这样可以基于实名函数去移除事件绑定
- 语法：box.addEventListener('click', fn, false);

function fn1(){ console.log(1); }
function fn2(){ console.log(2); }
function fn3(){ console.log(3); }
box.addEventListener('click', fn2, false); 
box.addEventListener('click', fn3, false); 
box.addEventListener('click', fn1, false); 
//=>基于addEventListener向事件池增加方法，存在去重的机制 “同一个元素，同一个事件类型，在事件池中只能存储一遍这个方法，不能重复存储”
box.addEventListener('click', fn1, false); // 所以此步跳过，不再存储
box.addEventListener('mouseover', fn1, false);

image.png

移除绑定：从事件池中移除，所以需要指定好事件类型、方法等信息（要和绑定的时候一样才可以移除）
- 语法：box.removeEventListener('click', fn, false)

function fn() {
    console.log('哈哈哈~~');
    //=>移除事件绑定：从事件池中移除，所以需要指定好事件类型、方法等信息（要和绑定的时候一样才可以移除）
    box.removeEventListener('click', fn, false);
}
box.addEventListener('click', fn, false);

3、特别注意的几点

-1）DOM0和DOM2可以混在一起用：执行的顺序以绑定的顺序为主

box.addEventListener('click', function () {
    console.log('哔咔哔咔~~');
});
box.onclick = function () {
    console.log('哇咔咔~~');
}
box.addEventListener('click', function () {
    console.log('call~~');
});

image.png

-2）DOM0 比 DOM2 快
-3）DOM0中能做事件绑定的事件行为，DOM2都支持；DOM2里面一些事件，DOM0不一定能处理绑定，例如：transitionend、DOMContentLoaded...

box.style.transition = 'opacity 1s';
box.ontransitionend = function () {
    console.log('哇咔咔~~');
}

box.addEventListener('transitionend', function () {
    console.log('哇咔咔~~');
}); 

window.addEventListener('load', function () {
    //=>所有资源都加载完成触发
    console.log('LOAD');
});
window.addEventListener('DOMContentLoaded', function () {
    //=>只要DOM结构加载完就会触发
    console.log('DOMContentLoaded');
}); 

//=>$(document).ready(function(){})
$(function () {
    //=>JQ中的这个处理（DOM结构加载完触发）采用的就是DOMContentLoaded事件，并且依托DOM2事件绑定来处理，所以同一个页面中，此操作可以被使用多次
});
/* JQ中的事件绑定采用的都是DOM2事件绑定，例如：on/off/one */
复制代码

4、`window.onload` 和 `$(document).ready()`的区别

-1）$(document).ready()
- 采用的是DOM2事件绑定，监听的是DOMContentLoaded这个事件，所以只要DOM结构加载完成就会被触发执行，
- 而且同一个页面中可以使用多次（绑定不同的方法，因为基于DOM2事件池绑定机制完成的）
-2）window.onload
- 必须等待所有资源都加载完成才会被触发执行，采用DOM0事件绑定，同一个页面只能绑定一次（一个方法），
- 想绑定多个也需要改为window.addEventListener('load', function () {})DOM2绑定方式

5、DOM0 和 DOM2 的传播的区别

DOM0 绑定的方法，只能在目标阶段和冒泡阶段触发执行
DOM2绑定的方法，我们可以控制在捕获阶段执行
- 元素.addEventListener(事件行为,function(){},true/false)
- 第三个参数：不写默认是 false
  - false：代表在冒泡阶段执行此方法
  - true：代表在捕获阶段执行此方法（基本没用过）

浏览器常用的事件行为

image.png

1、鼠标事件

鼠标点击：鼠标按下弹起算一次点击

onclick：点击（移动端click被识别为单击）
ondblclick：双击（大概是在 300ms 之间点击两次）
oncontextmenu：右键点击

鼠标按下：不分左右键或者滚轮，只要按下/抬起就会触发

onmousedown：鼠标按下
onmouseup：鼠标抬起

鼠标滚动

onmousewhell：鼠标滚轮滚动

鼠标移动：鼠标尖端移动触发

onmousemove：鼠标移动

鼠标经过

onmouseout：鼠标滑出
onmouseover：鼠标滑过（在表面经过即可）

鼠标进入

onmouseenter：鼠标进入（进入到里面）
onmouseleave：鼠标离开

思考：onmouseover 和 onmouseenter 的区别

image.png

mouseover/mouseout 存在冒泡机制。划过和划出（鼠标在谁身上，相当于划过谁）
mouseenter/mouseleave 不存在冒泡传播机制。进入和离开。

如何选用：项目中，如果一个容器中有后代元素，想要鼠标进入和离开做啥事，我们一般都用mouseenter和mouseleave。

image.png

2、键盘事件

能绑定键盘事件的有：input、textarea、window、document.body 等

如果想给不能编辑的元素绑定键盘事件，需要给这个元素加一个:contenteditable = "true"

onkeydown：按下某个键
onkeyup：抬起某个键
onkeypress：除Shift/Fn/CapsLock键以外，其它键按住（连续触发）

3、表单事件

使用范围：input ......

onfocus：获取焦点（光标进入input时，触发事件）
onblur：失去焦点（光标离开input时，触发事件）
oninput：内容改变（只要内容发生改变就会触发）
onchange：内容改变（并且失焦的时候才会触发）

4、音视频事件

使用范围：音频、视频

canplay：可以播放（资源没有加载完，播放中可能会卡顿）
canplaythrough：可以播放（资源已经加载完，播放中不会卡顿）
play：开始播放
playing：播放中
pause：暂停播放

5、系统事件

其它常用事件

window.onscroll：页面滚动
window.onresize：页面大小发生改变的时候触发
window.onload：页面资源加载完毕之后触发
img.onload ：图片加载完成
window.onbeforeunload：当前页面关闭之前
window.onerror：资源加载失败

6、移动端事件

单手指事件模型 Touch

ontouchstart：手指碰到屏幕（手指按下）
ontouchmove：手指在屏幕上移动
ontouchend：手指离开屏幕（手指松开）
ontouchcancel：操作取消（一般应用于非正常状态下操作结束）

多手指事件模型 Gesture

ongesturestart：手指碰到屏幕（手指按下）
ongesturechange / ongestureupdate：手指在屏幕上移动
ongestureend：手指离开屏幕（手指松开）
ongesturecancel：操作取消（一般应用于非正常状态下操作结束）

7、其他事件

transitionend：动画过渡完成
onreadystatechange：AJAX请求状态改变事件
......

事件行为还有很多，这里我们暂时列举这些；更多的内容可以参考 MDN，事件参考；或者可以查看元素的属性（属性中onxxx就是元素拥有的事件行为）

链接：https://juejin.im/post/6844904144587718664

DOM2级事件的核心运行机制

DOM2级事件的核心运行机制

1、DOM0 事件绑定

2、DOM2 事件绑定

3、特别注意的几点

4、`window.onload` 和 `$(document).ready()`的区别

5、DOM0 和 DOM2 的传播的区别

浏览器常用的事件行为

1、鼠标事件

思考：onmouseover 和 onmouseenter 的区别

2、键盘事件

3、表单事件

4、音视频事件

5、系统事件

6、移动端事件

7、其他事件

DOM2级事件的核心运行机制

1、DOM0 事件绑定

2、DOM2 事件绑定

3、特别注意的几点

4、window.onload 和 $(document).ready()的区别

5、DOM0 和 DOM2 的传播的区别

浏览器常用的事件行为

1、鼠标事件

思考：onmouseover 和 onmouseenter 的区别

2、键盘事件

3、表单事件

4、音视频事件

5、系统事件

6、移动端事件

7、其他事件

4、`window.onload` 和 `$(document).ready()`的区别