jQuery 基础 jQuery事件模型四

最新推荐文章于 2025-11-06 13:51:53 发布

原创最新推荐文章于 2025-11-06 13:51:53 发布 · 195 阅读

0 ·

CC 4.0 BY-SA版权

JQuery 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了jQuery中的各种事件处理方法，包括标准事件绑定如click、hover等，以及如何创建和触发自定义事件。还探讨了事件命名空间的概念及其用法。

快捷方法

- blue

- change

- click

- dblclick

- focus

- focusin

- focusout

- keydown

- keypress

- keyup

- mousedown

- mouseenter

- mouseleave

- mousemove

- mouseout

- mouseover

- mouseup

- ready

- resize

- scroll

- select

- submit

快捷方法的使用

- funcName([data,]handler)

- funcName()

		$('li').click(function(event){
			console.log('anything..');
		})

被触发也可以：

<script type="text/javascript">
	$(function(){

		$('li').click(function(event){
			console.log('anything..');
			return '123';
		})
		$('#all').on('click',function(event){
			// $('li').trigger('click');
			console.log($('li').click());
		})
	});
</script>

其中，hover方法，是jQuery 专门设置的一个方法，js 本身是没有的。综合事件的事件。

- hover(enterHandler,leaveHandler)

- hover(handler)

自定义事件

- on(customEvent)

- trigger(customEvent)

括号里是自定义的事件名称

<script type="text/javascript">
	$(function(){
		$('li').on('markAsRead',function(event){
			console.log('已读 %o',$(this));
		}).on('click',function(){
			$(this).trigger('markAsRead');
		})
	})
</script>

事件命名空间

- eventName.namespace

<script type="text/javascript">
	$(function(){
		$('li:odd').on('click.even',function(e){
			console.log('%o 偶数',$(this))
		});
		$('li:even').on('click.odd',function(e){
			console.log('%o 奇数',$(this))
		});

		$('#even').click(function(){
			$('li').trigger('click.even');
		});
		$('#odd').click(function(){
			$('li').trigger('click.odd');
		});
	})
</script>