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>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM