JS基础（十）DOM0和DOM2级事件

JS中的DOM0和DOM2事件

JS中的事件基础及核心原理以及项目实战

事件的定义

事件：元素天生具备的行为方式（和写不写JS代码没有关系）【onclick不是事件，click才是事件，浏览器会把一些常用事件挂载到元素对象的私有属性上，让我们可以实现DOM0事件绑定】，当我们去操作元素的时候会触发元素的很多事件
事件绑定：给当前元素的某个事件绑定方法，目的是让当前元素某个事件被触发时，做出一些反应

事件绑定的两种方法

• DOM0级事件绑定
  • curEle.onclick=function(){};
• DOM2级事件绑定
  • 标准浏览器：curEle.addEventListener(‘click’,function(){},false)
  • IE6-8:curEle.attachEvent(‘onclick’,function(){})

DOM0事件

常用事件汇总

[PC端]

• 表单元素常用的事件

• blur:失去焦点
• focus:获取焦点
• change:内容改变
• select:被选中事件

• 键盘常用事件行为

• keydown:键盘按下
• keyup:键盘抬起
• keypress:键盘按下（中文输入法不能触发，英文状态下可以触发，因为文本被输入到文本框中）

• 鼠标常用事件行为

• click:点击（不是单击）
• dblclick:双击（300ms之内连续触发两次点击事件）
• mouseover:鼠标滑过
• mouseout:鼠标滑出
• mouseenter: 鼠标进入
• mouseleave: 鼠标离开
• mousedown:鼠标按下（左键）
• mouseup:鼠标左键抬起
• mousewheel:鼠标滚轮滚动

• 其他常用事件行为

• load:加载成功
• error:加载失败
• scroll:
• resize:大小改变事件:window.onresize:浏览器窗口改变大小触发该事件

