JavaScript 事件兼容性

時間 2019-11-17

原文原文鏈接

一般，咱們爲某個控件元素添加事件時，用的是：javascript

ele.onclick=fn1(){};
或者
ele.onclick=fn1;  //此時不須要加括號，調用的是整個方法而不是return的結果
function fun1(){}
複製代碼

這種綁定事件的方法簡單高效，但對同一個控件的同一個動做進行綁定時，前面的事件容易被重疊。故須要對控件的事件進行監聽。監聽的方法有兩種，分別爲addEventListener和attachEvent。html

addEventListener

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

ele.addEventListener(type,listener,useCapture);共三個參數瀏覽器

ele：須要綁定的控件或是html結點bash

type：觸發事件名稱。注意：須要去掉‘on’,爲‘click’或者‘mouseover’等dom

listener：事件的監聽函數，即要執行的方法。注意：在此，函數名不須要加()。由於不調用的是整個函數，而不是返回的結果。函數

useCapture：事件監聽方式，只能是true和false。工具

true，採用capture(捕獲模式:從外向內)；ui

false，採用bubbling(冒泡模式：從內向外)。this

如無特殊要求，通常是false。

attechEvent（支持IE8.0及其如下版本ie六、七、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>
複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。