DOM事件探索

前端开发 JavaScriptD DOM


1.事件流

事件流描述的是从页面中接受事件的顺序。 IE的事件流是事件冒泡流,而Netscape的事件流是事件捕获流

  • 事件冒泡:事件从最开始的最具体的元素接受,然后逐级向上传递,传递到最不具体的元素(节点,也就是文档)。打个比方就是从处理这件事的业务员传递到总经理的过程。
  • 事件捕获:接受过程和事件冒泡相反,最不具体元素最先接受事件然后传递到最具体元素。也就是总经理想起一个什么事然后叫业务员办这个事。

2.事件处理程序

1.HTML事件处理程序 2.DOMO级事件处理程序 3.DOM2级事件处理程序

DOM2级事件定义了两个方法:用于处理指定和删除事件处理程序的操作,addEventListener()和removeEventListener()。接受三个参数:要处理的事件名、作为事件处理程序的函数和布尔值。

4.IE事件处理程序 attachEvent()添加事件 detachEvent()删除事件 这两个方法接收相同的两个参数:事件处理程序名称与事件处理函数

跨浏览器的事件处理程序:

var eventUtil={
            // 添加句柄
            addHandler:function(element,type,handler){
               if(element.addEventListener){
               element.addEventListener(type,handler,false);
               }else if(element.attachEvent){
                 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;
           }
         }
  }

使用:

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);
  });

}

3.事件对象

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏CRPER折腾记

Vue 折腾记 - (6) 写一个不大靠谱的backToTop组件

返回顶部这个功能用jq实现,好容易实现,一个animate配合scrollTo就搞定了

931
来自专栏偏前端工程师的驿站

CSS魔法堂:Transition就这么好玩

1355
来自专栏cnblogs

Event(事件)的传播与冒泡

特性说明和原理图: 标准浏览器和Ie9+浏览器都支持事件的冒泡和捕获,而IE8-浏览器只支持冒泡 标准和Ie9+浏览器用stopPropagation()或c...

2409
来自专栏前端知识分享

第55天:简单冒泡方法原理

事件冒泡: 当一个元素上的事件被触发的时候,比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡;这个事件从原始元素...

1011
来自专栏有趣的django

博客园美化大全

3360
来自专栏快乐八哥

JavaScript事件概览

JavaScript事件 JavaScript是单线程,在同一个时间点,不可能同时运行两个“控制线程”。 事件句柄和事件对象 1.注册事件句柄 标准和非标准 v...

2515
来自专栏互联网杂技

javascript事件详解

事件流 事件流两种顺序:冒泡与捕获。 简单的添加与删除事件 obj.onclick=function(){} obj.onclick=null; 通用事件添加的...

3565
来自专栏hightopo

基于 HTML5 的 3D 工控隧道案例

1512
来自专栏凉城

网页屏蔽各种按键的代码分享

2266
来自专栏mukekeheart的iOS之旅

iOS学习——Quartz2D学习之UIKit绘制

  在IOS中绘图技术主要包括:UIKit、Quartz 2D、Core Animation和OpenGL ES。其中Core Animation提供动画实现技...

1342

扫码关注云+社区

领取腾讯云代金券