html学习 - jquery事件监听详解
html学习 - jquery事件监听详解
- html学习 - jquery事件监听详解
- 监听方法
- 监听方法参数解释
- click参数
- 事件自动执行问题解决
- bind方法
- live方法
监听方法
在jquery里,监听的方法比较多,用的最多的就是简单的.click()
.onchange()
.pressdown()
所以这样很简单啊,直接使用就好了,只要符合参数规范就可以了。除了这个还有bind()
live()
方法。
而addEventListener()同bind()方法是没有很大功能上的区别的,是因为bind()
方法是jquery为了解决浏览器的兼容性问题而创建的。
监听方法参数解释
.click()参数
在简单的监听方法中例如.click()
中,它的参数就只有一个回调函数,可以:
$(selector).click(function)
其中selector是选择器这个东西在以前有讲过, 然后我们举一个简单的例子:
$("button").click(function(){$("p").slideToggle();
});
这个就是在按钮点击的时候除法里面的回调函数,然后让元素p隐藏的效果。
.bind()
的方法我在下面会详细解释。
事件自动执行问题解决
这其中不管是简单的事件监听方法,还是.bind()
.live()
等等,都可能会遇到一个问题,就是会自动执行。在我们使用匿名回调函数的时候不会遇到,但是在使用自己命名的回调函数就会遇到,例子如下:
$('#createImageData').click(createImageDataPressed());
function createImageDataPressed(event){alert("click");
}
这个代码就会自动执行,即使不点击id为createImageData的按钮,这是因为在click()里面的函数加了括号
不添加括号就不会出现这个问题如:$('#createImageData').click(createImageDataPressed);
这样就不会出现自动执行的问题了。
bind()方法
.bind()
方法其实并没有和addEventListener在用法上有很大区别,使用方法为:
$(selector).bind(event,data,function)
event | 必须填写,说明绑定的事件类型 |
---|---|
data | 可选,用来规定传递到函数的额外数据 |
function | 必须填写,事件响应函数 |
例子如下:
$("button").bind("click",function(){$("p").slideToggle();});
然后.bind()
方法还有另外一个使用方法。
$(selector).bind(event:function, event:function, ...);
这种用法就是给某个元素绑定多个事件,例子如下:
$("button").bind({click:function(){$("p").slideToggle();},mouseover:function(){$("body").css("background-color","red");}, mouseout:function(){$("body").css("background-color","#FFFFFF");} });
此代码来源:W3C
这里要说一下,就是.bind()
方法是只能对页面上先加载的元素起作用,对于后来生成的元素是不可以的。所以这个时候就需要.live()
了
live()方法
我们可以把.bind()
和.live()
看成同一个东西,不过.live()
多了一个功能,是它可以对未来的元素,和马上要生成的元素还有已经有的元素都起作用,这样就会方便很多。
大致就以上了。
转载请注明出处。
html学习 - jquery事件监听详解相关推荐
- JavaScript 的addEventListener() 事件监听详解!
JavaScript 的addEventListener() 事件监听详解! addEventListener() 用于向指定元素添加事件. 可以向一个元素添加多次事件或者多次不同事件,后面的事件是 ...
- Activiti工作流之事件监听详解-ActivitiEventListener
工作流程事件监听可用于任务提醒.超时提醒等的模块的设计.以下是相关事件的介绍 一.事件监听类型 ENGINE_CREATED 监听器监听的流程引擎已经创建完毕,并准备好接受API调用. ENGINE_ ...
- Android学习按键事件监听与Command模式
Android学习按键事件监听与Command模式 - Dufresne - 博客园 Android学习按键事件监听与Command模式 一 Command模式 意图: 将一个请求封装为一个对象,从而 ...
- 二、Vue基础语法学习笔记——事件监听v-on、条件判断(v-if、v-else-if、v-else、v-show)、循环遍历(v-for遍历数组对象,key属性、检测数组更新)、图书案例、双向绑定
四.事件监听 在前端开发中,我们需要经常和用于交互. 这个时候,我们就必须监听用户发生的时间,比如点击.拖拽.键盘事件等等 在Vue中如何监听事件呢?使用v-on指令 v-on介绍 作用:绑定事件监听 ...
- jQuery事件监听
monitorEvents() 浏览器事件监听 控制或右键单击元素并选择"检查 (Inspect)".在 javaScript 控制台标签中输入: monitorEvents($0 ...
- Vue watch监听详解,一篇文章彻底搞懂Vue2/Vue3中的watch监听
watch监听在vue2和vue3中的用法详解(全) Vue2中的watch用法 Vue3中的watch用法 首先写一个vue页面 <template><div><h1& ...
- 手动更改oracle监听,详解Oracle数据库手动注册监听的方法
本文主要介绍了为一个Oracle数据库(t02)配置多个监听(listener)的实验,过程有点小曲折.通过这个实验让我们来学习一下如何手动注册监听.以下是演示的过程. 1.新增两个测试的监听,lis ...
- Android 卸载监听详解
目前市场上比较多的应用在用户卸载后会弹出意见反馈界面,比如360手机卫士,腾讯手机管家,应用宝等等,虽然本人不太认同其交互方式,但是在技术实现上还是可以稍微研究下的.其实要实现这个功能,最主要的就是监 ...
- java监听上传文件,Springmvc文件上传监听详解
spring mvc CommonsMultipartResolver 文件上传监听. /** * 重写 parseRequest方法 监听 */ @Override protected Multip ...
最新文章
- 【发现】iframe 放入 Updatepanel 中没有作用,整页总要闪烁一次的解决办法
- 跨站点脚本(XSS)
- Efficient scaling in a Task-Based Game Engine
- 利用SQL语言实现数据库的静态完整性
- BZOJ5093 图的价值(NTT+斯特林数)
- spring-第十五篇之AOP面向切面编程之AspectJ框架简单应用
- Sessions, Window Stations and Desktops(GetDesktopWindow函数得到的桌面句柄, 是Csrss.exe创建的一个窗口)
- java实现并查集算法
- linux上多个CUDA切换使用(小白教程)
- sierpinski三角形的维数_神奇的分形艺术(二):Sierpinski三角形
- 自定义安装官方Microsoft Office 2019
- AMD显卡怎么设置玩游戏更流畅
- Pandas缺失值inf与nan处理实践
- 为什么要在单片机程序中使用结构体和指针
- MIP实操指南,你真的需要配置吗?
- 移动端电商项目开发流程
- 主流操作系统的开发语言
- 毕业设计-基于协同过滤算法的旅游推荐系统
- Windows 下解决 VsCode 使用 SSH 连接报 Bad owner or permissions on C:\\Users\\Administrator/.ssh/config 错误
- SGVision与FX3U通讯
热门文章
- Linux进阶 | ❤Docker+NFS+Volume实现数据一致性❤
- 动态规划:奶牛吃草问题
- uoj problem 11 ydc的大树
- tkmybatis 默认值 问题
- Tengine + BabaSSL ,让国密更易用
- python证件照_python实现证件照换底功能
- 【算法设计与分析】7、0/1背包问题,动态规划
- 【C++】Web服务器项目所用到的函数详解
- mac卸载Sophos[即使没有服务端管理员密码]-完整有效彻底
- python中 math.isfinite返回值为false_带有Python示例的math.isfinite()方法