abstract:focus() 触发匹配元素获取焦点的事件 blur() 触发匹配元素失去焦点的事件 change() 当匹配元素内容发生改变的时候触发的事件 click 触发匹配元素的点击事件 dblclick 触发匹配元素的双击事件 mouseenter 鼠标指针穿过匹配元素触发的事件 mouseleave 鼠标离开匹配元素触发的事件 mouseover 鼠标移入匹配元素触发的事件 mouseout 鼠标离开
focus() 触发匹配元素获取焦点的事件
blur() 触发匹配元素失去焦点的事件
change() 当匹配元素内容发生改变的时候触发的事件
click 触发匹配元素的点击事件
dblclick 触发匹配元素的双击事件
mouseenter 鼠标指针穿过匹配元素触发的事件
mouseleave 鼠标离开匹配元素触发的事件
mouseover 鼠标移入匹配元素触发的事件
mouseout 鼠标离开匹配元素触发的事件
与 mouseover 事件不同,只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素,同样会触发 mouseover 事件。
与 mouseout 事件不同,只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件。如果鼠标指针离开任何子元素,同样会触发 mouseout 事件。
mousemove 当鼠标指针在指定的元素中移动时,就会发生 mousemove 事件。
resize 当调整浏览器窗口的大小时,发生 resize 事件
<input type="text" name="" id="input1"> <input type="text" name="" id="input2"> <div id="box" style="width:100px;height:100px;background:pink;margin:20px 0px;"></div> <button id="bt">单击</button> <div id="box1"></div> <div id="box2" style="font-size:30px;color:red;">0</div>
$(document).ready(function(){ $('#input1').focus(function(){ $(this).css('background','pink'); }); $('#input1').blur(function(){ $(this).css('background','blue'); }); $('#input2').change(function(){ $(this).css('color','red'); }); $("#bt").click(function(){ $("#box").css('background','orange'); }); $("#box").dblclick(function(){ $(this).css('background','purple'); }); $(document).mousemove(function(event){ $('#box1').text('x:'+event.pageX+'y:'+event.pageY); }); var num = 0;//窗口调整次数 $(window).resize(function(){ $('#box2').text(num+=1); }); });