Jquery——Day3（高级事件）

悠悠 2022-07-12 13:26 151阅读 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 条评论，151人围观）

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

相关阅读

相关 JS 事件高级

注册事件(绑定事件) 注册事件概述给元素添加事件，称为注册事件或者绑定事件。注册事件有两种方式:传统方式和方法监听注册方式 ![在这里插入图片描述][water

冷不防/ 2023年10月05日 19:49/ 0 赞/ 3 阅读

相关 DOM 高级事件

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

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

相关事件的高级用法

一、事件基础 1.事件函数 obj.on-事件名=fn 定义事件的时候，事件函数不会自动执行，当事件触发的时候，会执行 2.事件对象 1）事件对象：当浏

r囧r小猫/ 2023年02月24日 03:57/ 0 赞/ 10 阅读

相关深入浅出DOM（3）----事件高级

目标： > 学习目标： > 能够使用传统方式和监听方式给元素注册事件 > > 能够说出事件流执行的三个阶段 > > 能够在事件处理函数中获取事件对象 > > 能

喜欢ヅ旅行/ 2023年02月13日 05:58/ 0 赞/ 13 阅读

相关 kbone 高级 - 事件系统

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

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

相关 DOM操作与事件高级

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

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

相关 5. 事件高级

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

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

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

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

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

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

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

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

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

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

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