JavaScript 事件兼容性写法

最新推荐文章于 2020-05-16 21:46:31 发布
最新推荐文章于 2020-05-16 21:46:31 发布
阅读量145 收藏
点赞数
分类专栏： j

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <p id="demo">
            <a>点击我将获得节点1</a>
            <a>点击我将获得节点2</a>
        </p>
        <script type="text/javascript">
            // event(事件)工具集
            eventUntil = {
                // 页面加载完成后
                // 主要是原生JS，页面只能加载一次window.onload；这里使用该方法可以绑定多个方法。
                readyEvent : function(fn) {
                    if (fn==null) {
                        fn=document;
                    }
                    var oldonload = window.onload;
                    if (typeof window.onload != 'function') {
                        window.onload = fn;
                    } else {
                        window.onload = function() {
                            oldonload();
                            fn();
                        };
                    }
                },
                // 视能力分别使用dom0||dom2||IE方式 来绑定事件
                // 下面的顺序：标准dom2，IE dom2， dom
                // 参数： 操作的元素,事件名称 ,事件处理程序
                addEvent : function(element, type, handler) {
                    if (element.addEventListener) {
                        //事件类型、需要执行的函数、是否捕捉
                        element.addEventListener(type, handler, false);
                    } else if (element.attachEvent) {
                        element.attachEvent('on' + type, function() {
                            handler.call(element);
                        });
                    } else {
                        element['on' + type] = handler;
                    }
                },
                // 移除事件
                removeEvent : function(element, type, handler) {
                    if (element.removeEnentListener) {
                        element.removeEnentListener(type, handler, false);
                    } else if (element.datachEvent) {
                        element.detachEvent('on' + type, handler);
                    } else {
                        element['on' + type] = null;
                    }
                }, 
                // 阻止事件 (主要是事件冒泡，因为IE不支持事件捕获)
                stopPropagation : function(ev) {
                    if (ev.stopPropagation) {
                        ev.stopPropagation();// 标准w3c
                    } else {
                        ev.cancelBubble = true;// IE
                    }
                },
                // 取消事件的默认行为
                preventDefault : function(event) {
                    if (event.preventDefault) {
                        event.preventDefault();// 标准w3c
                    } else {
                        event.returnValue = false;// IE
                    }
                },
                // 获取事件目标
                getTarget : function(event) {
                    // 标准W3C 和 IE
                    return event.target || event.srcElement;
                },
                // 获取event对象的引用，取到事件的所有信息，确保随时能使用event；
                getEvent : function(e) {
                    var ev = e || window.event;
                    if (!ev) {
                        var c = this.getEvent.caller;
                        while (c) {
                            ev = c.arguments[0];
                            if (ev && Event == ev.constructor) {
                                break;
                            }
                            c = c.caller;
                        }
                    }
                    return ev;
                }
            };
            
            eventUntil.readyEvent(function(){
                console.log("相比于window.onload可以绑定多个 按顺序执行。");
            })
            eventUntil.addEvent(document.getElementById("demo") , "click" , function(){
                alert("我点击了p元素")
            })
            
        </script>
    </body>
</html>

