DOM事件

Posted 2020-08-06 ESnail

　　在慕课网上学习了DOM事件探秘课程，特此整理了一下笔记。

　　慕课网DOM事件探秘课程地址：http://www.imooc.com/learn/138

事件

　　是文档或浏览器窗口中发生的特定的交互瞬间。【javascript <------>html】

事件流

　　描述的是从页面中接受事件的顺序 （IE：事件冒泡流 / Netscape事件捕获流）

事件的三个阶段

　　事件的三个阶段分别是：捕获阶段、目标阶段、冒泡阶段

　　事件冒泡流：即事件最开始由最具体的无素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到最不具体的那个节点（文档） input----->document

　　事件捕获：不太具体的节点应该更早接收到事件，而最具体的节点最后接收到事件。跟事件冒泡截然相反

　　事件冒泡：从最内层至最外层（最常用）

　　事件捕获：从最外层至最内层

事件处理程序

1.HTML事件处理程序(现在不建议使用了):事件直接加在HTML代码中

    <input type="button" value="按钮" id="btn" onclick="alert(‘hellow‘)">

　 <input type="button" value="按钮" id="btn" onclick="show()">

    缺点：①HTML和js代码高耦合，如果修改，就要修改两个地方--HTML元素内和script函数。

　　　　 ②可能存在时差问题。考虑这样一种情形。show函数定义在按钮的后面,当DOM还没有加载到script标签的时候将会发生错误,此种情形可以通过内部添加try-catch来解决;或者将script标签放到页面顶部，但会延迟页面的加载速度。

2.DOM0级事件处理程序 （用得比较多）浏览器4代出现

　　较传统的方式：把一个函数赋值给一个事件处理程序的属性。　　

　　优点：简单，跨浏览器　　

　　var btn=document.getElementById("btn2");---先获取出元素，定义对象 //取得btn按钮对象　　

　　btn.onclick=function(){alert(‘这是通过DOM0级添加的事件！‘)}----让 事件以对象的属性 的形式出现。 //给btn添加onclick属性　

　　btn.onclick=null;-----删除onclick属性。

3.DOM2级事件处理程序

　　定义了两个方法--用于处理指定和删除事件处理程序的操作：

　　addEventListener()添加事件监听程序

　　removeEventListener()移除事件监听程序

　　三个参数设置;事件名称，处理方法(函数)，布尔值--false：表示在冒泡阶段调用事件处理程序(可以最大限度的兼容浏览器)，一般设为false；true表示在捕获阶段调用事件处理程序

　　btn.addEventListener(‘click‘,showMes,false);  //showMes为方法名

　　注意：

　　①、若事件名称有on，则需去掉on。onclick --> click，onmouseover --> mouseover等等；

　　②、false 最大限度兼容所有浏览器--事件冒泡流。

　　③、通过addEventListener添加的事件只能通过removeEventListener来删除。--参数要与添加事件时相同

　　btn.removeEventListener(参数); //参数必须和btn.addEventListener的参数一致，删除事件监听

　　DOM0级和DOM2级事件处理程序可以给一个事件绑定多个函数，事件触发的时候会按照绑定顺序执行各个函数。如下所示：

　　btn.addEventListener(‘click‘,showMes,false);

