JS自定义事件绑定--通过URL触发不同的点击事件

今天,遇到了这样一个问题,通过超链接的跳转到不同的页面,然后通过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”对话框
下面是截图
JS自定义事件绑定--通过URL触发不同的点击事件_第1张图片

你可能感兴趣的:(参数触发事件)