JavaScript事件对象与jQuery触发函数-优快云博客

本文详细介绍了JavaScript事件对象及jQuery中触发函数的应用，包括事件处理、模拟用户操作、触发器额外数据传递等核心概念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>事件对象</title>
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript" src="demo.js"></script>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>

<!--input type="button" value="按钮" />

<form action="123.html">
	<input type="submit" value="按钮" />
</form>

<input type="button" value="按钮" />
<input type="button" value="按钮" />
<input type="button" value="按钮" />

<div class="d1">
	<div class="d2">
		<div class="d3">
			div
		</div>
	</div>
</div>
-->

<input type="button" value="按钮" />

</body>
</html>

demo.js

$(function(){
	/*
	$('input').click(function(){
		alert('我将要使用模拟用户来触发！')
	});
	
	//模拟用户点击操作
	$('input').trigger('click');
	
	$('input').click(function(){
		alert('我将要使用模拟用户来触发！')
	}).trigger('click');
	
	$('input').click(function(e,data1,data2){
		alert(data1+'|'+data2)
	}).trigger('click',['123','abc']);
	//trigger 额外数据，只有一条的时候，可以省略中括号，多条就不能省略，第二条之后就无法识别了
	
	$('input').click(function(e,data1,data2,data3,data4){
		alert(data1+'|'+data2+'|'+data3[1]+'|'+data4.user)
	}).trigger('click',['123','abc',['a','b','c'],{user:'onestopweb'}]);
	
	$('input').bind('click',{user:'chaoyi'},function(e,data1,data2,data3,data4){
		alert(data1+'|'+data2+'|'+data3[1]+'|'+data4.user+'|'+e.data.user);
	}).trigger('click',['123','abc',['a','b','c'],{user:'onestopweb'}]);
	
	//click,mouseover 这些系统事件，自定义事件就是自己起名字的事件
	$('input').bind('myEvent',function(){
		alert('自定认事件！')
	}).trigger('myEvent');
	
	$('input').click(function(){
		alert('我将要使用模拟用户来触发！')
	}).click();
	
	$('input').click(function(){
		alert('我将要使用模拟用户来触发！')
	}).triggerHandler('click');
	
	//trigger 提交后跳转，没有阻止默认行为	
	$('form').trigger('submit');
	
	//trigger 提交后没有跳转，默认行为被阻止了
	$('form').triggerHandler('submit');
	
	$('form').submit(function(e){
		e.preventDefault();
	}).trigger('submit');
	
	$('input').click(function(){
		alert('我将要使用模拟用户来触发！')
	}).click();//共执行三次
	
	$('input').click(function(){
		alert('我将要使用模拟用户来触发！')
	}).triggerHandler('click');//共执行一次
	
	$('input').click(function(){
		alert('我将要使用模拟用户来触发！')
	}).trigger('click').css('color','red');//返回 jQuery 对象，可以连缀
	
	alert($('input').click(function(){
		alert('我将要使用模拟用户来触发！')
		return false
	}).triggerHandler('click'));
	
	$('input').click(function(){
		alert('我将要使用模拟用户来触发！')
		return 123;
	}).triggerHandler('click').css('color','red');//返回 return 值，或 undefined
	
	$('div').bind('myEvent',function(){
		alert('自定认事件！')
	});
	$('.d3').trigger('myEvent');//会冒泡
	*/
	
	$('input').bind('click.abc',function(){
		alert('abc');
	});
	$('input').bind('click.xyz',function(){
		alert('xyz');
	});
	$('input').bind('mouseover.abc',function(){
		alert('abc');
	});
	//$('input').unbind('click.abc');
	//$('input').unbind('.abc');
	$('input').trigger('click.abc');
});