《JS事件探秘》学习——基础知识练习及总结

最新推荐文章于 2022-07-03 00:59:11 发布

MMRS

最新推荐文章于 2022-07-03 00:59:11 发布

阅读量744

点赞数

分类专栏：深入js 文章标签： js

本文链接：https://blog.csdn.net/mmrsdym/article/details/39934133

版权

深入js 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

最近跟着慕课网上的《JS事件探秘》课程学习http://www.imooc.com/learn/138 ，总结如下：

一、第一章

1. 事件流：描述的是从页面中接受事件的顺序

IE ——事件冒泡流； Netscap ——事件捕获流

2. 事件冒泡：即事件最开始由最具体的元素接收，然后逐级向上传播至最不具体的元素。

3. 事件捕获：不太具体的节点应该更早接收到事件，而最具体的节点最后接收到事件。

注意：主流浏览器都支持事件冒泡，兼容性上可以放心使用。

二、第二章使用事件处理程序

1. Html事件处理程序：直接将事件添加到html元素上

Eg: <input type=”button” value=”按钮” id=”btn”οnclick=”showEvent()”>

缺点：html与js代码耦合度高

2. DOM0级事件处理程序：通过属性给元素添加事件

Eg:

<input type=”button” value=”按钮” id=”btn”>


<scripttype="text/javascript">
           var inputid = document.getElementById("btn");
 
           inputid.onclick = function(){  //给元素添加事件
                             alert(DOM0级添加事件);
                    }
    inputid.onclick = null ;  //删除属性事件
</script>

3. DOM2级事件处理程序

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

addEventListener() 和removeEventListner() 。

接收三个参数：要处理的事件名、作为事件处理程序的函数和布尔值

注意：布尔值为false —— 表示在冒泡阶段调用处理程序, 为了兼容所有浏览器，一般将值设为false。true则表示在事件捕获阶段调用处理程序。

Eg:

<input type=”button” value=”按钮” id=”btn”>
<script type="text/javascript">s
          
           var inputid =document.getElementById("btn");
 
           //添加事件
           inputid.addEventListener("click",showBox,false);
 
           //删除事件
           inputid.removeEventListener("click",showBox,false);
 
    //注意所有事件名不加on, click/mouse
</script>

注意：IE8及更早的浏览器版本不支持addEventListener()和 removeEventListner()

4. IE事件处理程序

attachEvent() 添加事件

detachEvent() 删除事件

接收相同的两个参数：事件处理程序的名称和事件处理程序的函数

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

Eg:

<scripttype="text/javascript">
                                                                                                                                                             
       function showBox(){
           alert("hello");
       }
var inputid =document.getElementById("btn");
inputid.attachEvent("onclick",showBox); 
 
//注意事件名称有on, onclick\onmouse
inputid.detachEvent("onclick",showBox);
                                                                                                                    
</script>

5. 跨浏览器解决

<scripttype="text/javascript">
                                                                                                                                                             
        function showBox(){
          alert("hello");
        };
var inputid = document.getElementById("btn");
 
var eventUtil = {
 
//添加句柄
addHandler:function(element,type, handler){
 
if(element.addEventListener){  //兼容DOM2级方法
element.addEventListener(type,handler,false);
 
}else if(element.attachEvent){ //兼容IE
 
//注意事件type要加上on
element.attachEvent("on"+type,handler);
}else{ //兼容老版本浏览器——既不支持DOM2又不支持IE事件处理程序
 
//在js中所有用.连接的都可以写成中括号[]的形式
//element.onclick = element['onclick']
element["on"+type] =handler;
}
},
 
//删除句柄
removeHandler:function(element,type, handler){
 
if(element.removeEventListener){  // 兼容DOM2级方法
element.removeEventListener(type,handler,false);
 
}else if(element.detachEvent){ // 兼容IE
 
// 注意事件type要加上on
element.detachEvent("on"+type,handler);
}else{ // 兼容老版本浏览器——既不支持DOM2又不支持IE事件处理程序
// 在js中所有用.连接的都可以写成中括号[]的形式
// element.onclick =element['onclick']
element["on"+type] = null;
}
},
};
 
eventUtil.addHandler(inputid,'click', showBox);
eventUtil.removeHandler(inputid,'click', showBox);
</script>

三、事件对象

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

事件对象event

1、 DOM中的事件对象常用属性

（1） event.type : 用于获取事件类型

（2） event.target: 用于获取事件目标

（3） event.stopPropagation() 方法：用于阻止事件冒泡

（4） event.preventDefault() 方法：阻止事件的默认行为

2、 IE中的事件对象

（1） type属性：用于获取事件类型

（2） srcElement属性：用于获取事件的目标

（3） cancelBubble属性：用于阻止事件冒泡

设置为true表示阻止冒泡设置为false 表示不阻止冒泡

（4） returnValue属性：用于阻止事件的默认行为

设置为false表示阻止事件的默认行为

vareventUtil = {
 
                            //添加句柄
                            addHandler:function(element,type, handler){
 
                                     if(element.addEventListener){  //兼容DOM2级方法
                                               element.addEventListener(type,handler,false);
 
                                     }elseif(element.attachEvent){ //兼容IE
 
                                               //注意事件type要加上on
                                               element.attachEvent("on"+type,handler);
 
                                     }else{ //兼容老版本浏览器——既不支持DOM2又不支持IE事件处理程序
 
                                               //在js中所有用.连接的都可以写成中括号[]的形式
                                               //element.οnclick= element['onclick']
                                               element["on"+type]= handler;
                                     }
                            },
 
                            //删除句柄
                            removeHandler:function(element,type, handler){
 
                                     if(element.removeEventListener){  //兼容DOM2级方法
                                               element.removeEventListener(type,handler,false);
 
                                     }elseif(element.detachEvent){ //兼容IE
 
                                               //注意事件type要加上on
                                               element.detachEvent("on"+type,handler);
 
                                     }else{ //兼容老版本浏览器——既不支持DOM2又不支持IE事件处理程序
 
                                               //在js中所有用.连接的都可以写成中括号[]的形式
                                               //element.οnclick= element['onclick']
                                               element["on"+type]= null;
                                     }
                            },
 
                            //获取事件对象
                            getEvent:function(event){
 
                                     //window.eventIE8及以下版本浏览器的调用用方式
                                     returnevent?event:window.event;
 
                            },
 
                            //获取事件类型
                            getType:function(event){
                                     returnevent.type;
                            }
 
                            //获取目标元素
                            getElement:function(event){
                                     returnevent.target || event.srcElement;
                            }
 
                            //阻止默认行为
                            preventDefault:function(event){
                                     if(event.preventDefault){
                                               event.preventDefault();
                                     }else{
 
                                               //兼容IE浏览器
                                               event.returnValue= false;
                                     }
                            },
 
                            //阻止冒泡事件
                            stopPropagation:function(event){
                                     if(event.stopPropagation){
                                               event.stopPropagation();
                                     }else{
                                               event.cancelBubble= true;
                                     }
                            }
                   };