DOM事件探秘

说到DOM事件，就不得不说以下几点：

1 事件流

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

　　事件流分为事件冒泡流和事件捕获流。那么什么是事件冒泡，什么是事件捕获呢？

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

　　事件捕获：不太具体的元素最早接收事件，而不太具体的元素最后接收事件。它跟事件冒泡是一个截然相反的概念。

2 事件处理程序

　　2.1 HTML事件处理程序

　　如下将事件处理程序嵌入到HTML元素当中

<div>

    <input type="button" value="按钮" id="btn1" onclick="showMes()"/>

</div>

<script type="text/javascript">
　　function showMes(){
　　　　alert('Hello World!');
　　}
</script>

　　2.2 DOM 0级事件处理程序 (用得比较多的)

　　下面的DOM 0级添加和删除事件事件处理程序的表现形式：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>DOM事件探秘</title>

 </head>

 <body>

     <input type="text" value="按钮2" id="btn2" />

     <script type="text/javascript">

          var oBtn2 = document.getElementById("btn2");

          //DOM 0级添加事件处理程序

          oBtn2.onclick = function(){

               alert("这是通过DOM 0级添加的事件处理程序");

          }

          //DOM 0级删除事件处理程序

          oBtn2.onclick = null;

     </script>

 </body>

 </html>

　　2.3 DOM 2级事件处理程序

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

　　addEventListener()和removeEventListener(),它们接收三个参数：要处理的事件名，作为事件处理程序的函数和布尔值(false代表事件冒泡)

　　下面的DOM 2级添加和删除事件事件处理程序的表现形式：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>DOM事件探秘</title>

 </head>

 <body>

     <input type="button" value="按钮3"  id="btn3" />

     <script type="text/javascript">

          function showMes(){

              alert('这是通过DOM 2添加的事件处理程序');

          }

          var btn3 = document.getElementById('btn3');

          // DOM 2级添加事件处理程序

          btn3.addEventListener('click',showMes,false);

          // DOM 2级删除事件处理程序

          btn3.removeEventListener('click',showMes,false);

     </script>

 </body>

 </html>

　　2.4 IE事件处理程序 (支持IE事件处理程序的浏览器是IE和Opera)

IE事件处理程序提供了两个类似DOM的方法:attachEvent()和detachEvent(),它们接收相同的两个参数：要处理的事件名，作为事件处理程序的函数

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>DOM事件探秘</title>

 </head>

 <body>

     <input type="button" value="按钮3" id="btn3" />

     <script type="text/javascript">

     function showMes() {

         alert('IE事件处理程序');

     }

     var btn3 = document.getElementById('btn3');

     // DOM 2级添加事件处理程序

     btn3.attachEvent('click', showMes);

     // DOM 2级删除事件处理程序

     btn3.detachEvent('click', showMes);

     </script>

 </body>

 </html>

　　2.5 跨浏览器的事件处理程序，将其封装在一个对象里，暂时就给它封装两个方法，添加事件和删除事件

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>DOM事件探秘</title>

 </head>

 <body>

     <input type="button" value="按钮3" id="btn3" />

     <script>

         var eventUtil = {

             // 添加句柄

             addHandler:function(ele,type,handler){

                 if(ele.addEventListener){

                     ele.addEventListener(type,handler,false);

                 } else if(ele.attachEvent){

                     ele.attachEvent('on'+type,handler);

                 } else {

                     ele['on'+type] = handler;

                 }

             },

             removeHandler:function(ele,type,handler){

                 if(ele.removeEventListener){

                     ele.removeEventListener(type,handler,false);

                 } else if(ele.detachEvent){

                     ele.detachEvent(type,handler);

                 } else {

                     ele['on'+type] = handler;

                 }

             }

         }

     </script>

 </body>

3 事件对象

　　什么是事件对象？在触发DOM上的事件时都会产生一个对象event,在IE8以前是window.event

　　3.1 DOM中的事件对象(以下是比较常见的属性和方法)

　　　　(1) type属性用于获取事件类型

　　　　(2) target属性用于获取事件目标

　　　　(3) stopPropagation()方法用于阻止事件冒泡

　　　　(4) preventDefault()方法阻止事件的默认行为

　　3.2 IE中的事件对象

　　　　(1) type属性用于获取事件类型

　　　　(2) srcElement属性用于获取事件目标

　　　　(3) cancelBubble属性用于阻止事件冒泡，设置为true表示阻止冒泡，设置为false表示不阻止冒泡

　　　　(4) returnValue属性用于阻止事件的默认行为，设置为false表示阻止事件的默认行为，设置为true表示不阻止事件的默认行为

4 封装event.js,解决浏览器兼容问题

 var eventUtil = {

     // 添加句柄

     addHandler: function(ele, type, handler) {

         if (ele.addEventListener) {

             ele.addEventListener(type, handler, false);

         } else if (ele.attachEvent) {

             ele.attachEvent('on' + type, handler);

         } else {

             ele['on' + type] = handler;

         }

     },

     //删除句柄

     removeHandler: function(ele, type, handler) {

         if (ele.removeEventListener) {

             ele.removeEventListener(type, handler, false);

         } else if (ele.detachEvent) {

             ele.detachEvent(type, handler);

         } else {

             ele['on' + type] = handler;

         }

     },

     //获取事件

     getEvent: function(event) {

             return event ? event : window.event;

         }，

         //获取事件类型

     getType: function(event) {

         return event.type;

     },

     //获取事件的目标

     getElement: 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;

         }

     }

 }

巴特西

DOM事件探秘

最新文章

热门文章