　　btn.addEventListener(‘click‘,showMes,function(){alert(this.value）;},false);

　　缺点：IE不支持该事件

　　DOM2级删除事件不能直接使用匿名函数。

　　btn3.addEventListener(‘click‘,function(){alert("this.value");},false); //添加事件有效

　　btn3.removeEventListener(‘click‘,function(){alert("this.value");},false); //删除事件无效

　　因为匿名函数看起来是一样的，其实是两个不同的对象。

　　btn3.addEventListener(‘click‘,function(){alert("this.value");},false); 

　　btn3.removeEventListener(‘click‘,function(){alert("this.value");},false);

　　这两行代码中的function(){alert(alert("this.value"));}看上去是同一个东西，实际上是不同的对象，而removeEventListener要求函数必须一样。

　　所以addEventListener最好还是用将匿名函数赋值给某个变量

　　addEventListener(‘click‘,showValue,false);

　　removeEventListener(‘click‘,showValue,false);

　　这样就不会出bug了。

　　加括号——调用函数

　　只要是要调用函数执行的，都必须加括号。此时，function()实际上等于函数的返回值。（没有返回值也已经执行了函数体内的行为）。就是说，只要加括号的，就代表将会执行函数体代码。　　

　　不加括号——指定函数引用　　

　　把函数名作为函数指针，用于传参，此时不是得到函数结果，因为不会运行函数体代码。它只是传递了函数体所在地址，在需要时找到函数体去执行。

4.IE事件处理程序：

　　attachEvent()添加事件和detachEvennt()删除事件

　　接收相同的两个参数：事件处理程序的名称和事件处理程序的函数，加on，没有布尔值；

　　不加第三个参数的原因：IE8及更早的浏览器版本只支持事件冒泡

　　btn.attachEvent(‘onclick‘,showMes);

　　支持IE事件处理程序的浏览器：IE和OPERA

　　btn.detachEvent(‘onclick‘,showMes);

事件对象event

　　在触发DOM上的事件时都会产生一个对象。

　　1、DOM中的事件对象

　　　　①、type属性，用于获取事件类型  event.type

　　　　②、target属性，用于获取事件目标  event.target

 

　　　　③、stopPropagation()方法，用于阻止事件冒泡

　　　　④、preventDefault()方法，阻止事件的默认行为，比如a标签的跳转

　　　　如果一个div里面有一个button，button和div都绑定了click事件，如果是事件冒泡，那么点击button的时候，首先触发button的处理函数，然后触发div的处理函数。（由内而外）

　　　　如果有时候不想冒泡，也就是不希望div的事件被触发，那么需要阻止事件冒泡。stopPropagation()方法

　　　　如果需要阻止a标签的默认属性跳转，可以使用阻止事件的默认行为preventDefault()方法

　　2、IE事件对象（window.event）

　　　　①、事件类型：event.type  type属性，用于获取事件类型

　　　　②、事件目标：event.srcElement  srcElement属性，用于获取事件的目标

　　　　③、阻止事件冒泡：event.cancelBubble = true  cancelBubble属性，用于阻止事件冒泡  设置为true表示阻止冒泡，设置为false表示不阻止冒泡

　　　　④、阻止默认事件：event.returnValue = false  returnValue属性，用于阻止事件的默认行为  设置为false表示阻止事件的默认行为

　　事件处理程序执行完后,event对象将被销毁;在事件处理程序内部this === currentTarget,而target则表示的是事件的实际目标,

　　事件委托就是事件目标自身不处理事件，而是把处理任务委托给其父元素或者祖先元素，甚至根元素（document）。因为子节点触发事件的时候，会冒泡到父节点，触发该事件，这样就可以避免新加节点就绑定事件

跨浏览器处理程序封装

/*
* [eventUtil 事件处理程序]
*/
var eventUtil={
    //添加事件
    addEvent:function(element,type,handler){
        if(element.addEventListener){
            element.addEventListener(type,handler,false);  //DOM2级
        }else if(element.attachEvent){
            element.attachEvent(‘on‘+type,handler);  //IE处理程序
        }else{
            element[‘on‘+type]=handler;  //DOM0级  element.onclick === element[‘onclick‘]
        }
    }，
    //删除事件
    removeEvent:function(element,type,handler){
        if(element.removeEventListener){
            element.removeEventListener(type,handler,false);
        }else if(element.detachEvent){
            element.detachEvent(‘on‘+type,handler);
        }else{
            element[‘on‘+type]=null;
        }
    },
    //获取事件
    getEvent:function(event){
        return event?event:window.event;
    },
    //获取事件类型
    getEventType:function(event){
        return event.type;
    },
    //获取事件对象
    getEventTarget:function(event){
        return event.target || event.srcElement;
    },
    //阻止事件的默认行为
    preventDefault:function(event){
        if(event.preventDefault){
            event.preventDefault();
        }else{
            event.returnValue = false;
        }
    },
    //阻止事件冒泡
    stopPropagation:function(event){
        if(event.stopPropagation){
            event.stopPropagation();
        }else{
            event.cancelBubble = true;
        }
    },
}