jQuery事件
jQuery 提供额外的事件,用于完善javascript缺失的
focusin 和 focusout
focusin 获得焦点。js focus。
focusin事件跟focus事件区别在于,他可以在父元素上检测子元素获取焦点的情况。
focusout 失去焦点。js blur。
focusout事件跟blur事件区别在于,他可以在父元素上检测子元素失去焦点的情况。
mouseenter 和 mouseleave
mouseenter 鼠标移入。js mouseover
与 mouseover 事件不同,只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素,同样会触发 mouseover 事件。
mouseleave 鼠标移出。js mouseout
与 mouseout 事件不同,只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件。如果鼠标指针离开任何子元素,同样会触发 mouseout 事件。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
#e02{
border: 1px solid #000000;
height: 200px;
width: 200px;
}
</style>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#e01").blur(function(){
$("#textMsg").html("文本框失去焦点:blur");
}).focus(function(){
$("#textMsg").html("文本框获得焦点:focus");
}).keydown(function(){
$("#textMsg").append("键盘按下:keydown");
}).keypress(function(event){
$("#textMsg").append("键盘按下:keypress");
}).keyup(function(){
$("#textMsg").append("键盘按下:keyup");
}).select(function(event){
//支持谷歌
var sub = $(this).val().substring(event.target.selectionStart,event.target.selectionEnd);
$("#textMsg").html("文本内容被选中:select , " + sub);
});
var i = 0;
$("#e02").mouseover(function(){
$("#divMsg").html("鼠标移上:mouseover");
}).mousemove(function(){
$("#divMsg").html("鼠标移动:mousemove , " + i++ );
}).mouseout(function(){
$("#divMsg").html("鼠标移出:mouseout");
}).mousedown(function(){
$("#divMsg").html("鼠标按下:mousedown");
}).mouseup(function(){
$("#divMsg").html("鼠标弹起:mouseup");
});
$("#e03").click(function(){
$("#buttonMsg").html("单击:click");
}).dblclick(function(){
$("#buttonMsg").html("双击:dblclick");
});
});
</script>
</head>
<body>
<input id="e01" type="text" /><span id="textMsg"></span> <br/>
<hr/>
<div id="e02" ></div><span id="divMsg"></span> <br/>
<hr/>
<input id="e03" type="button" value="可以点击"/><span id="buttonMsg"></span> <br/>
</body>
</html>
focusin和focusout
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//父元素不能检测子元素获取焦点情况
//$("#outerDiv").focus(function(){
//alert("outer");
//});
//focusin事件跟focus事件区别在于,他可以在父元素上检测子元素获取焦点的情况。focusout与blur同理
$("#outerDiv").focusin(function(){
alert("outer");
});
});
</script>
</head>
<body>
<div id="outerDiv" style="border:1px solid #f00;width:200px;height:200px">
<div id="innerDiv" style="border:1px solid #00f;width:100px;height:100px"></div>
</div>
<br/>
<span id="showSpan"></span>
</body>
</html>
mouseover与mouseenter
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript">
//与 mouseover 事件不同,只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素,同样会触发 mouseover 事件。
$(document).ready(function(){
var i= 0;
//如果指针穿过任何子元素,同样会触发mouseover事件
//$("#outerDiv").mouseover(function(){
//$("#showSpan").html(i++);
//});
//如果指针穿过任何子元素,不会触发mouseenter事件
$("#outerDiv").mouseenter(function(){
$("#showSpan").html(i++);
});
});
</script>
</head>
<body>
<div id="outerDiv" style="border:1px solid #f00;width:200px;height:200px">
<div id="innerDiv" style="border:1px solid #00f;width:100px;height:100px"></div>
</div>
<br/>
<span id="showSpan"></span>
</body>
</html>