jQuery事件触发和参数传递
jQuery事件触发和参数传递：
参考：http://www.jb51.net/article/36249.htm
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<meta charset="UTF-8">
<title>b index</title>
<link rel='stylesheet' type="text/css" href='b/css/bootstrap.css'>
</head>
<body >
<div >div001</div>
<div >div002</div>
<div >div003</div>
<div>
<button >click me to log something </button>
<button >click me to trigger btn001 function </button>
<button >click me to trigger btn001 click use s,s,s</button>
<button >click me to trigger btn001 click use e,s,s</button>
<button >click me to trigger btn001 by trigger</button>
<button >click me to trigger btn001 by click</button>
<button >click me to trigger btn001 by trigger(type,data)</button>
<button >click me to trigger btn001 by click(data,btn001fun)</button>
<button >click me to trigger btn001 by click(data,function(){})</button>
<button >click me to trigger btn001 by click(function(){})</button>
</div>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="b/js/bootstrap.js"></script>
<script type="text/javascript" src="js/index033.js"></script>
</body>
</html>$(function() {
$('#btn001').click(btn001Click);
$('#btn002').click(btn002Click);
$('#btn003').click(btn003Click);
$('#btn004').click(btn004Click);
$('#btn005').click(btn005Click);
$('#btn006').click(btn006Click);
$('#btn007').click(btn007Click);
$('#btn008').click(btn008Click);
$('#btn009').click(btn009Click);
$('#btn010').click(btn010Click);
});
// 这样的情况下，如果是事件调用，a参数就是jQuery.Event；
function btn001Click(a, b, c) {
console.log('this is in btn001Click');
console.log(arguments.length);
for (var i = 0, len = arguments.length; i < len; i++) {
console.log((i + 1) + ':' + arguments[i]);
}
}
function btn002Click() {
// 这样只是一般的函数调用
btn001Click('a', 'b', 'c');
}
function btn003Click() {
// 这样没有反应，相当于重新给btn001赋予click事件，但是还没有函数；
$('#btn001').click('a', 'b', 'c');
// 但是绑定之后点击按钮会出现问题；Uncaught TypeError: undefined is not a function
}
function btn004Click() {
// 这样会报错，e is not defined
// $('#btn001').click(e, 'b', 'c');
}
function btn005Click() {
// 可以触发事件
$('#btn001').trigger('click');
}
function btn006Click() {
// 可以触发事件
$('#btn001').click();
}
function btn007Click() {
// 这样可以正常调用，并且可以把参数传进去，第一个参数还是jQuery.Event
// 只能传进去一个参数,下面的情况只能把a传进去；而且这样jQuery.Event.data是null；
$('#btn001').trigger('click', 'a', 'b', 'c');
// 这样会报异常， e is not defined
// $('#btn001').trigger('click',[e,'a','b','c']);
}
function btn008Click() {
console.log('btn008Click');
// 这样只是进行了绑定，不是进行执行；如果初始化的时候绑定过事件，那么这样就绑定两个事件了；
// 可以用a.data来查看是哪一个事件执行了；
$('#btn001').click([ 'a', 'b', 'c' ], btn001Click);
// 如果绑定多个参数，绑定之后点击按钮会出现问题；Uncaught TypeError: undefined is not a function
// 只能传递一个对象，在btn001Click中使用jQuery.Event.data来获取参数；
}
function btn009Click() {
console.log('btn009Click');
// 只是进行了绑定，必须点击btn001才可以触发；
$('#btn001').click([ 'a', 'b', 'c' ], function(a, b) {
// 只传递一个对象，可以保证不报错了，在函数中使用a.data来获取参数；
console.log('this is anonymous function');
});
}
function btn010Click() {
console.log('btn010Click');
$('#btn001').click(function() {
console.log('this is anonymous function');
});
}