jquery事件

Original 2018-11-14 04:24:21 233
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);
		});
	});

c.png

Release Notes

Popular Entries