為元素綁定事件和解綁事件的兼容代碼!
<!DOCTYPE html>
<html lang="en">
? ? <meta charset="UTF-8">
<input type="button" value="按鈕" id="btn1"/>
<input type="button" value="清除第一個按鈕" id="btn2"/>
<script src="common.js">
? ? //綁定事件的兼容
? ? function addEventListener(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;? //對象.什么可以用中括號來代替
? ? ? ? }
}
//解綁事件的兼容
//為任意的一個元素沈跨,解綁對應(yīng)的事件
? ? function removeEventListener(element,type,fnName) {
if(element.removeEventListener) {
element.removeEventListener(type,fnName,false);
? ? ? ? }else if(element.detachEvent) {
element.detachEvent("on" + type,fnName);
? ? ? ? }else {
element["on" + type] =null;
? ? ? ? }
}
function f1() {
console.log("第一個");
? ? }
function f2() {
console.log("第二個");
? ? }
addEventListener(my$("btn1"),"click",f1);
? ? addEventListener(my$("btn1"),"click",f2);
? ? my$("btn2").onclick =function () {
removeEventListener(my$("btn1"),"click",f1);
? ? };
</html>