JavaScript 事件兼容性

最新推荐文章于 2024-09-16 08:47:17 发布

weixin_34409741

最新推荐文章于 2024-09-16 08:47:17 发布

阅读量75

点赞数

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5cce40a1f265da0393787a16

版权

通常，我们为某个控件元素添加事件时，用的是：

ele.onclick=fn1(){};
或者
ele.onclick=fn1;  //此时不需要加括号，调用的是整个方法而不是return的结果
function fun1(){}
复制代码

这种绑定事件的方法简单高效，但对同一个控件的同一个动作进行绑定时，前面的事件容易被重叠。故需要对控件的事件进行监听。监听的方法有两种，分别为addEventListener和attachEvent。

addEventListener

是W3C所支持的事件绑定方法，Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持该函数

ele.addEventListener(type,listener,useCapture);共三个参数

ele：需要绑定的控件或是html结点

type：触发事件名称。注意：需要去掉‘on’,为‘click’或者‘mouseover’等

listener：事件的监听函数，即要执行的方法。注意：在此，函数名不需要加()。因为不调用的是整个函数，而不是返回的结果。

useCapture：事件监听方式，只能是true和false。

true，采用capture(捕获模式:从外向内)；

false，采用bubbling(冒泡模式：从内向外)。

如无特殊要求，一般是false。

attechEvent（支持IE8.0及其以下版本ie6、7、8）

ele.attechEvent(type,function);

type 触发事件名称。注意：不能去掉'on',为'onclick'或者'onmouseover'等

function 事件的监听函数，即要执行的方法。同样的不带()。

以下是JavaScript事件兼容性写法，使用者可以随意使用，兼容所有浏览器。包括IE6

<!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>
复制代码