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;
    }
}