遇到了这样一个问题，通过超链接的跳转到不同的页面，然后通过URL的不同的参数，来触发相应的事件
先看看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">跳转到dome2,触发btn1事件</a><br/>
<a href="dome2.html?btn=btn2">跳转到dome2,触发btn2事件</a>
</body>
</html>下面是截图
通过点击不同的超链接，跳转到dome2.html，并且通过参数的不同来触发不同的按钮事件
下面是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 = {}; // 对象属性，有三个方法
// this.handlers = {
// type1 : [type1Fun1, type1Fun2],
// type2 : [type2Fun1, type2Fun2]
// }
}
EventTarget.prototype = {
constructor : EventTarget,
/**绑定事件
* param type : 自定义事件类型
* param handler : 自定义事件绑定的回调函数
*/
addHandler : function (type, handler) {
// 如果传入的事件类型为undefined，就创建一个数组
if (typeof this.handlers[type] == "undefined") {
this.handlers[type] = [];
}
// 再将回调函数添加到数组中去
this.handlers[type].push(handler);
},
/**触发事件
* param event : 传入的对象
* { 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); // 调用对应事件的回调函数
}
} else {
throw new Error("No event can call");
}
},
/**注销事件的回调函数
* param type : 事件类型
* param handler : 回调函数
* 调用示例：removeHanlder("show", showMessage);
* 注销show类型的showMessage函数
**/
removeHandler : function (type, handler) {
if (this.handlers[type] instanceof Array) {
var handlers = this.handlers[type]; // 取得对应事件的回调函数
for (var i = 0, len = handlers.length; i < len; i++) {
if (handlers[i] == handler) {
break; // 得到对应事件的索引值
}
}
handlers.splice(i, 1); // 删除索引值，即删除对应的事件的其中一个回调函数
}
}
}
function btn1Fun(){
alert("btn1Fun");
}
var btn2Fun = function (){
alert("btn2Fun");
}
var eventTarget = new EventTarget();
// 获取请求的参数
var request = window.location.search.substring(1);
// 获取value值
var value = request.split("=")[1];
// 通过遍历button触发事件
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，并且获取参数btn的值，然后根据不同的值来绑定并且触发不同的事件。
假设我们在dome.html中点击了第二行的超链接，那么页面就会跳转到dome2.html页面中，并且触发btn2的事件，弹出”btn2”对话框
下面是截图
网友评论