Monthai: jQuery事件实践总结
事件清单
.blur() //失去焦点 .focus() //获得焦点 .change() //元素值发生变化 .click() .dblclick() //双击 .mouseover() //不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件 .mouseenter() //只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件 .mouseleave() //只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件 .mouseout() //不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件 .mousedown() .mouseup() .resize() //缩放窗口 .pageX //相对于文档左边缘的鼠标位置 .pageY //相对于文档上边缘的鼠标位置
（1）pageX、pageY是对象属性，不是方法，后面不需要加（），但是前面需要指定对象，该对象为function的参数。如果坐标是针对整个窗口的，函数对象应该是document。
$(document).mousemove(function(aa){
$('span').text('X:'+aa.pageX+'Y:'+aa.pageY)
})（2）resize()的对象是window。
（3）text()输出问题
//方法一：
var num = 0
$(window).resize(function(){
$('b').text('调整次数'+ num++) //此方法调整一次后依然返回0
alert('窗口已被调整')
}
//方法二：
var num = 0
$(window).resize(function(){
$('b').text(num+=1) //从1开始，但不能用"文本"+输出，会出错，无提示
alert('窗口已被调整')
}完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery事件</title>
<script src="js/jquery-3.3.1.js"></script>
<script>
$(document).ready( function(){
$('div').css({'width':'300px','height':'100px','border':'2px blue dashed'})
$('input').blur(function(){
$('input').css('background','#B3D4FC')
})
$('input').focus(function(){
$('input').css('background','#EDBCC8')
})
$('div').dblclick(function(){
$('div').css('background','#EDBCC8')
})
$('div').mouseup(function(aa){
$('span').text('X:'+aa.pageX+'Y:'+aa.pageY)
})
var num = 0
$(window).resize(function(){
$('b').text(num+=1)
alert('窗口已被调整！')
})
})
</script>
</head>
<body>
<input type="text" >
<div>
双击触发变色<br>
坐标<span></span><br>
窗口调整次数:<b></b>
</div>
</body>
</html>END