全面剖析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