一、JQuery事件
1.事件绑定与解绑（on&off）,(bind&unbind)
//on绑定 $("#btn1").on('click',function(){ alert("你好帅") //解绑 // $(this).off() $(this).unbind() }) //bind绑定 $("#btn1").bind('click',function(){ alert("你好帅") //解绑 $(this).unbind() })
2.hover合成事件(本身具有mouseout&mouseover属性)鼠标移入移出
// hover合成事件 $("#btn1").hover(function(){ //hide控制标签隐藏 $("div").hide(2000) },function(){ //show控制标签显示 $("div").show(2000) })
3. toggle事件（本身具有click触发）
//toggle事件 $("#btn1").toggle(function(){ $("div").hide(2000); },function(){ $("div").show(2000); },function(){ alert("你真的帅"); });
4.事件的传播
案例详解：body包裹了id="three"的div，正常不进行阻止事件传播时，当我们点击
<div id="three">时，body的点击事件也会执行，反之，阻止<div id="three">的事件传播后，
body的点击事件不再执行
//事件的传播 $("body").click(function(){ alert("你好帅") }) $("#three").click(function(){ alert("你是真的帅") return false //阻止传播 }) <body> <button id="btn1">点击1</button> <div style="width: 100px;height: 100px;background-color: red;"></div> <hr> <div id="one" style="background-color: red;width: 200px;height: 200px;padding-top: 50px;"> <div id="two" style="background-color: blue;width: 100px;height: 100px;margin: 0 auto;"> <p id="three" style="background-color: yellow;">我是P段落</p> </div> </div> </body>
5.获取页面坐标
//坐标问题 $("body").click(function(){ console.log(event.pageX,event.pageY,event.offsetX,event.offsetY) })
