源碼:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button>賦詩(shī)</button>
<script>
var btn = document.getElementsByTagName("button")[0];
// btn.addEventListener("click",fn1);
// btn.addEventListener("click",fn2);
fn("click",fn1,btn);
fn("click",fn2,btn);
fn("click",fn3,btn);
function fn1(){
console.log("1");
}
function fn2(){
console.log("2");
}
function fn3(){
console.log("3");
}
//原理(了解)(自己封裝一個(gè))(click)
function fn(str,fn,ele){
//判斷位置要注意:如果進(jìn)入綁定事件本身荠列,那么該事件已經(jīng)本綁定了
//所以獲取舊的事件必須在新的事件綁定之前
var oldEvent = ele["on"+str];
console.log(oldEvent)
// console.log(oldEvent)
ele["on"+str] = function () {
//不能直接執(zhí)行函數(shù),因?yàn)槲覀冞€不知道以前有沒有綁定我同樣的事件
//進(jìn)行判斷,如果以前有過綁定事件,那么把以前的執(zhí)行完畢在執(zhí)行現(xiàn)在的事件,如果沒有就直接執(zhí)行
//如果沒有被定義過事件該事件源的該事件屬性應(yīng)該是null對(duì)應(yīng)的boolean值是false
//如果已經(jīng)定義過事件該事件源的該事件屬性應(yīng)該是function本身對(duì)應(yīng)的boolean值是true
if(oldEvent){
//因?yàn)閛ldEvent本身他就是函數(shù)本身,那么后面加一個(gè)();就是執(zhí)行函數(shù)
oldEvent();
fn();
}else{
//沒有綁定過事件
fn();
}
}
}
</script>
</body>
</html>