JS绑定事件传参（用于加载页面后trigger传递参数，方便程序控制初始化）
1. 问题描述
当页面第一次加载的时候，主动触发绑定的事件与用户触发绑定事件不完全相同的时候，可以使用js绑定事件传参。
2. 案例
2.1 单值传参
-
-
<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(
"我是初始化显示出来的。");
//添加
-
}
else{
-
$(
"#appendDom").empty();
//清除里面的dom
-
$(
"#appendDom").append(
"我是被用户点击显示出来的。");
//添加
-
}
-
});
-
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 多值传参
-
-
<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(
"我是初始化显示出来的。");
//添加
-
}
else{
-
$(
"#appendDom").empty();
//清除里面的dom
-
$(
"#appendDom").append(
"我是被用户点击显示出来的。");
//添加
-
}
-
if(tom ==
"tom"){
-
$(
"#appendDom").append(
"tom初始化显示。");
//添加
-
}
-
});
-
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 对象传参
-
-
<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(
""+user.name+
" 是 "+user.age+
" 岁了。");
//添加
-
}
else{
-
$(
"#appendDom").empty();
//清除里面的dom
-
$(
"#appendDom").append(
"我是被用户点击显示出来的。");
//添加
-
}
-
-
});
-
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>
3. 总结
- trigger第二个参数是object类型，只有两个参数。
- 绑定事件函数，可以接收多个参数，如果trigger第二个参数是数组类型的话。
- 绑定事件函数，第一个参数event必须写，因为第一个参数默认传递的是event，所以需要占位。
- 用于初始化和绑定事件并不完全一致的情况下。