添加事件及Event对象的兼容写法-阿里云开发者社区

开发者社区> 木头先生> 正文

添加事件及Event对象的兼容写法

简介: 一、事件流 事件流描述的是从页面中接受事件的顺序。 IE的事件流是事件冒泡流,而Netscape的事件流是事件捕获流 1、事件冒泡 事件冒泡,即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上转播至最不具体的节点(文档)。
+关注继续查看

 

一、事件流

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

IE的事件流是事件冒泡流,而Netscape的事件流是事件捕获流

1、事件冒泡

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

2、事件捕获

事件捕获的思想是不太具体的节点应该更早接收到事件,而最具体的节点最后接收到事件。

二、事件处理程序

1、HTML事件处理程序

2、DOM0级事件处理程序

3、DOM2级事件处理程序

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

4、IE事件处理程序

attachEvent()添加事件

detachEvent()删除事件

这两个方法接收相同的两个参数:事件处理程序名称与事件处理函数

5、跨浏览器的事件处理程序

三、事件对象

事件对象event

1、DOM中的事件对象

(1)、type:获取事件类型

(2)、target:事件目标

(3)、stopPropagation() 阻止事件冒泡

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

2、IE中的事件对象

(1)、type:获取事件类型

(2)、srcElement:事件目标

(3)、cancelBubble=true阻止事件冒泡

(4)、returnValue=false阻止事件的默认行为

 

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;

           }

         }

  }

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
WPF 为资源字典 添加事件响应的后台类
原文:WPF 为资源字典 添加事件响应的后台类 前言,有许多同学在写WPF程序时在资源字典里加入了其它控件,但又想写事件来控制这个控件,但是资源字典没有CS文件,不像窗体XAML还有一个后台的CS文件,怎么办呢? 在工作时也遇到了这个问题,现在把它分享出来 比如说我们现在要写一个TabControl控件,在TabItem中有一个关闭按钮或其它按钮,这个按钮要能响应某个事件。
1035 0
改善C#程序的157建议——建议42学习笔记:使用泛型参数兼容泛型接口的不可变性。
改善C#程序的157建议——建议42学习笔记:使用泛型参数兼容泛型接口的不可变性。
15 0
【更正】“给自定义控件(Web Control)添加事件的几种方法”有一个不太准确的地方。
    给自定义控件(Web Control)添加事件的几种方法。前两种方法可以不实现IPostBackEventHandler           上一篇写了一下如何在自定义控件里面添加事件,由简单的开始,一步一步实现了几种添加事件的方式,由于当时只给自定义控件添加了一种外部事件,测试的时候没有什么问题,但是后来在写分页控件的时候,我给分页控件加了两种外部事件,然后测试的时候就出现了一个问题,本来只想调用外部的一种事件,结果外部的两种事件都被调用了。
731 0
iOS 为移动动画中的View添加touch事件
对Core Animation来说,不管是显式动画还是隐式动画,对其设置frame都是立即设置的,比如说给一个UIView做移动动画,虽然看起来frame在持续改变,但其实它的frame已经是最终值了,这种情况下,哪怕这个UIView是UIButton的实例,其触发touch事件的范围还是最终frame的地方。
791 0
使用ADO对象添加、修改、删除数据
使用ADO对象对数据库中的数据进行添加、修改和删除等操作。首先创建一个ADO类,通过ADO类连接数据库,并打开记录集。例如,使用ADO对象添加、修改、删除数据,程序设计步骤如下:(1)创建一个基于对话框的应用程序,将对话框的Caption属性修改“使用ADO对象添加、修改、删除数据”。
753 0
React的事件处理函数
React 的事件名称都是使用驼峰标识(比如camelCase) 通过 JSX 可以传递一个函数作为事件处理 HTML: Activate Lasers React: ...
807 0
给DataGrid单元行添加双击事件
现在我需要做到的功能是当我单击DataGrid某行时显示相对应选中的数据信息,在双击此相同行时弹出删除对话框,应该怎么做呢。由于单击问题很简单就不再阐述了,下面我说一下双击事件是怎么实现的。       这里用到了DataGrid的ItemDataBound事件,我们可以把下面的代码加入到所需的程序中就可实现双击的功能。
600 0
+关注
118
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载