jQuery从入门到熟练(19)

(2) 事件切换
hover(function(){}, function(){}) 同时绑定鼠标移入和移出监听
区别 mouseover 与 mouseenter?
mouseover: 在移入子元素时也会触发, 对应mouseoutmouseenter: 只在移入当前元素时才触发, 对应mouseleave
hover() 使用的就是 mouseenter() 和 mouseleave()
区别 on("eventName", fun) 与 eventName(fun)
on("eventName", fun): 通用, 但编码麻烦eventName(fun): 编码简单, 但有的事件没有对应的方法
<style type="text/css"> * { margin: 0px; } .div1 { position: absolute; width: 200px; height: 200px; top: 50px; left: 10px; background: olive; } .div2 { position: absolute; width: 100px; height: 100px; top: 50px; background: red; } .div3 { position: absolute; width: 200px; height: 200px; top: 50px; left: 230px; background: olive; } .div4 { position: absolute; width: 100px; height: 100px; top: 50px; background: yellow; } .divText{ position: absolute; top: 330px; left: 10px; }</style><div class="divText"> 区分鼠标的事件</div><div class="div1"> div1..... <div class="div2">div2....</div></div><div class="div3"> div3..... <div class="div4">div4....</div></div><script src="js/jquery-1.10.1.js" type="text/javascript"></script><script type="text/javascript"> $(".div1") .mouseover(function () { console.log("mouseover 进入") }) .mouseout(function () { console.log("mouseout 离开") }) $(".div3") .mouseenter(function () { console.log("mouseenter 进入") }) .mouseleave(function () { console.log("mouseleave 离开") })</script>