JavaScript爲一個元素綁定多個事件處理函數

時間 2019-12-01

標籤 javascript 一個元素綁定多個事件處理函數欄目 JavaScript 简体版

原文原文鏈接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<input type="button" value="按鈕" id="bt"/>
<script src="common.js"></script>
<script>
    my$("bt").onclick = f1;
    my$("bt").onmouseover = f1;
    my$("bt").onmouseout = f1;
    function f1(e) {
        switch (e.type) {
            case "click":
                alert("哈哈");
                break;
            case "mouseover":
                this.style.backgroundColor = "red";
                break;
            case "mouseout":
                this.style.backgroundColor = "green";
                break;
        }
    }
</script>
</body>
</html>

common.js代碼:html

/**
 * Created by Administrator on 2018/7/22.
 */
function my$(id) {
    return document.getElementById(id);
}
//設置任意的標籤中間的文本內容
function setInnerText(element, text) {
    //判斷瀏覽器是否支持該屬性
    if (typeof element.textContent == "undefined") {
        element.innerText = text;
    } else {
        element.textContent = text;
    }
}
//獲取任意標籤中間的文本內容
function getInnerText(element) {
    if (typeof element.textContent == "undefined") {
        return element.innerText;
    } else {
        return element.textContent;
    }
}
//獲取任意一個父級元素的第一個子級元素
function getFirstElementChild(element) {
    if (element.firstElementChild) {//true 支持
        return element.firstElementChild;
    } else {
        var node = element.firstChild;//第一個子節點
        while (node && node.nodeType != 1) {
            node = node.nextSibling;
        }
        return node;
    }
}

//獲取任意一個父級元素的最後一個子級元素
function getLastElementChild(element) {
    if (element.lastElementChild) {
        return element.lastElementChild;
    } else {
        var node = element.lastChild;
        while (node && node.nodeType != 1) {
            node = node.previousSibling;
        }
        return node;
    }
}

//爲任意元素綁定任意事件
//參數1:任意元素
//參數2:事件類型
//參數3:事件處理函數
function addEventListner (element, type, fn) {
    //判斷瀏覽器是否支持該方法
    if(element.addEventListener) {
        element.addEventListener(type,fn, false);
    }else if(element.attachEvent) {
        element.attachEvent("on" + type, fn);
    }else {
        element["on"+type] = fn;
    }
}