jQuery笔记(事件绑定和解绑)
事件绑定
一、bind()
1.传两参数 第一个参数是事件名,第二个是事件处理函数
2.传键值对(对象)
<body>
<input type="button" value="点我" id="btn">
</body>
$("#btn").bind("click",function () {
alert("我不要你觉得,我要我觉得");
}); //或写成键值对(对象)
$("#btn").bind({"click":function () {
alert("我不要你觉得,我要我觉得");
}});
//多个事件共用一个事件处理函数的时候,还可以这样写
$("#btn").bind({"mouseover mouseout":function () {
$(this).append("<p>我不要你觉得,我要我觉得</p>")
}});
二、delegete()
delegete() 与bind()相似
差别在于这个函数是给子元素绑定函数
参数:1.要绑定事件的子元素
2.事件
3.事件处理函数 三、on()
最推荐使用的事件绑定方法,主流
结合了bind和delegate两者的用途
两个参数时:(类似于bing)
1.事件名
2.事件处理函数
三个参数:(类似于delegate)
1.事件名
2.绑定事件的子元素
3.事件处理函数
以下两种写法,实现的效果都是一样的噢
<div id="dv">
<button>冰箱不够怎么办</button>
</div>
//第一种写法
$("#dv button").on("click",function () {
alert("买!");
});
//第二种写法
$("#dv").on("click","button",function () {
alert("买!");
});
事件解绑
有绑定就有解绑
* on<=>off
* delegate<=>undelegate
* bind<=>unbind
* 注意:解绑时,只会解绑自身事件,不会将子级的事件解绑。 关于冒泡,可以通过return false可以避免冒泡
总结:
* bind():
* 1.$("绑定事件的元素").bind("事件",事件处理函数);
* 2.$("绑定事件的元素").bind({"事件1",事件处理函数1,"事件2",事件处理函数2,..."事件n",事件处理函数n});
* delegate():
* $("父级元素").delegate("子级元素","事件",事件处理函数);
* on():
* 1.$("绑定事件的元素").on("事件",事件处理函数);
* 2.$("绑定事件的元素").on({"事件1",事件处理函数1,"事件2",事件处理函数2,..."事件n",事件处理函数n});
* 3.$("父级元素").on(""事件",子级元素",事件处理函数);
* on<=>off
* delegate<=>undelegate
* bind<=>unbind
jQuery笔记(事件绑定和解绑)的更多相关文章
- python 全栈开发,Day55(jQuery的位置信息,JS的事件流的概念(重点),事件对象,jQuery的事件绑定和解绑,事件委托(事件代理))
一.jQuery的位置信息 jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集 ...
- 前端 -----jQuery的事件绑定和解绑
11-jQuery的事件绑定和解绑 1.绑定事件 语法: bind(type,data,fn) 描述:为每一个匹配元素的特定事件(像click)绑定一个事件处理器函数. 参数解释: type (S ...
- jQuery的事件绑定和解绑
1.绑定事件 $('获取的标签对象').bind('要操作的方法, {操作的内容 是字典的形式},function(){} ') 语法: bind(type,data,fn) 描述:为每一个匹配元 ...
- 10 jQuery的事件绑定和解绑
1.绑定事件 语法: bind(type,data,fn) 描述:为每一个匹配元素的特定事件(像click)绑定一个事件处理器函数. 参数解释: type (String) : 事件类型 data ( ...
- jQuery系列(十一):jQuery的事件绑定和解绑
1.绑定事件 语法: bind(type,data,fn) 描述:为每一个匹配元素的特定事件(像click)绑定一个事件处理器函数. 参数解释: type (String) : 事件类型 data ( ...
- python全栈开发day49-jquery的位置信息、事件流、事件对象,事件委托,事件绑定和解绑
一.昨日内容回顾 1. jQuery的属性操作 1) html属性操作:attr 2) DOM属性操作:prop 3) 类样式操作:addClass.removeClass.toggleClas ...
- 11-jQuery的事件绑定和解绑
1.绑定事件 语法: bind(type,data,fn) 描述:为每一个匹配元素的特定事件(像click)绑定一个事件处理器函数. 参数解释: type (String) : 事件类型 data ( ...
- jQuery绑定和解绑点击事件及重复绑定解决办法
原文地址:http://www.111cn.net/wy/jquery/47597.htm 绑点击事件这个是jquery一个常用的功能,如click,unbind等等这些事件绑定事情,但还有很多朋友不 ...
- 原生js绑定和解绑事件,兼容IE,FF,chrome
主要是最近项目中用到了原生的js 解绑和绑定 事件 然后今天研究了一下,其实问题不大,不过要注意不要把单词写错了,今天我就找了好久单词写错了. 需求:当鼠标移上去以后,给Select加载元素,接着解 ...
随机推荐
- 【Linux】- 同步网络时间
转自:Linux同步网络时间 Linux服务器运行久时,系统时间就会存在一定的误差,一般情况下可以使用date命令进行时间设置,但在做数据库集群分片等操作时对多台机器的时间差是有要求的,此时就需要使用 ...
- Unity应用怎么暂停(Pause)
非常多时候,应用程序或者是游戏须要用上暂停功能,unity提供了不少便捷的方式,列在以下: 1.在editor中,按下pausebutton就可以暂停 2.假设在代码中控制,能够通过设置Time.ti ...
- js中构造函数的原型添加成员的两种方式
首先,js中给原型对象添加属性和方法. 方式一:对象的动态特效 给原型对象添加成员 语法:构造函数.prototype.方法名=function (){ } 方式二:替换原型对象(不是覆盖,而是替换, ...
- 下载文件时HttpServletResponse设置响应头的Content-Disposition属性
Content-Disposition属性有两种类型 inline :将文件内容直接显示在页面 attachment:弹出对话框让用户下载 弹出对话框下载文件 resp.setHeader(" ...
- Vue开发环境安装并集成element-ui示例
此文为转载,原文链接:https://blog.csdn.net/weixin_44670973/article/details/88871106 在此对原文中部分内容进行补充. 补充:element ...
- texinfo - 软件文档系统
DESCRIPTION 描述 Texinfo 是一种文档系统,使用单一的源文件来产生在线文档以及可打印的输出.它主要用于书写软件使用手册. 要查看 Texinfo 语言和相关工具的全面描述,请查看 T ...
- 记录一下list转map
Map<String,String> mapListStream = list.stream().collect(Collectors.toMap(key,value)):key对应key ...
- Codeforces 1150D DP
题意:给你一个长度为n的字符串,有q次询问,每次询问会给字符串x的末尾添加一个字符y,或者删除字符串x末尾的字符,询问过后,要判断长度为n的字符串中是否有3个不重合的子序列,是这3个字符串. 思路:设 ...
- STM32三种BOOT模式介绍
一.三种BOOT模式介绍 所谓启动,一般来说就是指我们下好程序后,重启芯片时,SYSCLK的第4个上升沿,BOOT引脚的值将被锁存.用户可以通过设置BOOT1和BOOT0引脚的状态,来选择在复位后的启 ...
- 【JZOJ6433】【luoguP5664】【CSP-S2019】Emiya 家今天的饭
description analysis 首先可以知道不符合要求的食材仅有一个,于是可以容斥拿总方案数减去选不合法食材的不合法方案数 枚举选取哪一个不合法食材,设\(f[i][j]\)表示到第\(i\ ...