Jquery——Day3（高级事件）

悠悠 2022-07-12 13:26 110阅读 0赞

1、模拟事件

在jquery中，可以使用trigger()方法完成模拟操作

（1）常用模拟

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

近似于$('\#btn').click();

（2）触发自定义事件

对于myClick表示自定义事件，若要触发，使用trigger()

$("#btn").bind("myClick",function(){ alert("欢迎光临！"); }).trigger();

分开两步来讲，即第一步，自定义事件；第二步，触发模拟操作trigger()方法

$('#btn').bind("myClick",function(){ $('#test').append("<p>欢迎光临</p>"); });

若要触发这个自定义事件，使用一下代码实现

$('#btn').trigger("myClick");

（3）传递数据

trigger(type,\[data\])方法有两个参数，第1个参数为要触发的类型，第2个参数是要传递给事件处理函数的附加数据，以数组形式传递。

$("#btn').bind("myClick",function(e,data1,data2){ //获取数据； $("#test").append("<p>"+data1+data2+"</p>"); });

（4）执行默认操作

<input type="submit" value="提交" />

若要点击“提交”按钮，即会触发事件trigger()方法

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

由于trigger()方法触发事件时，不仅会触发<input>元素绑定的focus事件，也会使<input>元素本身得到焦点，即浏览器默认操作。

若只想触发绑定的focus事件，而不想执行浏览器默认操作，可以使用Jquery中另一种方法——triggerHandler()

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

trigger()与triggerHandler()区别

a、触发事件范围：trigger()触发的为全部事件流程，而triggerHandler()触发的事件阻止了默认行为。

类似于“event.preventDefault()”

$("input").click(function(e){ e.preventDefault(); }).trigger("click");

b、执行次数：trigger()会把所有的都执行，而triggerHandler()只能执行一次

c、返回值：trigger()返回Jquery对象，可以连缀，而trigger()返回的是一个值（return或undefined），

无法实现连缀。

d、事件冒泡：trigger()会产生冒泡，而triggerHandler()不会产生冒泡。

2、命名空间

可以把为元素绑定的多个事件类型用命名空间规范起来，用“.”进行规范使用

$(function(){ $("div").bind("click.abc",function(){ $("body").append("<p>abc</p>"); }); $("div").bind("click.123",function(){ $("body").append("<p>abc</p>"); }); $("button").click(function(){ $("div").unbind(".123"); }); });

如上所述，若要解除.123的绑定，即需要用命名空间规范。

3、事件委托

定义：在Jquery中，通过事件冒泡的特性，让子元素绑定的事件冒泡到父元素（或祖先元素）上，然后再做相关的处理。

之前使用的绑定事件，bind()方法绑定的多个事件，而在jquery中，提供的live()方法做事件委托处理，永远只会绑定一次事件，live()绑定的是document。同时，bind()不会动态绑定事件。

例如下例，在绑定“button”时，实际是绑定的document

$('button').live("click",function(){ $(this).clone().appendTo("#box"); });

又因为（1）live具有连续冒泡，逐级到document上边，极为复杂，所以大多数被删除；

（2）live不支持元素连缀调用。

同时，与live相对应的还有“die”方法，都已经被删除，不再使用。此时的“die”类似于“unbind”

A、live的替代方法：delegate()

delegate('参数1','参数2','参数3')

参数1：绑定的元素；参数2：触发的事件类型；参数3：引发的事件类型fn

$('input').delegate("button","click",function(){ alert("abc"); });

4、on/off/one

对于普通的绑定为bind()，普通解绑为unbind();

对于事件委托为live()、delegate()，解除委托为die()、undelegate()。

综上而言，新方法绑定为on()、解绑为off()。

（1）用on代替bind

a、普通类型

$(".button").on("click",function(){ alert("代替bind"); });

b、含有数组类型data1，data2

$("button").on('mouseover,mouseout',function(){ alert("sbnj"); });

c、两个事件分别执行

$('.button').on({mouseover:function(e){ alert('移入'); }, mouseout:function(e){ alert('移出'); } });

（2）off解除事件委托

$('#box').off('click','.button');

（3）one仅一次事件触发

$('.button').one('click',function(){ alert('仅一次事件触发！'); });

发表评论取消回复

表情：

评论列表（有 0 条评论，110人围观）

还没有评论，来说两句吧...

相关阅读

相关 DOM 高级事件

文章目录一、注册事件二、删除事件三、DOM 事件流四、事件对象 1.e.target 属

刺骨的言语ヽ痛彻心扉/ 2023年09月26日 09:04/ 0 赞/ 4 阅读

相关 kbone 高级 - 事件系统

1、用法 kbone 里节点事件没有直接复用小程序的捕获冒泡事件体系，原因在于：小程序事件和 Web 事件不完全对齐，比如 input 事件在小程序里是不冒泡的

雨点打透心脏的1/2处/ 2022年12月05日 12:17/ 0 赞/ 100 阅读

相关 DOM操作与事件高级

Web API之DOM Web-API API是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力而又无需访问源码，或了解内部工

朱雀/ 2022年11月27日 15:37/ 0 赞/ 108 阅读

相关 5. 事件高级

声明：本人前端学习笔记的所有内容均为b站上pink老师课程的学习笔记，如果想详细了解的可以搜索以下网址： 1. H5C3+移动布局：[ 黑马程序员pink老师前端入门视频教

我就是我/ 2022年10月14日 00:45/ 0 赞/ 73 阅读

相关 ES-3-高级查询

Elasticsearch 提供了基于 JSON 提供完整的查询 DSL 来定义查询定义数据 POST /student/_doc/1001

拼搏现实的明天。/ 2022年09月11日 06:23/ 0 赞/ 49 阅读

相关 JQ高级事件之on、off、one

看了李炎恢老师的视频，这三个方法是可以代替之前的绑定和事件委托的，之前的笔记是用来作为铺垫，方便这次的学习！我现在前面记录下我们原先的事件绑定普通的绑定 .bind

╰半橙微兮°/ 2022年08月01日 13:52/ 0 赞/ 117 阅读

相关 JQ高级事件之事件委托

事件委托跟字面意思一样，需要找一个东西来帮助一起完成某个东西。用我们JQ的语言来说就是，我有2000个按钮，但我们不能一个一个绑定，这样太过于浪费操作，那我们怎么做呢，事

╰+攻爆jí腚メ/ 2022年08月01日 13:52/ 0 赞/ 164 阅读

相关 Dubbo高级篇3

服务化的目标 1. 将系统中独立的业务抽取出来，按业务的独立性进行垂直划分，抽象出基础服务层。 2.基础服务为上游业务的功能实现提供支撑，基

灰太狼/ 2022年07月16日 11:50/ 0 赞/ 155 阅读

相关 Jquery——Day3（高级事件）

1、模拟事件在jquery中，可以使用trigger()方法完成模拟操作（1）常用模拟 $('btn').trigger("click"); 近似于$('\

悠悠/ 2022年07月12日 13:26/ 0 赞/ 111 阅读

相关 JavaScript自定义事件--高级技巧

观察者模式事件是JavaScript和浏览器交互的主要途径。事件是一种叫做观察者的设计模式，这是一种创建松散耦合代码的技术。观察者模式：由两类对象组成，主体和观察

迈不过友情╰/ 2022年05月27日 23:07/ 0 赞/ 172 阅读