1. 問題描述
當頁面第一次加載的時候，主動觸發綁定的事件與使用者觸發綁定事件不完全相同的時候，可以使用js綁定事件傳參。
2. 案例
2.1 單值傳參
<!DOCTYPE html>
<html >
<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 >
<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 >
<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>
3. 總結
- trigger第二個參數是object類型，隻有兩個參數。
- 綁定事件函數，可以接收多個參數，如果trigger第二個參數是數組類型的話。
- 綁定事件函數，第一個參數event必須寫，因為第一個參數預設傳遞的是event，是以需要占位。
- 用于初始化和綁定事件并不完全一緻的情況下。
![怎樣使用SpringMVC控制頁面[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)