index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>事件对象</title> <script type="text/javascript" src="jquery-1.10.1.js"></script> <script type="text/javascript" src="demo.js"></script> <link type="text/css" rel="stylesheet" href="style.css" /> </head> <body> <!--input type="button" value="按钮" /> <form action="123.html"> <input type="submit" value="按钮" /> </form> <input type="button" value="按钮" /> <input type="button" value="按钮" /> <input type="button" value="按钮" /> <div class="d1"> <div class="d2"> <div class="d3"> div </div> </div> </div> --> <input type="button" value="按钮" /> </body> </html>
demo.js
$(function(){ /* $('input').click(function(){ alert('我将要使用模拟用户来触发!') }); //模拟用户点击操作 $('input').trigger('click'); $('input').click(function(){ alert('我将要使用模拟用户来触发!') }).trigger('click'); $('input').click(function(e,data1,data2){ alert(data1+'|'+data2) }).trigger('click',['123','abc']); //trigger 额外数据,只有一条的时候,可以省略中括号,多条就不能省略,第二条之后就无法识别了 $('input').click(function(e,data1,data2,data3,data4){ alert(data1+'|'+data2+'|'+data3[1]+'|'+data4.user) }).trigger('click',['123','abc',['a','b','c'],{user:'onestopweb'}]); $('input').bind('click',{user:'chaoyi'},function(e,data1,data2,data3,data4){ alert(data1+'|'+data2+'|'+data3[1]+'|'+data4.user+'|'+e.data.user); }).trigger('click',['123','abc',['a','b','c'],{user:'onestopweb'}]); //click,mouseover 这些系统事件,自定义事件就是自己起名字的事件 $('input').bind('myEvent',function(){ alert('自定认事件!') }).trigger('myEvent'); $('input').click(function(){ alert('我将要使用模拟用户来触发!') }).click(); $('input').click(function(){ alert('我将要使用模拟用户来触发!') }).triggerHandler('click'); //trigger 提交后跳转,没有阻止默认行为 $('form').trigger('submit'); //trigger 提交后没有跳转,默认行为被阻止了 $('form').triggerHandler('submit'); $('form').submit(function(e){ e.preventDefault(); }).trigger('submit'); $('input').click(function(){ alert('我将要使用模拟用户来触发!') }).click();//共执行三次 $('input').click(function(){ alert('我将要使用模拟用户来触发!') }).triggerHandler('click');//共执行一次 $('input').click(function(){ alert('我将要使用模拟用户来触发!') }).trigger('click').css('color','red');//返回 jQuery 对象,可以连缀 alert($('input').click(function(){ alert('我将要使用模拟用户来触发!') return false }).triggerHandler('click')); $('input').click(function(){ alert('我将要使用模拟用户来触发!') return 123; }).triggerHandler('click').css('color','red');//返回 return 值,或 undefined $('div').bind('myEvent',function(){ alert('自定认事件!') }); $('.d3').trigger('myEvent');//会冒泡 */ $('input').bind('click.abc',function(){ alert('abc'); }); $('input').bind('click.xyz',function(){ alert('xyz'); }); $('input').bind('mouseover.abc',function(){ alert('abc'); }); //$('input').unbind('click.abc'); //$('input').unbind('.abc'); $('input').trigger('click.abc'); });