jQuery的事件绑定和解绑
1、绑定事件
语法:
bind(type,data,fn)
描述:为每一个匹配元素的特定事件(像click)绑定一个事件处理器函数。
参数解释:
type (String) : 事件类型
data (Object) : (可选) 作为event.data属性值传递给事件对象的额外数据对象
fn ( Function) : 绑定到每个匹配元素的事件上面的处理函数
示例:
当每个p标签被点击的时候,弹出其文本
$("p").bind("click", function(){alert( $(this).text() ); });
你可以在事件处理之前传递一些附加的数据。
function handler(event) { //event.data 可以获取bind()方法的第二个参数的数据alert(event.data.foo); } $("p").bind("click", {foo: "bar"}, handler)
通过返回false来取消默认的行为并阻止事件起泡。
$("form").bind("submit", function() { return false; })
通过使用 preventDefault() 方法只取消默认的行为。
$("form").bind("submit", function(event){event.preventDefault(); });
2、解绑事件
语法:
unbind(type,fn);
描述:
如果没有参数,则删除所有绑定的事件。
如果把在绑定时传递的处理函数作为第二个参数,则只有这个特定的事件处理函数会被删除。
参数解释:
type (String) : (可选) 事件类型
fn(Function) : (可选) 要从每个匹配元素的事件中反绑定的事件处理函数
示例:
把所有段落的所有事件取消绑定
$("p").unbind()
将段落的click事件取消绑定
$("p").unbind( "click" )
删除特定函数的绑定,将函数作为第二个参数传入
var foo = function () {//绑定事件和解绑事件的事件处理函数 };$("p").bind("click mouseenter", foo); // 给p段落绑定click mouseenter事件$("p").unbind("click", foo); // 只解绑了p段落标签的click事件
3.自定义事件
其实事件的绑定和解绑,都是我为了自定义事件做准备(大家把jQuery的提供的事件熟记在心),以后对jquery熟了以后,可以玩一下自定义事件
语法:
trigger(type,data);
描述:在每一个匹配的元素上触发某类事件,它触发的是由bind()注册的自定义事件。
参数解释:
type (String) : 要触发的事件类型
data (Array) : (可选)传递给事件处理函数的附加参数
示例:
给一个按钮添加自定义的事件
$('button').bind('myClick',function(ev,a,b){//给button按钮添加的自定义事件myClick事件 })
然后通过trigger()触发自定义的事件
$('button').trigger('myClick',[1,2])
4.补充 一次性事件
语法:
one(type,data,fn)
描述:
为每一个匹配元素的特定事件(像click)绑定一个一次性的事件处理函数。在每个对象上,这个事件处理函数只会被执行一次。其他规则与bind()函数相同
参数解释:
type (String) : 事件类型
data (Object) : (可选) 作为event.data属性值传递给事件对象的额外数据对象
fn (Function) : 绑定到每个匹配元素的事件上面的处理函数
示例:
当所有段落被第一次点击的时候,显示所有其文本。
$("p").one("click", function(){ //只有第一次点击的时候才会触发,再次点击不会触发了alert( $(this).text() ); });
转载于:https://www.cnblogs.com/baijinshuo/p/9957240.html
jQuery的事件绑定和解绑相关推荐
- 11-jQuery的事件绑定和解绑
[转]11-jQuery的事件绑定和解绑 1.绑定事件 语法: bind(type,data,fn) 描述:为每一个匹配元素的特定事件(像click)绑定一个事件处理器函数. 参数解释: type ( ...
- jQuery事件绑定和解绑
jQuert事件 1.1. jQuery 事件注册 jQuery 为我们提供了方便的事件注册机制,是开发人员抑郁操作优缺点如下: 优点: 操作简单,且不用担心事件覆盖等问题. 缺点: 普通的事件注 ...
- 03-jQuery事件绑定和解绑
文章目录 一.绑定事件 二.解绑和触发 一.绑定事件 on().one().hover().常用事件函数 on(): 1.基础绑定事件 语法:元素集合.on('事件类型',事件处理函数) $('div ...
- Vue-组件自定义事件(绑定和解绑)
组件自定义事件(绑定) 像click,change这些都是js的内置事件,我们可以直接使用,本次我们学习自己根据需求打造全新的事件,但是js内置的是给html元素用的,本次的自定义事件是给组件用的 注 ...
- JS事件的绑定和解绑
/* 事件三要素 1.事件源:在谁的身上绑定事件 2.事件类型:什么事件 3.事件处理函数:当行为发生的时候,执行那一个函数 ==>div.οnclick=function(){} ==> ...
- jquery事件绑定解绑机制源码分析
引子 为什么Jquery能实现不传回调函数也能解绑事件?如下: $("p").on("click",function(){alert("The par ...
- JS中事件的绑定和解绑
JS中事件的绑定和解绑 一. 了解事件 1. 事件的三要素 2. 事件绑定分类 2-1. dem0级 事件 2-2. dom2级 事件 二. 事件的绑定 1. dom0级 事件 2. dom2级 事件 ...
- jQuery得事件绑定
1. 绑定事件 语法 bind(type,data,fn) 描述:为每一个匹配元素得特定事件绑定一个事件处理器函数. 参数解释: type:事件类型 data:作为event.data属性值传递给事件 ...
- 7月个人:Windows和Linux绑定和解绑ARP 了解ARP命令的用途。 掌握ARP命令的使用。...
Windows和Linux绑定和解绑ARP 了解ARP命令的用途. 掌握ARP命令的使用. ARP地址解析协议是一个重要的TCP/IP协议,可以用于确定对应ip地址的网卡物理地址.也可以使用人工方式输 ...
最新文章
- MPLS *** 高级教程(张洋讲解演示版)
- WTM系列视频教程:CodeFirst
- javascript学习系列(12):数组中的join方法
- 现代软件工程讲义 12 绩效管理
- python脚本式编程_Python编程入门(一)
- zenmap nmap输出无显示_双路显示控制仪XME-H80-1616价格报价
- 第73课 丑数 函数的应用
- 10个经典的哲学小故事
- android signal 处理总结
- SylixOS网络协议栈---Lwip协议栈之ARP表
- Oracle 常见错误代码处理 1
- origin画图对图片进行缩放时,如何不让文字一同缩放?
- html 复制链接功能,h5分享功能[通过复制网页链接分享]
- python内置模块re_python内置模块[re]
- Excel VBA语句集300
- Python实现b''开头二进制字符串转换为str的utf-8
- 程序员在在哪个网站上找工作?
- 大陆二代居民身份证校验代码
- 8.ExecutorService-执行器服务
- python传递指针_python值传递和指针传递
热门文章
- 上传文件显示进度条_【技巧 】iOSamp;Windows互传文件?透过「文件」轻松解决~...
- Flask mysql 模版传参_Flask渲染Jinja2模板和传参
- dnf机器人猜数字奖励_DNF:周年庆策划啪啪打脸,工作人员也出错误,难道又是临时工的锅?...
- php数据库创建文件失败怎么回事,安装zblogPHP提示“创建c_option.php失败”解决方法...
- java postgresql json_java – 将PostgreSQL JSON列映射到Hibernate值类...
- java拆装_JAVA线性表拆解
- 双向a*搜索算法_双向搜索算法
- 创建bootstrap项目_使用Bootstrap创建第一个网页
- accsess转成mysql语句_access数据库转mysql经验分享
- 儿童的身高标准对照表_2020“儿童身高标准”出炉,10岁身高140,你家娃达标吗...