chinashanzhang
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
window.onload的兼容性写法
weixin_30940783的博客
07-25 466
//原写法 /*window.onload=function(){}*///兼容写法EventUtil.addHandler(window,"load",function(){ }); 转载于:https://www.cnblogs.com/mx2036/p/7233123.html
JS生成注册码
11-29
js生成注册码，在注册某个会员时 需要生成注册码，这个可以。
JavaScript写斐波那契数列的几种方式
热门推荐
小冷_Blog
04-19 2万+
什么是斐波那契数列： 斐波那契数列（Fibonacci sequence），又称黄金分割数列、因数学家列昂纳多·斐波那契（Leonardoda Fibonacci）以兔子繁殖为例子而引入，故又称为“兔子数列”，指的是这样一个数列：1、1、2、3、5、8、13、21、34、……在数学上，斐波纳契数列以如下被以递归的方法定义：F(0)=1，F(1)=1, F(n)=F(n-1)+F(n-2)（n&gt...
Javascript中点击（click）事件的3种写法
默茉的博客
04-18 1万+
方法一： <!DOCTYPE html> <html> <head> <title>Javascript中点击事件方法一</title> </head> <body> <button id="btn">click</button> <script type="text/javas...
JavaScript中事件的兼容性写法
七元八元
08-21 1433
1.    绑定事件 addEventListener： chrome，firefox，IE9 attachEvent：IE8 及IE8以下 function addHandel(element, type, handel) { if (element.addEventListener) { element.addEventListener(type, hand...
Javascript selection的兼容性写法介绍
10-26
本文为大家讲解下Javascript selection的兼容性写法，感兴趣的朋友可以参考下
javascript 处理事件绑定的一些兼容写法
10-29
本文将详细讲解JavaScript处理事件绑定的一些兼容性写法，适用于不同的浏览器环境。 首先，让我们看一个基本的事件绑定函数的实现。这个函数`addEvent`接受三个参数：目标对象`obj`，事件类型`type`，以及事件处理...
谈谈JavaScript中浏览器兼容问题的写法小议
10-20
为了解决这个问题，我们可以采用兼容性写法，即使用逻辑或操作符（`||`）将两种方式结合起来，如下所示： ```javascript var w = window.innerWidth || document.documentElement.clientWidth; var h = window....
js事件写法
老郭的博客
01-23 1834
事件:  可以理解为:一件事           以on前缀开始   on事件名           事件不会自己执行,需要触发       (事件要被触发才可以执行) 事件三要素:  事件对象    事件名称     事件处理函数 常见事件写法: 嵌入式               (传统的事件绑定方法) &lt;button onclick='alert("hello")'&gt;...
HTML学习13 js- window.onload 兼容写法 访问关系 dom的节点操作
lx1315998513的博客
05-16 569
window.onload出现的原因 我们都知道页面的代码顺序是从上往下进行加载，很多时候我们要对页面中的某一个模块进行操作，这时候我们常常使用javascript代码来进行操作。 为了能够保证操作的模块或对象在js代码之前就加载了，我们不得不把js代码放在页面的底端。 但是我们在设计页面的时候，为了把js代码放在一起，或者一个让页面更加简洁的位置，那就有可能出现代码中操作的对象未被加载的情况，那么我们该如何去解决呢？ 这时候window.onload就被有了存在的意义了。 window
Javascript编写的EditPlus注册码生成器
无心的专栏
12-14 2684
今天同事惊奇的告诉我，说找到个在线的EditPlus注册码生成器，我赶紧去看了看，还真是，在这里。 exe的注册机病毒太多，纯js的在线注册机可就放心了。 作者是从别人的注册机反汇编然后找出算法的，更令我惊奇的是，这作者Demon竟然是搞法律的，才刚拿到法律职业资格证书，佩服。 Demo 主要的一个js函数是这样的： function generate_editplu
javascript书写规范
wenmin1987的博客
12-19 338
https://www.jb51.net/article/92433.htm 一、全局命名空间污染 总是将代码包裹在一个立即的函数表达式里面，形成一个独立的模块。   不推荐     var x = 10,      y = 100;     console.log(window.x + ' ' + window.y);   推荐     ;(function(window){      'use...
javaScript的点击事件的写法
glgom的博客
11-02 2251
参考：https://blog.csdn.net/h5css3_linhuai/article/details/56011582 1.使用DOM的事件方法 了解DOM其他事件可到：http://www.runoob.com/jsref/dom-obj-event.html &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&...
js登陆注册验证码
测试
01-02 483
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head>...
传感器实训霍尔件无损探伤.doc
07-16
传感器
客服端连接服务器，传输数据到数据库
最新发布
07-16
创建一个数据库，然后用客户端连接服务器和填写对应的IP，在同一个互联网下传数据 1、代码1是将客户端与服务器连接在同一个网络下填写对应的IP地址，然后按格式输入对应的数据，然后电脑服务器会收到数据并储存于数据库。 2、代码2是客户端与服务器连接在同一个网络下填写对应的IP地址，然后输入对应的数据按格式然后电脑服务器会收到数据并按ID的不同储存于不同的数据库。 3、有一个注意的点是电脑作为服务器，你不能用手机开热点，然后处于同一个网络，因为手机的IP地址它会变换，你会导致连接不成功，可以连同一个网或者电脑连网，然后电脑开热点，这样就可以传输数据储存于数据库。 这个资源是客户端服务器数据库相关知识，它需要你具备相应的代码能力，还有相应的基础知识，希望这个资源可以对大家学习这些有所帮助，不过大家有什么不懂的，可以去看看我写的博客，其中有些知识在这里面可以看到，然后可以运用这些去尝试自己写。 接下来几天我会发送同样的资源，然后对大家了解数据库的增删改查方面的代码，大家可以多多支持一下。如果大家有什么不懂的可以私信留言。我看到会及时回复并帮大家解决问题的，希望大家在这条道路上可以一起努力携手共进
【硬币识别】基于matlab机器视觉硬币数量及其总金额识别【含Matlab源码 5113期】.mp4
07-16
Matlab研究室上传的视频均有对应的完整代码，皆可运行，亲测可用，适合小白； 1、代码压缩包内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描视频QQ名片； 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作
overflow:auto兼容性写法
09-24
### 回答1： 以下是兼容性比较好的写法： ``` div { overflow: auto;...总的来说，以上是常用的两种兼容性写法，可以根据具体情况选择适合的方式来解决overflow:auto在旧版浏览器上的兼容性问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值