JS绑定事件传参（用于加载页面后trigger传递参数，方便程序控制初始化）1. 问题描述2. 案例3. 总结

89 阅读 0 评论 59 点赞

我是靠谱客的博主神勇灰狼，最近开发中收集的这篇文章主要介绍JS绑定事件传参（用于加载页面后trigger传递参数，方便程序控制初始化）1. 问题描述2. 案例3. 总结，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1. 问题描述

当页面第一次加载的时候，主动触发绑定的事件与用户触发绑定事件不完全相同的时候，可以使用js绑定事件传参。

2. 案例

2.1 单值传参

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script>
        $(function () {
            //单值传参
            $("#btn").on("click",function (event,user) {
                alert(user);//弹窗传递的参数
                if(user == "user"){
                    $("#appendDom").empty();//清除里面的dom
                    $("#appendDom").append("<span style='color: #f10'>我是初始化显示出来的。</span>");//添加
                }else{
                    $("#appendDom").empty();//清除里面的dom
                    $("#appendDom").append("<span style='color: #f10'>我是被用户点击显示出来的。</span>");//添加
                }
            });
            var user = "user";
            //页面JS加载完毕就触发一次
            //trigger 第一个参数是绑定事件类型，第二个参数是object类型，即传递的参数
            $("#btn").trigger("click",user);
        })
    </script>

</head>
<body>
    <button id="btn">请点击我</button>
    <div id="appendDom"></div>
</body>
</html>

2.2 多值传参

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script>
        $(function () {
            //多值传参
            $("#btn").on("click",function (event,user,tom) {
                alert(user);//弹窗传递的参数
                alert(tom);//弹窗传递的参数
                if(user == "user"){
                    $("#appendDom").empty();//清除里面的dom
                    $("#appendDom").append("<span style='color: #f10'>我是初始化显示出来的。</span>");//添加
                }else{
                    $("#appendDom").empty();//清除里面的dom
                    $("#appendDom").append("<span style='color: #f10'>我是被用户点击显示出来的。</span>");//添加
                }
                if(tom == "tom"){
                    $("#appendDom").append("<span style='color: #f10'>tom初始化显示。</span>");//添加
                }
            });
            var user = "user";
            var tom = "tom";
            //页面JS加载完毕就触发一次
            //trigger 第一个参数是绑定事件类型，第二个参数是object类型，即传递的参数
            $("#btn").trigger("click",[user,tom]);
        })
    </script>

</head>
<body>
    <button id="btn">请点击我</button>
    <div id="appendDom"></div>
</body>
</html>

2.3 对象传参

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script>
        $(function () {
            //对象传参
            $("#btn").on("click",function (event,user) {
                alert(user);//弹窗传递的参数
                if(user != undefined){
                    $("#appendDom").empty();//清除里面的dom
                    $("#appendDom").append("<span style='color: #f10'>"+user.name+" 是 "+user.age+" 岁了。</span>");//添加
                }else{
                    $("#appendDom").empty();//清除里面的dom
                    $("#appendDom").append("<span style='color: #f10'>我是被用户点击显示出来的。</span>");//添加
                }

            });
            var user = new Object();
            user.name = "张三";
            user.age=22;

            //页面JS加载完毕就触发一次
            //trigger 第一个参数是绑定事件类型，第二个参数是object类型，即传递的参数
            $("#btn").trigger("click",user);
        })
    </script>

</head>
<body>
    <button id="btn">请点击我</button>
    <div id="appendDom"></div>
</body>
</html>