【前端】jQuery事件处理

<script>
	$(document).ready(function() {
		$('#btn1').click(function() {
		alert("Button Clicked!")
		});
	});
</script>

对于放在head标签里的脚本，如果HTML文档没有加载完成会导致出现问题，可以按照上面的写法，将脚本放在document对象准备好后的事件中执行，当然，在body中的脚本也可以按照这个方式来写，代码会更加健壮一些。

两种点击事件的捕捉方式：

// 直接将事件作为函数
$('#btn1').click(function() {
	alert("Button Clicked!")
});
// 事件作为参数
$('#btn1').on('click', function() {
	alert('Button Clicked!')；
});

两种都可以，按照喜好来即可，有人说第二种会多几十毫秒的处理时间。

$('#btn1').click(function() {
	alert("Button Clicked!")
});

$('#btn1').on('click', function() {
	alert('Button Clicked!')；
});

$('#btn1').on('click', function() {
	// $('.para1').hide();
	$('.para1').toggle(); // 一个函数身兼两职，显示/隐藏
})
$('#btn2').on('click', function() {
	$('.para1').show();
});

// 鼠标双击事件
$('#btn1').dblclick(function() {
	$('.para1').toggle()
});

// hover = mouseenter + mouseleave
$('#btn1').hover(function(){
	$('.para1').toggle()
});
// 鼠标进入
$('#btn1').on('mouseenter', function() {
	$('.para1').toggle();
});
// 鼠标离开
$('#btn1').on('mouseleave', function(){
	$('.para1').toggle();
	
// 鼠标在Button上运动事件
$('#btn1').on('mousemove', function() {
		$('.para1').toggle();
});
// 鼠标弹起时事件
$('#btn1').on('mouseup', function() {
	$('.para1').toggle();
})
// 鼠标按下时事件
$('#btn1').on('mousedown', function() {
	$('.para1').toggle();
})

// 跟踪鼠标在Button上的位置
$('#btn1').on('mousemove',function(e) {
	$('#coords').html('Coords: Y: ' + e.clientY + ' X: ' + e.clientX);
});

// 跟踪鼠标在文档中的位置
$(document).on('mousemove',function(e) {
	$('#coords').html('Coords: Y: ' + e.clientY + ' X: ' + e.clientX);
});

$('input').focus(function() {
	// $('input#name').css('background', 'pink');
	// $('input#email').css('background', 'pink');
	$(this).css('background', 'pink')
});

$('input').blur(function() {
	$(this).css('background', 'white')
});

$('input').keyup(function(e) {
	console.log(e.target.value);
})

// select选项变化事件跟踪
$('select#gender').change(function(e) {
	alert(e.target.value)
});	

$('#form').submit(function(e){
	e.preventDefault();
	var name = $('input#name').val();
	console.log(name)
});

对应的前端HTML如下：

<!DOCTYPE html>
<html>
<head>
	<title>jQuery | Selectors</title>
	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

	<!-- <script>
		$(document).ready(function() {

		});
	</script> -->
	<style>
		body {
			font-size: 17px;
			font-family: arial;
			background: #f4f4f4;
			line-height: 1..5em;
		}

		header {
			background: #333;
			color: #fff;
			padding: 20px;
			text-align: center;
			border-bottom: 4px #000 solid;
			margin-bottom: 10px;
		}

		#container {
			width:90%;
			margin: auto;
			padding: 10px;
		}
	</style>

</head>
<body>

	<header>
		<h1>jQuery</h1>
	</header>
	<div id="container">
		<h3> Mouse Event </h3>
		<button id="btn1">Button 1</button>
		<button id="btn2">Button 2</button>

		<p class="para1">jQuery is registered as a package on npm. You can install the latest version of jQuery with the npm CLI command.</p>

		<h3 id="coords"></h3>
		<hr>

		<form id="form">
			<label>Name</label>
			<input type="text" id="name" name="name">
			<br>
			<label>Email</label>
			<input type="text" id="email" name="email">
			<br>
			<label>Gender</label>
			<select id="gender" name="gender">
				<option value='male'>Male</option>
				<option value='female'>Female</option>
			</select>
			<input type="submit" value="Submit">
		</form>
	</div>
</html>

总结：jQuery里，事件和原生JS是一样的，jQuery里可以直接将事件名作为函数，而原生的JS都是将事件名作为参数，通过xx.addEventListener(eventName, functionName)或者：

xx.addEventListener(eventName, function(e) {
});

这里的e不是我们需要传入的形参，而是默认提供的事件对象，通过它我们能够拿到很多很多信息。

END.

【前端】jQuery事件处理

猜你喜欢