<!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代码:
/** * 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; } }