JS-DOM2级事件对象跨浏览器处理(已封装)

 1 var eventUill = {
 2     //添加事件
 3     addHander: function(element, type, handler) {
 4         if(element.addEventListener) {
 5             element.addEventListener(type, handler, false);
 6         } else if(element.attachEvent) {
 7             element.attachEvent('on' + type, handler);
 8         } else {
 9             element['on' + type] = handler;
10         }
11     },
12     //移除事件
13     removeHander: function(element, type, handler) {
14         if(element.removeEventListener) {
15             element.removeEventListener(type, handler, false);
16         } else if(element.detachEvent) {
17             element.detachEvent('on' + type, handler);
18         } else {
19             element['on' + type] = handler;
20         }
21     },
22     //获取到拥有这个事件的标签名称——事件对象(如input)
23     getEvent: function(event){
24         return event?event:window.event;//注意:返回后需要调用。可配合nodeName,来单独获取到标签的名字。
25     },
26     //获取事件的类型
27     getType: function(event){
28         return event.type;//注意:返回后需要调用。
29     },
30     //获取事件来自于哪个元素
31     getElement: function(event){
32         return event.target || event.srcElement;
33     },
34     //阻止、取消事件的默认行为/属性发生
35     preventDefault: function(event){
36         if(event.preventDefault){
37             event.preventDefault();
38         }else{
39             event.returnValue = null;
40         }
41     },
42     //阻止冒泡行为
43     stopPropagation: function(event){
44         if(event.stopPropagation){
45             event.stopPropagation();
46         }else{
47             event.cancelBubble = true;
48         }
49     }
50     
51     
52     
53     
54 }

遇到的小bug总结:

  1.   封装的库根本找不到,颜色都是灰的,说明代码是错的,通过在js中添加了一个var eventUill = {},建立了一个对象,html这里调用对象的addHander,
  2.   eventUill找不到,发现,引用外部库的js代码写在来调用库中函数的下边,根据文档流的优先级,说明还没有调出eventUill之前就执行函数了所以出错。那就把调用的外部库写到最上面,让他优先调用。
  3.   addEventLister不对,把ele改成了element,是不是以后写,这里也必须写element呢?全部改成element后变绿了,代码正确。
  4.   说element为空。那么element接受传过来的参数是空的,但是html中的btn处是没有问题的,我getElementById的代码也没有错。看来是老毛病又犯了。js写在html上面,获取id为btn的按钮,根据文档流,他还没有读到input的时候就去获取,你让他去哪里获取。找不到btn,自然传过去的是undefined。紧接着element就成null了。解决就是加上window。onload=function(所有的js代码)调用id的代码写到html的下边。这也是js习惯上要放到body的后边的理由。

以下是测试时的html文件,DOM2级事件-跨浏览器处理.js就是上面的js源码。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>dom2级事件跨浏览器处理-封装库</title>
        <script src="DOM2级事件-跨浏览器处理.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            window.onload = function() {
                    var btn = document.getElementById('btn');
                    eventUill.addHander(btn, 'click', function() {
                        alert('点击后通过封装的库辗转调用了这个匿名函数');
                        alert(eventUill.getEvent(btn).nodeName);
                        alert(eventUill.getElement(btn));
                    });
                }
        </script>

    </head>

    <body>
        <input type="button" value="点击" id="btn" />
    </body>

</html>

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏c#开发者

如何在DataGrid里面产生滚动条而不滚动题头

我们在开发的时候一定遇到,使用DataGrid的时候由于不想分页(数据没有那么多)但是又显示不在一页里面,此时我们希望在DataGrid里面出现一个滚动条,可以...

38011
来自专栏GIS讲堂

Arcgis for Js实现graphiclayer的空间查询(续)

上文中,实现了简单的针对graphiclayer的空间查询工作,在本节,将更加详细的介绍针对graphiclayer的空间查询。首先,空间查询的方式:提供多种类...

1113
来自专栏PHP在线

jQuery学习笔记

jQuery大部分功能需要根据文档的DOM模型来工作,首先需要正确地解析到整个文档的DOM模型结构。使用jQuery需要在整个文档被浏览器完全加载后才开始进行。

1132
来自专栏Google Dart

AngularDart4.0 指南- 模板语法二 顶

Class绑定语法类似于属性(property)绑定。 以前缀类开始,可选地跟一个点(.)和一个CSS类的名字替代括号内的元素属性:[class.class-n...

1262
来自专栏hotqin888的专栏

bootstrap table x-editable select2——带图标的选择

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hotqin888/article/det...

1.2K1
来自专栏小灰灰

Java 实现 markdown转Image

markdown 转 image 前段时间实现了长图文生成的基本功能,然后想了下能否有个进阶版,直接将markdown生成渲染后的图片呢? 思路 有不少的库...

3315
来自专栏魂祭心

原 利用Appdomain动态加载程序集,

3678
来自专栏禹都一只猫博客

Go语言简介 — 特性

1271
来自专栏佳爷的后花媛

前端面试题整理

两栏布局是主内容区为主,左(右)侧有一栏,(将侧边区块<aside>域浮动,<aside>浮动后覆盖绿色<main>, 再将<main> overflow:au...

4472
来自专栏码生

React Native 大纲

843

扫码关注云+社区

领取腾讯云代金券