全面剖析DOM事件模型

全面剖析DOM事件模型

什么是事件:事件是元素天生自带的默认行为
* 1 不论我们是否给其绑定了方法,当我们操作的时候,也会把对应的时间触发
什么是事件绑定: 目的是当事件行为触发的时候,可以做一些事情

常用的事件行为

[鼠标事件行为]

click  点击事件 (移动端click被识别为单机)
	dblclick  双击事件
	mousedown  鼠标摁下
	mouseup  鼠标抬起
	mousemove  鼠标移动
	mouseover  鼠标滑过
	mouseout   鼠标划出
	mouseenter   鼠标进入
	mouseleave   鼠标离开
	mousewhell     鼠标滚轮滚动

[键盘事件]

keydown  按下某个键
keyup  抬起某个键
keypress   除shift/Fn/CapsLock 键以外,其他键按住(连续触发)

[移动端的手指事件]

单手指事件模型  Touch
touchstart  手指摁下
touchmove   手指移动
touchend  手指松开
touchcancel    操作取消(一般应用于非正常状态下的操作结束)

多手指事件模型Gesture

gesturestar
gesturechange  /  gestureupdate 
gestrueend
gestruecancel

表单元素常用事件

focus  获取焦点
blur  失去焦点
change  内容改变

音视频常用事件

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

其他常用事件

load   加载完
unload  资源卸载
beforeunload    当前页面关闭之前
error 资源加载失败
scroll  滚动时间
readystatechange   AJAX 请求状态改变事件
contextmenu  : 鼠标右键触发

DOM 0事件绑定VS DOM2事件绑定

[DOM 0 ]
	元素 . on事件行为=function(){}
	[DOM 2]
	元素.addEventListener(事件行为, function(){},  true/false)

ES6~ES8中: 元素.attachEvent('on事件行为',function(){})

/* DOM0事件绑定的原理*/

DOM 0

原理: 给当前元素赋值,当事件触发浏览器会帮我们把赋的值,值执行,也导致只能给当前元素某一个事件行为绑定一个方法

box.onclick = function () {
console.log( '哈哈哈~~');
}
box.onclick = function () {
console. log( '呵呵呵~~');
输出的呵呵呵

ontransitionend : 动画结束产生的行为

box.onclick = function () {
console.1og( '哈哈哈~~');
//=>移除事件绑定: DOMO 直接赋值为nul1即可
box .onclick = null;
}

DOM2

/* DOM2事件绑定的原理: */

原理: 基于原型链查找机制,找到EventTarget,Prototype上的方法并且执行,此方法执行,会把当前某元素某个事件行为绑定的所有方法,存放到浏览器默认的事件池中(绑定几个方法,会向事件池存储几个),当事件行为触发,会把事件池中存储的对应方法,依次按照顺序执行"给当前元素某一个事件行为绑定多个不同方法"

box .addEventtistener( 'click', function () {
console.log( '哈哈哈~~');
}, false);
box .addEventListener('click', function () {
console. log( '呵呵呵~~');
}, false);
两个都输出

DOM2 事件绑定的时候,我们一般采用实名函数,
目的:这样可以基于实名函数去移除事件绑定

//=>D0M2事件绑定的时候，我们一般都采用实名函数
//=>目的:这样可以基于实名函数去移除事件绑定
function fn() {
console. log( '哈哈哈~~');
//=>移除事件绑定  从事件池中移除,所以需要指定好事件类型,方法等信息,要和绑定的时候一样才可以移出)
box . removeEventlistener('click', fn, false);
}
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('click', fn1, false);

DOMContent Loaded.

DOM0和DOM2的区别

1 语法上的
box . onclick=function(){}
box. addEventListener('click',function(){})
2.底层运行机制上的区别
DOMB就是给元素的某个属性绑定方法(有效绑定的方法只有一个)
DOM2是基于事件池机制完成，每增加一-个绑定的方法，都会往事件池中存放一个...当事件触发会依次执行事件池中的事情=>发布订阅其实就是模拟的事件池机制 (可以给同一个元素的某个事件绑定多个不同的方法)
3.DOM2中可以给- -些特殊的事件类型绑定方法，这些事件类型DOM0不支持绑定，例如: DOMContentLoaded、

DOM2的事件池机制

1.基于addEventlistener/attachEvent (IE6_{8)向事件池中追加方法:新版本浏览器会根据元素和事件类型对新增的方法做重复校验，但是IE6}8不可以;
2.当事件行为触发，会把事件池中的方法按照增加的顺序依次执行，但是IE6~8中执行的顺序是不固定的

window. onload VS $ ( document) .ready( )

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

事件对象和事件传播机制

事件对象:给元素的事假行为绑定方法，当事件行为触发方法会被执行，不仅被执行，而且还会把当前操作的相关信息传递给这个函数=>“事件对象”
如果是鼠标操作的,获取的是MouseEvent类的实例 +> 鼠标事件对象
鼠标事件对象-> MouseEvent. prototype -> UIEvent. prototype ->Event . prototype -> object. prototype
如果是键盘操作，获取的是KeyboardEvent类的实例=> 键盘事件对象除了以上还有:普通事件对象(Event)、手指事件对象(TouchEvent)

鼠标对象事件

box.onclick = function (ev) {
鼠标事件对象
includes() 方法用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false

clientX/clientY:当前鼠标触发点距离当前窗口左上角的X/Y轴坐标
pagex/pageY:触发点距离当前页面(整个文档)左上角的X/Y轴坐标
type: 触发的事件的类型
target : 事件源(操作的是哪个元素,那个元素就是事件源),在不兼容的浏览器中可以使用srcElement获取,也代表的是事件源
ev.preventDefault (): 用来阻止默认行为的放法,不兼容的浏览器中使用 ev.returnValue=false也可以阻止默认行为
ev.preventDefault():用来阻止默认行为的方法，不兼容的浏览器中用ev. ev.returnValue=false也可以阻止默认行为
ev.stopPropagation():阻止冒泡传播,不兼容的浏览器中用ev. cancelBubble=true也可以阻止默认行为
console.log(ev);
}

clientX/clientY和pagex/clientY:的区别

阻止a标签的三种方法

preventDefault : 通知浏览器不要执行与这个事件关联的动作

键盘事件对象

code & key : 存储的都是按键,code更细致
keyCode & which : 存储的是键盘按键对应的码值

方向键 : 37 38 39 40 => 左上右下
空格 :32 回车enter : 13 回退Back :8
delete 46 shift 16 ctrl 17

事件的传播机制

捕获阶段

目标阶段

冒泡传播

ev : 记录当前操作的信息 // 事件对象

//=>阻止冒泡传播
ev.stopPropagation( );

mouseenter vs mouseover