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”对话框
下面是截图

版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/super_yang_android/article/details/51232940
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2019-09-04 15:08:40
阅读 ( 1494 )
分类：前端

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

你可能感兴趣的文章

精选的优质文章

0 条评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看