（1）为元素绑定事件 在jquery中，为元素绑定的事件可以使用bind()方法，结构为bind(type,[data],fn) 例：
<script src="js/jquery-1.11.1.min.js" type="text/javascript"></script> <script> $(document).ready(function(){ $("#first h3.title").bind("click",function(){ $(this).next().show(); }) }); </script> <style> #content{ text-indent: 2em; display: none; } </style> </head> <body> <div id="first"> <h3 class="title">什么是编辑词典?</h3> <div id="content"> 明日编程词典系列软件是由近百位软件开发专业人士联手打造； </div> </div>（2）移除绑定 在jquery中，为元素绑定的事件可以使用unbind()方法，结构为unbind([type],[data]) 例：
<script src="js/jquery-1.11.1.min.js" type="text/javascript"></script> <script> $(document).ready(function(){ $("#first h3.title").bind("click",function(){ $(this).next().show(); }).bind("mouseover",function(){ $(this).append("<p>我绑定了mouseover事件</p>"); }) $("#first h3.title").unbind("mouseover"); }); </script> <style> #content{ text-indent: 2em; display: none; } </style> </head> <body> <div id="first"> <h3 class="title">什么是编辑词典?</h3> <div id="content"> 明日编程词典系列软件是由近百位软件开发专业人士联手打造； </div> </div>（1）模拟用户的操作触发事件 在JQuery中一般常用triggerHandler()方法和trigger()方法模拟用户的操作触发事件
<script> $(document).ready(function(){ $("input:button").bind("click",function(event,msg1,msg2){ alert(msg1+msg2); }).trigger("click",["欢迎访问","明日科技"]); }); </script> </head> <body> <input type="button" name="button" id="button" value="普通按钮"/>（2）模仿悬停事件 模仿悬停事件是指模仿鼠标移动到一个对象上面又从该对象上面移出的事件，可以通过JQuery提供的hover(over,out)方法实现
<script type="text/javascript"> $(document).ready(function(){ $("a.main").hover(function(){ window.status="http://www.mrbccd.com";return true; },function(){ window.status="完成";return true; }); }); </script> </head> <body> <div style="float:right;text-align: right;"> <a href="jq5-4.html">首页</a> | <a href="jq5-4.html" class="main">登录</a> | <a href="jq5-4.html" class="main">注册</a> | <a href="jq5-4.html" class="main">找回密码</a> </div>（1）事件冒泡
<style> .redBorder{ border:1px solid red; } .test1{ width: 240px; height: 150px; background-color: #cef; text-align: center; } .test2{ width: 160px; height: 100px; background-color: #ced; text-align: center; line-height: 20px; margin: 10px auto; } span{ width: 100px; height: 35px; background-color: #fff; padding: 20px 20px 20px 20px; <!--display: block;--> } body{font-size: 12px;} </style> <title>事件冒泡</title> <script src="js/jquery-1.11.1.min.js" type="text/javascript"></script> <script> $(document).ready(function(){ $(".test1").mouseover(function(event){ $(".test1").addClass("redBorder"); }); $(".test1").mouseout(function(event){ $(".test1").removeClass("redBorder"); }); $(".test2").mouseover(function(event){ $(".test2").addClass("redBorder"); }); $(".test2").mouseout(function(event){ $(".test2").removeClass("redBorder"); }); $(".span").mouseover(function(event){ $(".span").addClass("redBorder"); }); $(".span").mouseout(function(event){ $(".span").removeClass("redBorder"); }); }); </script> </head> <body> <div class="test1"> <b>div元素</b> <p class="test2"> <b>p元素</b><br/><br/> <span><b>span元素</b></span> </p> </div>（2）阻止浏览器默认行为
<script> $(document).ready(function(){ $("#subbtn").bind("click",function(event){ var username=$("#username").val(); if(username==""){ alert("用户名不能为空!"); $("#username").focuse(); event.preventDefault(); } }) }); </script> </head> <body> <form action="jq5-6.html" method="post"> 用户名:<input type="text" id="username"/><br /> <input type="submit" value="注册" id="subbtn"/> </form>（3）事件对象的属性
<script src="js/jquery-1.11.1.min.js" type="text/javascript"></script> <script> $(document).ready(function(){ $("#ediv").mouseover(function(event){ alert("当前鼠标的位置是"+event.pageX+","event.pageY); }) }); </script> </head> <body> <div id="ediv">Event对象</div>