jQuery事件绑定,解绑,触发
事件绑定
1.bind(type,[data],fn)
--type: 含有一个或多个事件类型的字符串,由空格分隔多个事件。比如"click"或"submit",还可以是自定义事件名。
--data:作为event.data属性值传递给事件对象的额外数据对象
--fn:绑定到每个匹配元素的事件上面的处理函数
例子:
$("p").bind("click", function(){
alert( $(this).text() );
});
2.delegate(selector,[type],[data],fn)
--selector:选择器字符串,用于过滤器触发事件的元素。
--type:附加到元素的一个或多个事件。 由空格分隔多个事件值。必须是有效的事件。
--fn:当事件发生时运行的函数
--data:传递到函数的额外数据
例子:
$("div").delegate("button","click",function(){
$("p").slideToggle();
});
3.on(events,[selector],[data],fn)
--events:一个或多个用空格分隔的事件类型和可选的命名空间,如"click"或"keydown.myPlugin" 。
--selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择的< null或省略,当它到达选定的元素,事件总是触发。
--data:当一个事件被触发时要传递event.data给事件处理函数。
--fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写,返回false。
例子:
$("p").on("click", function(){
alert( $(this).text() );
});
解绑事件
1.unbind(type,[data|fn]])
--type:删除元素的一个或多个事件,由空格分隔多个事件值。
--fn:要从每个匹配元素的事件中反绑定的事件处理函数
例子:
$("p").unbind( "click" )
2.undelegate([selector,[type],fn])
--selector:需要删除事件处理程序的选择器。
--type:需要删除处理函数的一个或多个事件类型。 由空格分隔多个事件值。必须是有效的事件。
--fn:要删除的具体事件处理函数。
例子:
$("p").undelegate( "click" )
3.off(events,[selector],[fn])
--events:一个或多个空格分隔的事件类型和可选的命名空间,或仅仅是命名空间,比如"click", "keydown.myPlugin", 或者 ".myPlugin".
--selector:一个最初传递到.on()事件处理程序附加的选择器。
--fn:事件处理程序函数以前附加事件上,或特殊值false.
例子:
$("p").off( "click", "**" )
注意:解除绑定事件:自身的绑定事件和动态绑定的事件都会被解绑
触发事件
触发事件:触发某个事件的时候在该事件内部调用了其他元素的某个事件方法
1.直接调用元素的事件方法:
$("div").click();
2.使用.trigger()方法
trigger(type,[data])
--type:一个事件对象或者要触发的事件类型
--data:传递给事件处理函数的附加参数
例子:
$("div").trigger("click");
3.使用.triggerHandle()方法
triggerHandler(type,[data])
--type:要触发的事件类型
--data:传递给事件处理函数的附加参数
例子:
$("div").triggerHandler("click");
注意:.trigger()和.triggerHandler()区别:前者会触发浏览器的默认行为,并执行事件,后者不会触发浏览器默认行为,但是会执行事件
特此声明:如需转载请注明出处,如有疑问请及时提出以便于改正,如有侵权,联系删除,谢谢
jQuery事件绑定,解绑,触发的更多相关文章
- jQuery事件之解绑事件
语法: $(selector).unbind([eventType][,handler(eventObject)]); 返回值:jQuery 参数解释: eventTypey:类型:String以后包 ...
- jQuery事件绑定、解绑、命名空间
jQuery事件绑定.解绑.命名空间 <%@ page language="java" import="java.util.*" pageEncoding ...
- jQuery---jQ动画(普通,滑动,淡入淡出,自定义动画,停止动画),jQuery的事件,jQ事件的绑定/解绑,一次性事件,事件委托,事件冒泡,文档加载
jQuery---jQ动画(普通,滑动,淡入淡出,自定义动画,停止动画),jQuery的事件,jQ事件的绑定/解绑,一次性事件,事件委托,事件冒泡,文档加载 一丶jQuery动画 show,hide, ...
- 从零开始学 Web 之 jQuery(六)为元素绑定多个相同事件,解绑事件
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 前端 -----jQuery的事件绑定和解绑
11-jQuery的事件绑定和解绑 1.绑定事件 语法: bind(type,data,fn) 描述:为每一个匹配元素的特定事件(像click)绑定一个事件处理器函数. 参数解释: type (S ...
- python 全栈开发,Day55(jQuery的位置信息,JS的事件流的概念(重点),事件对象,jQuery的事件绑定和解绑,事件委托(事件代理))
一.jQuery的位置信息 jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集 ...
- 深入学习jQuery事件绑定
× 目录 [1]bind [2]trigger [3]delegate[4]on[5]one 前面的话 javascript有HTML.DOM0级.DOM2级和IE这四种事件处理程序,而jQuery对 ...
- python全栈开发day49-jquery的位置信息、事件流、事件对象,事件委托,事件绑定和解绑
一.昨日内容回顾 1. jQuery的属性操作 1) html属性操作:attr 2) DOM属性操作:prop 3) 类样式操作:addClass.removeClass.toggleClas ...
- jQuery事件绑定与切换
一.事件绑定 1.标准方式 1. jquery标准的绑定方式 * jq对象.事件方法(回调函数): * 注:如果调用事件方法,不传递回调函数,则会触发浏览器默认行为. * 表单对象.submit(); ...
随机推荐
- Windows代码,添加一个节,以及RVA跟FOA互相转化,以及内存文件对齐代码.
/ 1.修改文件头节个数 +1 2.修改ImageBase 3.遍历节表,拷贝最后一个节表到下面 4.修改节的虚拟大小(节表.virtualSize) 5.修改节的虚拟地址(RVA 节表.virtua ...
- vue安装jquery和配置(不需要在页面引入直接可以使用)
首先在命令行工具上输入 npm install jquery --save-dev 安装完成之后在build文件夹下的webpack.base.conf.js进行配置,在顶部添加:const webp ...
- C# 接口的使用(工厂模式)
接口(interface)与抽象类(abstract)的区别: 相同点: 1.都不能被直接实例化,都可以通过继承实现其抽象方法. 2.都是面向抽象编程的技术基础,实现诸多模式 不同点: 1.接口可以多 ...
- 如何高效的学习WEB前端
IT 行业的变化快是众人皆知的,需要持续去学习新的知识内容.但是,往往我们工作之后,经常发现学习的东西很少了,学习效率非常低,感觉自己到了一个瓶颈期,久而久之,就演变成『一年工作经验,重复去用十年』的 ...
- Angular(03)-- lint风格规范和WebStorm小技巧
在开始讲 Angular 各个核心知识点之前,想先来讲讲开发工具 WebStorm 的一些配置以及相应配置文件如 tslint.json 的配置. 因为我个人比较注重代码规范.代码风格,而对于这些规范 ...
- GIS之家资源
分享资源之arcgis软件系列 arcgis10.0(arcgis desktop以及arcgis server):下载 arcgis10.1(arcgis desktop以及arcgis serve ...
- Windows Server 2016-命令行批量导出AD用户列表信息
本章节为大家带来如何通过Powershell或ldifde命令行方式导出域用户列表信息,方便大家日常运维工作中使用. Powershell方式导出现有Staff目录下所有用户信息列表: Get-ADU ...
- 处理安卓和ios当页面原生键盘弹出,输入框不显示
$('input').on('click', function () { var target = this; // 使用定时器是为了让输入框上滑时更加自然 setTimeout(function() ...
- css垂直居中方法总结
在网页布局中,我们往往会遇到下图所示的场景,让小图标和文字对齐 可能有的小伙伴会说,这个简单,直接给小图标设置左浮动来实现. 这样做是可以的,但不推荐,毕竟浮动是会影响布局的,能少用还是少用. 以前遇 ...
- ajax data属性传值的方式总结
在和后台同事对接口的时候,有一个小问题一直困扰着我.那就是用ajax请求后台接口数据,需要用data属性传值的时候,data属性传值的方式感觉没有统一用一种方式. 后来仔细想想,其实哪种方式都可以,主 ...