[移动端

移动端键盘一般都是虚拟键盘，虽然存在keydown,keyup,但兼容不好，使用input事件代替
移动端没有鼠标，所以鼠标类事件在移动端兼容性非常差，mouse类事件基本无法使用
移动端大部分事件是靠手指完成的，所以它独有手指事件
-单手指事件：touchstart touchmove touchend touchcancel
-多手指事件：gesturestart gestuerchange gestuerend…..
移动端还有很多事件是靠硬件完成的：手机传感器，陀螺仪，重力感应器等
移动端兼容click事件，它把click当做单击使用（会有300MS的延迟事件）

事件对象

对以下事件绑定的严谨版描述：基于DOM0级事件的绑定方式，给box的click事件绑定了一个方法。当手动触发click事件时，会把绑定的方法执行
box.onclick=function(e){
arguments[0]===e;//=>e就是事件对象
e=e||window.event;(兼容版获取事件对象的写法)
};
当元素的某个事件行为被触发，不仅会把之前绑定的方法执行，还会给绑定的方法传递一个值（浏览器默认传递的），我们把传递的这个值称为事件对象：（标准浏览器）

• 这个值是个对象类型的值，里面存储了很多的属性和方法，
• 这些存储的值都是当前本次操作的基本信息，例如：鼠标位置，触发行为类型。。。。【只和本次操作有关,一个页面中只有一个事件对象】

IE6-8下关于事件对象的机制

• 方法被触发执行时，浏览器并没有把事件对象当做值传递给函数；(e是undefined)
• IE6-8下的事件对象需要我们通过window.event来获取

鼠标事件对象（mouseevent）

• clientX/clientY:当前鼠标触发点距离当前窗口左上角的X/Y坐标
• pageX/pageY:当前鼠标触发点距离BODY左上角的X/Y坐标(IE6-8中没有这两个属性)
  兼容处理

box.onckick=function(e){
      if(typeof e==='undefined'){
      e=window.event;   //->处理e
      //->pageX/pageY
      e.pageX=e.clientX+(document.documentElement.scrollLeft||document.body.scrollLeft);
      e.pageY=e.clientY+(document.documentElement.scrollTop||document.body.scrollTop);
      //->target
      e.target=e.srcElement;
      //->preventDafault
      e.preventDefault=function(){
          e.returnValue=false;
      };
      //=>stopPropagation
      e.stopPropagation=function(){
          e.cancelBubble=true
      }
      }
      }//该兼容比较完整，当处理一个简单兼容时可简单处理

• type:当前触发事件的类型
• target：事件源（当前鼠标操作的是那个元素）（IE6-8没有该属性，用srcElement这个属性代表事件源）
• preventDefault:作用：阻止事件的默认行为；（IE6-8没有该方法，使用 returnValue=false处理）
• stopPropagation:阻止事件的冒泡传播 [IE6-8不兼容，使用cancelBubble=true来处理]

键盘事件对象(keyboardEvent)

• code:当前按得键盘按键是哪一个 【IE6-8没有这个属性】key属性和code一样，储存形式不一样
• keyCode：存储的是当前按键的码值（大部分按键都有自己的码值）
• which:和keyCode一样，也是当前按键的码值（which不兼容IE6-8）
• 这几个码值需要记住（删除：8 、 回车：13、 空格：32、 tab ：9、）

手指事件对象（TouchEvent）

touches&&changedTouches&&targetTouches:存储的是当前屏幕上每一个手指操作的位置信息

• touches：只有手指在屏幕上我们才能获取相关信息，手指离开后，这样touchend事件中我们就无法通过touches获取手指信息
• changedTouches：手指在屏幕上时，和touches一样可以获得相关信息，手指离开后也可以记录手指离开屏幕一瞬间所在的位置信息（最常用的）

touchesEvent
    type:'touchStart',
    target:事件源，
    touches:
    0:{
    clientX:xxx,
    clientY:xxx,
    pageX:xxx,
    pageY:xxx,
    .....
    }
    ...
    lentth：1
    chan

详细处理

let oBox = document.querySelector('#box');
oBox.ontouchstart = function (e) {
   let point = e.changedTouches[0];
   //=>记录当前手指的起始坐标位置(记录在当前元素的自定义属性上)
  this.strX = point.pageX;
    this.strY = point.pageY;
 this.isMove = false;
};
oBox.ontouchmove = function (e) {
   let point = e.changedTouches[0];
  //=>一般我们手指操作，都会或多或少的发生一些偏移（习惯性偏移），此时不应该算作滑动，只有滑动的距离超出一定范围，我们按照滑动处理即可（一般都是把10px作为偏差值）
    let changeX = point.pageX - this.strX,
     changeY = point.pageY - this.strY;
    this.changeX = changeX;
  this.changeY = changeY;
   if (Math.abs(changeX) > 10 || Math.abs(changeY) > 10) {
       this.isMove = true;
   }
};
oBox.ontouchend = function (e) {
    let point = e.changedTouches[0];
   //=>手指离开的时候：验证是否发生滑动
  if (!this.isMove) {
        //=>点击操作
        console.log('我是点击操作~~');
        return;
    }
   //=>滑动操作
  let dir = null;
    if (Math.abs(this.changeX) > Math.abs(this.changeY)) {
      //=>左右滑动
       dir = this.changeX < 0 ? 'LEFT' : 'RIGHT';
    } else {
       //=>上下滑动
        dir = this.changeY < 0 ? 'UP' : 'DOWN';
    }
   console.log(`当前手指滑动的方向为：${dir}`);
};

手机移动端的点击、长按、滑动等都是基于内置的原生的touchstart/touchmove/touchend事件模拟出来的一些效果，没有现成的事件
市场上有许多成熟的类库，我们直接使用即可
1、fastclick.js:目的就是解决了移动端click事件300ms的延迟问题
2、百度云touch手指事件库
3、hammer.js
4、zepto.js:提供移动端事件操作的板块，也是目前市场上使用率最高的

阻止事件的默认行为

A标签的默认行为及阻止

1.超链接：点击A标签可以实现页面的跳转
2、锚点定位：通过HASH值定位到当前页面的指定ID盒子位置
- 首先URL地址栏末尾追加了一个HASH;
- 如果地址栏包含hash值，浏览器在渲染页面后，会默认定位到hash值的位置

真实项目中我们想用A标签做一个普通按钮（优势：它的：hover样式是兼容所有浏览器的）此时，要把之前提到的两个默认行为阻止掉才可以

阻止A标签的默认行为

在HTML中阻止默认行为（常用）

• ;

在JS中阻止

• 单点击A标签时 首先会触发click事件
• 其次按照href中的地址页面进行跳转
  link.onclick=function(){ return false;}//阻止页面行为
  link.onclick=function(e){
  ​ e=e||window.event;
  ​ e.preventDefault?e.preventDefault():e.returnValue=false;
  ​ }

事件的传播机制

事件传播有三个阶段

Event.prototype：

- 0  NONE:默认值，不代表任何意思
- 1  `CAPTURING_PHASE  捕获阶段`
- 2 ` AT_TARGET  目标阶段（当前事件源）`
- 3  `BUBBLING _PHASE :冒泡阶段`

当前元素的某个事件行为被触发，它的所有的祖先元素（一直到document）的相关事件行为也会被触发执行（由里向外），我们把这种传播机制叫做冒泡传播

mouseover和mouseenter事件的区别

mouseover：鼠标滑到元素上：存在事件的冒泡传播机制 mouseenter：鼠标进入元素里；浏览器阻止了它的冒泡传播机制； 不同点

区别	mouseover	mouseenter
区别 1	存在冒泡传播机制	冒泡传播机制被浏览器阻止
区别 2	当鼠标从父元素进入到子元素时，首先会触发父元素的mouseout事件，再触发子元素的mouseover事件，由于冒泡传播机制，导致父元素的mouseover事件也被触发	当鼠标从父元素进入到子元素时,并不会触发父元素的mouseout事件，但是触发了子元素的mouseenter事件，由于浏览器阻止了它的冒泡传播，所以父元素的该事件不会被触发

事件委托（very important）

原理：利用事件的冒泡传播机制完成（mouseenter不存在冒泡传播）

当一个容器内的很多元素都要为同一事件绑定方法，那么我们只需要给外层容器的该事件绑定方法，当里层元素的事件被出发时，会通过冒泡传播机制传到最外层容器那里，触发外层容器绑定的方法执行，在方法执行时，我们只需要根据判断事件源的不同而做不同的事情。（利用事件委托可提高50%左右的性能）

拖拽当中鼠标焦点丢失问题

在拖拽登陆窗口的案例中（11.25） 当鼠标移动速度过快时，鼠标离开了h3，因为盒子跟不上奔跑的速度，所以导致以下几个问题 - 鼠标在h3之外飞，不会触发H3的mousemove，盒子就不动了； - 鼠标在h3之外抬起，也不会触发h3的mouseup，那么原有绑定的dragmove无法被移除，鼠标重新进入h3,此时不管鼠标是否按下，都会触发H3的dragmove； 原因：鼠标飞出h3,再怎么操作就和h3没有关系 解决方案： 1.把mouseup和mousemove事件绑定给document,原因：不管鼠标怎么飞，都飞不出document；（使用箭头函数）只要你鼠标还在文档中，那么mousemove和mouseup永远生效 2.setCapture（不兼容谷歌，支持Ie）

DOM2事件绑定

 //=>标准浏览器
 oBox.addEventLister('click',function(e){
 //this:obx
 },false)
 //false=>让事件在冒泡传播时执行
//true=>让事件在捕获阶段执行（非常少见）

//=>IE6-8浏览器
        oBox.attachEvent('onclick',function(e){
        //e:事件对象，不同于DOM0级事件，浏览器会默认将事件对象传递进来，与window.event的值相同，因此对于：pageX/pageY/target...等依旧存在兼容；
        })
        //=>绑定的方法都是在冒泡传播阶段执行

DOM1?

在DOM第一代升级迭代的时候，事件绑定依然沿用DOM0绑定的方式..so…

DOM0于DOM2事件绑定的区别

DOM0事件绑定的原理

• 给当前元素的某一私有属性（onXXX）赋值的过程；（之前属性默认值是null，如果我们赋值了一个函数，就相当于绑定了一个方法）
• 当我们赋值成功（赋值一个函数），此时浏览器会把DOM元素和赋值的的函数建立关联，以及建立DOM元素的行为监听，当某一行为被用户触发，浏览器会把赋值的函数执行；

DOM0事件绑定的特点

• 只有DOM元素天生拥有这个私有属性（onxxx事件私有属性），我们赋值的方法才叫事件绑定，否则属于设置自定义属性
• 移除事件绑定的时候，我们只需要赋值为null；
• 在DOM0事件绑定中，只能给当前元素的某一个事件行为绑定一个方法，绑定多个方法，最后一次的绑定的会替换前面绑定的

DOM2事件绑定的原理

• DOM2事件绑定使用的addEventListener/attachEvent方法都是在eventTarget这个内置类的原型上定义的，我们调用的时候，首先要通过原型链找到这个方法，然后执行完成事件绑定的效果
• 浏览器会给当前元素的某个事件行为开辟一个事件池（事件队列）【浏览器有一个统一的事件池，每个元素绑定的行为都放在这里，通过相关标志区分】，当我们通过 addEventListener/attachEvent进行事件绑定的时候，会把绑定的方法放在事件池中；
• 当元素的某一行为被触发，浏览器回到对应事件池中，把当前放在事件池的所有方法按序依次执行

特点

• 所有DOM0支持的行为，DOM2都可以用，DOM2还支持DOM0没有的事件行为（这样说比较笼统）
  （核心）【浏览器会把一些常用事件挂载到元素对象的私有属性上，让我们可以实现DOM0事件绑定，DOM2：凡是浏览器给元素天生设置的事件在DOM2中都可以使用】
  例如：onDOMContentLoaded（所有的DOM0和IE6-8的DOM2都不支持）
  ​onDOMContentLoaded//当前浏览器中的DOM结构加载完成，就会触发这个事件

• DOM2中可以给当前元素的某一事件行为绑定多个不同方法（因为绑定的所有方法都放在事件池中）；

• 事件的移除:事件类型、绑定的方法、传播阶段三个完全一致，才可以完成移除(因此在绑定方法时，尽量不要用匿名函数，否则不好移除)

//=>ON:给当前元素的某个事件绑定某个方法
   var on = function (curEle, type, fn) {
   if (document.addEventListener) {
       //=>标准浏览器
        curEle.addEventListener(type, fn, false);
       return;
   }
  //=>IE6~8
  curEle.attachEvent('on' + type, fn);
};
//=>OFF:移除当前元素某个事件绑定的某个方法
13.var off = function (curEle, type, fn) {
14.    if (document.removeEventListener) {
15.        curEle.removeEventListener(type, fn, false);
16.        return;
17.    }
18.    //=>IE6~8
19.    curEle.detachEvent('on' + type, fn);
20.};

xxx.removeEventLister('click',function(){},false)

==DOM0和DOM2绑定的方法是毫无联系的（因为是两套完全不同的机制），即使绑定的方法相同，也是执行两次，谁先绑定，就先执行谁==

window.onload&&$(document).ready()的区别

window.onload:当浏览器中的所有资源（DOM结构、文本内容、图片）都加载完成，触发load事件；

• 它是基于DOM0的事件绑定机制完成的，所以在同一页面中只能为他绑定一个方法，绑定多个，以最后一个为主；
• 如果想在一个页面中使用多次，应该是基于DOM2绑定的；

function fn1(){
}
  function fn1(){
}
window.addEventListener('load',fn1,false);
window.addEventListener('load',fn2,false);

$(function(){})或者$(document).ready(function(){});
当文档中的DOM结构加载完成，就会触发执行，在一个页面中可以使用多次

• JQ中提供的方法，JQ是基于onDOMContentLoaded这个事件完成操作的
• JQ中的事件绑定都是基于DOM2事件绑定的
• onDOMContentLoaded在IE6-8下attachEvent也是不支持的，JQ在IE6-8下使用readystatechange来完成

DOM2事件的兼容处理

• 语法上的兼容
  标准： curEle.addEventListener（’type’,fn,false）;
  IE6-8: curEle.attachEvent（’on’+type,fn）;

• 顺序问题
  标准：按照绑定的顺序依次执行
  IE6-8:当事件行为被触发，IE6-8执行是乱序

• 重复问题
  标准：可以自动去重，已经存在的方法不允许再次添加
  IE6-8:在向事件池中增加方法时没有去重机制

• this问题
  标准：当事件行为被触发，方法中的this指向当前元素本身
  IE6-8:当事件行为被触发，方法中的this指向window

IE6-8事件池机制vs标准浏览器事件池机制（比较规范的回答）

1、向事件池中添加方法时，标准浏览器是使用addEventListener,IE6-8使用的是attachEvent；而且标准浏览器有自动去重的机制，已经添加的方法不允许再次添加。IE6-8没有去重机制；
2、浏览器执行事件池中的方法时，不仅把方法执行，还把事件对象当作实参传递给给对应的方法，但是也是有区别的，IE6-8传递的事件对象的值和window.event是相同 的，因此存在兼容问题；
3.当事件行为被触发，标准浏览器是依次执行，方法中的this指向当前元素；IE6-8下，是乱序执行，且方法中的this指向window；

不兼容的本质：IE6-8低版本浏览器对于他的内置事件池处理机制的不完善导致的。
DOM2事件绑定兼容处理机制原理：自己创建一个类似于标准浏览器的自定义事件池（针对IE6-8）

• on :手动创建一个自定义事件池，把需要绑定的方法全部存在自定义事件池中
• off: 把不需要绑定的方法从自定义事件池中移除
• run：把run放在内置事件池中，当行为触发，需要浏览器把run执行，在run中把自定义事件池的方法执行。

//向事件池追加方法
var on = function (curEle, type, fn) {
    //标准浏览器无需处理
    if (document.addEventListener) {
        curEle.addEventListener(type, fn, false);
        return;
    }
    //创建自定义事件池：创建到当前元素的自定义属性上，不受作用域限制，以后在其他方法中需要使用，可直接获取（不放在全局是防止全局污染）

    // 每一个事件都有一个独立的事件池
    if (typeof curEle[type + 'pond'] === 'undefined') {
        curEle[type + 'pond'] = [];
        //只要执行on,就说明当前方法已被绑定
        //把run放到内置事件池中；
        // curEle.attachEvent('on'+type,run);//需要保证run中的 this是当前元素
        curEle.attachEvent('on' + type, function () {
            run.call(curEle, e);//将run放在一个匿名函数中，强制改变this
        });
    }

    var aryPond = curEle[type + 'pond'];
    // 去重操作，当前事件池中是否有当前事件
    for (var i = 0; i < ary.length; i++) {
        if (aryPond[i] === fn) {
            return;
        }
    }
    aryPond.push(fn);
};

//移除事件池的某个方法
var off = function (curEle, type, fn) {
    if (document.removeEventListener) {
        curEle.removeEventListener(type, fn, false);
        return;
    }

    var aryPond = curEle[type + 'pond'];
    if (!aryPond) return;
    for (var i = 0; i < ary.length; i++) {
        if (aryPond[i] === fn) {
            // aryPond.splice(i,1);此方法会导致原始数组索引改变，此时正在执行的run循环，索引和想要的索引不一致，数组塌陷
            //我们不能让当前数组的索引改变；
            aryPond[i] = null;//置空，索引没变

        }

    }

};


//把自定义事件池中的方法依次执行
var run = function (e) {
    // this=>curEle
    //e:window.event，不兼容，需要处理
    if (typeof e.target === 'undefined') {
        e.target = e.srcElement;
        e.which = e.keyCode;
        e.pageX = e.clientX + document.documentElement.scrollLeft || document.body.scrollLeft;
        e.stopPropagation = e.cancelBubble = true;
        e.preventDefault = e.returnValue = false;
    }


    var aryPond = curEle[type + 'pond'];
    if (!aryPond) return;
    for (var i = 0; i < aryPond.length; i++) {
        var itemFn = aryPond[i];
        // itemFn();=>这样执行itemFn里的this时window，须将他替换成函数里的this
        if (itemFn === null) {
            //当前这一项在执行的时候，可以将off中置空的那一项删除
            aryPond.slice(i, 1);
            i--;
            continue;
        }
        itemFn.call(this, e);
    }

};

Bind方法的封装

//ES5封装  BIND
   Function.prototype.myBind = function myBind(context) {
        //this=>当前需要处理的函数
        //context=>我们需要预先改变的this值（如果不传，默认window）；
        //arguments=>存储包含context在内的所有实参；
        context = context || window;
        var outerArg = Array.prototype.slice.call(arguments, 1);
        var _this = this;
        if('bind' in this){//如果不是IE6-8，直接返回
           return _this.bind.apply(_this,arguments) ;
        }

        return function () {
            var innerArg = Array.prototype.slice.call(arguments);
            outerArg = outerArg.contact(innerArg);
            _this.apply(context, outerArg);
        }
    }

//ES6方法
 Function.prototype.myBind = function myBind(context = window, ...outer) { //使用ES6中的剩余运算符
        if ('bind' in this) {
            return this.bind(arguments);
        }
        return function (...inner) {
            this.apply(context, outer.concat(inner));
        }
    };