jQuery基础回顾——事件冒泡、移除事件、模拟事件

ztj100 2024-12-09 19:16 43 浏览 0 评论

事件冒泡

什么是冒泡

在页面上可以有多个事件，也可以多个元素响应同一个事件，假设网页上有两个元素，其中一个元素嵌套在另一个元素里，并且都被绑定了click事件，同事<body>元素上也绑定了click事件，当单击内部<span>元素，即触发<span>元素的click事件，会输出3条记录，这就是由事件冒泡引起的。

在单击<span>元素的同时，也单击了包含<span>元素的元素<div>和包含<div>元素的<body>，并且每一个元素都会按照特定的顺序响应click事件。

事件冒泡引发的问题

事件冒泡可能会引起意料之外的效果，上例中，本来只想触发<span>元素的click事件，然而<div>和<body>元素的click事件也同时被触发了，因此，有必要对事件的作用范围进行限制，当单击<span>时，只触发该元素的click事件，当单击<div>时，只触发<div>元素的click事件。

想要阻止事件冒泡，只需要在对应事件的响应函数里返回 false（ return false;） 即可。

移除事件

在绑定事件的过程中，不仅可以为同一个元素绑定多个事件，也可以为多个元素绑定同一个事件，假设网页上有一个<button>元素，使用以下代码为该元素绑定多个相同的事件。

<script>
	$(function(){
		$("#btn").on("click",function(){
			$("#test").append("<p>我绑定的函数1</p>");
		}).on("click",function(){
			$("#test").append("<p>我绑定的函数2</p>");
		}).on("click",function(){
			$("#test").append("<p>我绑定的函数3</p>");
		});
	});
</script>
<button id="btn">单击我</button>
<div id="test"></div>

当单击按钮后，会出现下图所示的效果

1、移除按钮元素上以前注册的事件

首先在网页上添加一个移除事件的按钮。

<button id="delAll">删除所有事件</button>

然后为按钮绑定一个事件，jQuery代码如下：

$("#delAll").click(function(){
	$("#btn").off("click");
});

下面来看看off()方法的语法结构：

off(events, [selector], [fn])

events:一个或多个空格分隔的事件类型和可选的命名空间，或仅仅是命名空间，比如"click", "keydown.myPlugin", 或者 ".myPlugin".

selector:一个最初传递到.on()事件处理程序附加的选择器。

fn:事件处理程序函数以前附加事件上，或特殊值false.

具体说明如下：

1) 如果没有参数，则删除所有绑定的事件。

2) 如果提供了事件类型作为参数，则只删除该类型的绑定事件。

3) 如果把在绑定时传递的处理函数作为第2/3个参数，则只有这个特定的事件处理函数会被删除。

2、移除<button>元素的其中一个事件

首先需要为这些匿名处理函数指定一个变量，例如下面的jQuery代码：

$(function(){
	$("#btn").on("click",myFun1 = function(){
		$("#test").append("<p>我绑定的函数1</p>");
	}).on("click", myFun2 = function(){
		$("#test").append("<p>我绑定的函数2</p>");
	}).on("click", myFun3 = function(){
		$("#test").append("<p>我绑定的函数3</p>");
	});
});

然后就可以单独删除某一个事件了，jQuery代码如下：

$("#delTow").unbind("click", myFun2);

另外，对于只需要触发一次，随后就立即要解除绑定的情况，jQuery提供了一种简写法——one()方法，one()方法可以为元素绑定处理函数，当处理函数出发一次后立即被删除。其语法结构同on()方法类似，使用方法也相同。

模拟操作

常用模拟

以上的例子都是用户必须通过单击按钮才能触发click事件，但是有时，需要通过模拟用户操作来达到单击的效果，例如在用户进入页面后，就触发click事件，而不需要用户主动单击。

在jQuery中，可以使用trigger()方法完成模拟操作，例如可以使用下面的代码来触发id为btn的按钮的click事件：

$("#btn").trigger("click");

这样，当页面加载完毕后，就会立刻输出想要的效果，也可以直接用简化写法click()，来达到同样的效果。

$("#delTow").click();

触发自定义事件

trigger()方法不仅能触发浏览器支持的具有相同名称的事件，也可以触发自定义名称的事件，此时传入的参数名为自定义事件的名。

传递数据

trigger(type,[data])方法有两个参数，第1个参数是要触发事件的类型，第2个参数是要传递给事件处理函数的附加数据，以数组形式传递，通常可以通过传递一个参数给回调函数来区分这次事件是代码触发还是用户触发的：

$("#btn").on("myClick", function(event,msg1,msg2){//获取数据
	$("#test").append("<p>"+msg1 + msg2 +"</p>");
});
$("#btn").trigger("myClick",["我的自定义","事件"]);//传递两个数据

执行默认操作

trigger()方法触发事件后，会执行浏览器默认操作。

$("input").trigger("focus");

以上代码不仅会触发<input>元素绑定的focus事件，也会使该元素本身得到焦点（这是浏览器的默认操作）。

如果只想触发绑定的focus事件，而不想执行浏览器默认操作，可以使用jQuery中另一个类似的方法——triggerHandler()方法。

$("input").triggerHandler("focus");

该方法只会触发<input>元素上绑定的特定事件，同时取消浏览器对此事件的默认操作，即文本框只触发绑定的focus事件，而不会得到焦点。

若感觉对您有用，可以关注并转发，您的关注是对我莫大的支持！

关注并转发后私信“jQuery基础材料”获取线下资料，包括完整基础资料、chm文档、示例代码及其他参考资料。

上一节：jQuery中的事件——事件绑定、合成事件

下一节：jQuery基础回顾——jQuery中的动画

jq 点击事件

jQuery基础回顾——事件冒泡、移除事件、模拟事件

事件冒泡

移除事件

模拟操作

相关推荐

取消回复欢迎你发表评论:

Vue自定义Hook示例:useUrlState（vue中的自定义指令如何使用）

Vue-实现自定义插件弹窗（vue 实现弹窗）

MySQL中这14个小玩意，让人眼前一亮!

旗舰机新标杆 OPPO Find X2系列正式发布售价5499元起

什么是幂等?分布式锁如何实现业务幂等?

手把手教你搞定菜单权限设计，精确到按钮级别，建议收藏

如何发个 npm 包?

详解MySQL 字符串拼接之concat\concat_ws\group_concat

如何快速切换node版本?利用n包快速切换nodejs版本

【Python机器学习系列】建立多层感知机模型预测心脏疾病

jQuery基础回顾——事件冒泡、移除事件、模拟事件

事件冒泡

移除事件

模拟操作

相关推荐

取消回复欢迎 你 发表评论:

Vue自定义Hook示例:useUrlState（vue中的自定义指令如何使用）

Vue-实现自定义插件弹窗（vue 实现弹窗）

MySQL中这14个小玩意，让人眼前一亮!

旗舰机新标杆 OPPO Find X2系列正式发布 售价5499元起

什么是幂等?分布式锁如何实现业务幂等?

手把手教你搞定菜单权限设计，精确到按钮级别，建议收藏

如何发个 npm 包?

详解MySQL 字符串拼接之concat\concat_ws\group_concat

如何快速切换node版本?利用n包快速切换nodejs版本

【Python机器学习系列】建立多层感知机模型预测心脏疾病

取消回复欢迎你发表评论:

旗舰机新标杆 OPPO Find X2系列正式发布售价5499元起