JQuery添加事件监听

最新推荐文章于 2025-05-28 11:39:43 发布

呵丶骚年

最新推荐文章于 2025-05-28 11:39:43 发布

阅读量1.2w

点赞数 8

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_44540151/article/details/93618881

本文详细介绍了JQuery的基本选择器、文档加载事件、事件监听的添加与解除，以及事件冒泡的处理方法。通过具体示例展示了如何使用bind()、unbind()、stopPropagation()和stopImmediatePropagation()等函数。

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

一）JQuery选择器：
在这里插入图片描述
二）JQuery文档加载事件：

//文档加载事件一
$(document).ready(function(){
	alert("文档加载完成1!");
});
//文档加载事件二
$(function(){
	alert("文档加载完成2!");
});

三）bind()添加事件监听：
例一：(给p元素添加一个点击事件)

<p>哈哈</p>
$("p").bind("click",function(){$(this).hide();});
或
$("p").bind("click",event1);
function event1(){
	$(this).hide();
}

例二：(给p元素添加多个事件)

<p>哈哈</p>
$("p").bind({"click":event1,"mouseenter":event2});
function event1(){
	$(this).hide();
}
function event2(){
	$("p").text("嘻嘻");
}

四）unbind()解除事件监听：

$("button").unbind("click");//解除button的所有点击事件
$("button").unbind("click",event1);//解除button指定的点击事件

五）event.stopPropagation()与event.stopImmediatePropagation()阻止事件冒泡：

<div id="divid">
		<button id="btnid">按钮</button>
</div>
$("#divid").bind("click",function(){alert("div事件")});
$("#btnid").bind("click",function(){alert("btn事件")});

给外层div与里面的button元素添加事件时，在点击button按钮时也会触发div事件

$("#btnid").bind("click",function(){
		alert("btn事件");
		event.stopPropagation();//阻止事件向上冒泡(父元素事件冒泡)
});
$("#btnid").bind("click",function(){
		alert("btn事件");
		event.stopImmediatePropagation();//阻止除此以外的其他元素事件冒泡
});