遇到了這樣一個(gè)問(wèn)題，通過(guò)超鏈接的跳轉(zhuǎn)到不同的頁(yè)面，然后通過(guò)URL的不同的參數(shù)鹃觉，來(lái)觸發(fā)相應(yīng)的事件
先看看dome.html的超鏈接部分：
<!DOCTYPE html>
<html>
<meta charset="utf-8"/>
<head>
<link rel="stylesheet" type="text/css" href="dome.css"/>
</head>
<body>
<a href="dome2.html?btn=btn1">跳轉(zhuǎn)到dome2,觸發(fā)btn1事件</a><br/>
<a href="dome2.html?btn=btn2">跳轉(zhuǎn)到dome2,觸發(fā)btn2事件</a>
</body>
</html>下面是截圖
通過(guò)點(diǎn)擊不同的超鏈接赤惊，跳轉(zhuǎn)到dome2.html，并且通過(guò)參數(shù)的不同來(lái)觸發(fā)不同的按鈕事件
下面是dome2.html的代碼：
<!DOCTYPE html>
<html>
<meta charset="utf-8"/>
<head>
</head>
<body>
<input type="button" id="btn1" value="btn1"/><br/>
<input type="button" id="btn2" value="btn2"/>
<script>
window.onload = function () {
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
function EventTarget () {
this.handlers = {}; // 對(duì)象屬性，有三個(gè)方法
// this.handlers = {
// type1 : [type1Fun1, type1Fun2],
// type2 : [type2Fun1, type2Fun2]
// }
}
EventTarget.prototype = {
constructor : EventTarget,
/**綁定事件
* param type : 自定義事件類型
* param handler : 自定義事件綁定的回調(diào)函數(shù)
*/
addHandler : function (type, handler) {
// 如果傳入的事件類型為undefined，就創(chuàng)建一個(gè)數(shù)組
if (typeof this.handlers[type] == "undefined") {
this.handlers[type] = [];
}
// 再將回調(diào)函數(shù)添加到數(shù)組中去
this.handlers[type].push(handler);
},
/**觸發(fā)事件
* param event : 傳入的對(duì)象
* { type : "show", message : "hello world"}
*/
fire : function (event) {
if (!event.target) {
event.target = this;
}
if (this.handlers[event.type] instanceof Array) {
var handlers = this.handlers[event.type];
for (var i = 0, len = handlers.length; i < len; i++) {
handlers[i](event); // 調(diào)用對(duì)應(yīng)事件的回調(diào)函數(shù)
}
} else {
throw new Error("No event can call");
}
},
/**注銷事件的回調(diào)函數(shù)
* param type : 事件類型
* param handler : 回調(diào)函數(shù)
* 調(diào)用示例：removeHanlder("show", showMessage);
* 注銷show類型的showMessage函數(shù)
**/
removeHandler : function (type, handler) {
if (this.handlers[type] instanceof Array) {
var handlers = this.handlers[type]; // 取得對(duì)應(yīng)事件的回調(diào)函數(shù)
for (var i = 0, len = handlers.length; i < len; i++) {
if (handlers[i] == handler) {
break; // 得到對(duì)應(yīng)事件的索引值
}
}
handlers.splice(i, 1); // 刪除索引值，即刪除對(duì)應(yīng)的事件的其中一個(gè)回調(diào)函數(shù)
}
}
}
function btn1Fun(){
alert("btn1Fun");
}
var btn2Fun = function (){
alert("btn2Fun");
}
var eventTarget = new EventTarget();
// 獲取請(qǐng)求的參數(shù)
var request = window.location.search.substring(1);
// 獲取value值
var value = request.split("=")[1];
// 通過(guò)遍歷button觸發(fā)事件
var input = document.getElementsByTagName("input");
for (var i = 0, len = input.length; i < len; i++) {
if (value === input[i].value) {
eventTarget.addHandler("click", eval(value + "Fun"));
eventTarget.fire({ type : "click"});
}
}
}
</script>
</body>
</html>在dome2.html中涡驮，我們首先解析url，并且獲取參數(shù)btn的值喜滨，然后根據(jù)不同的值來(lái)綁定并且觸發(fā)不同的事件捉捅。
假設(shè)我們?cè)赿ome.html中點(diǎn)擊了第二行的超鏈接，那么頁(yè)面就會(huì)跳轉(zhuǎn)到dome2.html頁(yè)面中虽风，并且觸發(fā)btn2的事件棒口，彈出”btn2”對(duì)話框
下面是截圖
