JavaScript为一个元素绑定多个事件处理函数
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" value="按钮" />
<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代码:
/**
* 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;
}
}