JavaScript基础篇(三)— — DOM事件揭秘

最新推荐文章于 2024-05-22 13:33:55 发布

mqy1023

最新推荐文章于 2024-05-22 13:33:55 发布

阅读量437

点赞数

分类专栏： Html&Css&Sass&Less Javascript 文章标签： javascript dom

本文链接：https://blog.csdn.net/mqy1023/article/details/50881403

版权

Javascript 同时被 2 个专栏收录

23 篇文章 0 订阅

订阅专栏

Html&Css&Sass&Less

14 篇文章 0 订阅

订阅专栏

(1)、理解事件流
a、事件是文档/IE 窗口中发生的特定交互瞬间
(2)、使用事件处理程序
(3)、不同的事件类型
一、事件流
事件流描述的是从页面中接受事件的顺序。
IE的事件流是事件冒泡流，而Netscape的事件流是事件捕获流
1、事件冒泡
事件冒泡，即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收，然后逐级向上转播至最不具体的节点(文档)。
2、事件捕获
事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点最后接收到事件。
二、事件处理程序
1、HTML事件处理程序
缺点：HTML和js代码紧密耦合

<input type="button" value="按钮4" id="btn4" onclick="showMsg()">
<script>
     function showMsg() {
          alert("hello world!");
     }
</script>

2、DOM0级事件处理程序
DOM0级给节点添加属性，步骤:先再script中获取元素的节点然后以.的方式访问这个节点的属性，为其赋值，实现HTML 与js的分离。

<input type="button" value="按钮4" id="btn4"/>
 <script>
       var btn = document.getElementById('btn4');
       btn.onclick = function showMsg() {
            alert("这是通过dom0级添加事件");
       }
</script>

3、DOM2级事件处理程序
DOM2级事件定义了两个方法：
用于处理指定和删除事件处理程序的操作：addEventListener\removeEventListener(事件名，处理程序的函数，布尔值[rue:事件捕获阶段调用事件处理程序;false:事件冒泡阶段调用事件处理程序])

var btn = document.getElementById('btn4');
btn.addEventListener('click', showMsg, false);
    function  showMsg() {
       alert("这是通过dom2级添加事件");
}
btn.addEventListener('click', function() {
     alert("这是通过dom2级添加事件");
}, false);
//删除事件
btn.removeEventListener('click', showMsg, false);

4、IE事件处理程序
attachEvent()添加事件
btn.attachEvent(‘onclick’, showMsg);
detachEvent()删除事件
这两个方法接收相同的两个参数：事件处理程序名称与事件处理函数
5、跨浏览器的事件处理程序
element.οnclick===element[‘onclick’]

一、index.html
<html>
 <head>
   <title>事件流</title>
   <meta charset="utf-8">
   <script src="js/event.js"></script>
   <script src="js/script.js"></script>
 </head>
   <body>
      <div id="box">
         <input type="button" value="按钮" id="btn" onclick="showMes()">
         <input type="button" value="按钮2" id="btn2">
         <input type="button" value="按钮3" id="btn3">
         <a href="event.html" id="go">跳转</a>

          <input type="button" value="按钮4" id="btn4"/>
          <script>
              var btn = document.getElementById('btn4');
              btn.addEventListener('click', function() {
                  alert("这是通过dom2级添加事件");
              }, false);
          </script>
      </div>
   </body>
 </html>
二、event.js
var eventUtil={
            // 添加句柄
            addHandler:function(element,type,handler){
               if(element.addEventListener){//兼容chrome等
                 element.addEventListener(type,handler,false);
               }else if(element.attachEvent){//兼容IE
                 element.attachEvent('on'+type,handler);
               }else{ 
                 element['on'+type]=handler;
               }
            },
            // 删除句柄
            removeHandler: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;
          },
          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;
           }
         }
  }
三、script.js
window.onload=function(){
  var go=document.getElementById('go'),
      box=document.getElementById('box');

  eventUtil.addHandler(box,'click',function(){
    alert('我是整个父盒子');
  });

  eventUtil.addHandler(go,'click',function(e){
    //e=eventUtil.getEvent(e);
    e=e || window.event;
    alert(eventUtil.getElement(e).nodeName);
    eventUtil.preventDefault(e);
    eventUtil.stopPropagation(e);
  });

}

三、事件对象
事件对象event
1、DOM中的事件对象
(1)、type:获取事件类型
(2)、target：事件目标
(3)、stopPropagation() 阻止事件冒泡
(4)、preventDefault() 阻止事件的默认行为
2、IE中的事件对象
(1)、type:获取事件类型
(2)、srcElement：事件目标
(3)、cancelBubble=true阻止事件冒泡
(4)、returnValue=false阻止事件的默认行为

来源：http://www.imooc.com/learn/138