zoukankan      html  css  js  c++  java
  • JavaScript 事件兼容性写法

    1、以下是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>
  • 相关阅读:
    VS2012打包部署Winform程序
    WPF 触发器Triggers
    VS2010中的顺序图
    decimal,float和double的区别
    EXCEL基本知识
    java byte 循环左移 循环右移 rotateLeft rotateRight
    博客地址转移
    PHP学习思维导图
    一款web前端在线编辑器
    9patch android .9格式使用
  • 原文地址:https://www.cnblogs.com/wangweizhang/p/8328806.html
Copyright © 2011-2022 走看看