html学习 - jquery事件监听详解
来源:互联网 发布:传智播客2016crm源码 编辑:程序博客网 时间:2024/06/07 10:24
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)
例子如下:
$("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事件监听详解
- html监听,键盘事件
- android监听html事件
- JS:HTML事件监听
- jquery 监听事件
- jquery 监听回车事件
- jquery ajax监听事件
- jQuery监听回车事件
- Jquery事件监听
- html学习 - javascript事件监听以及addEventListener参数分析
- jQuery-mobile 学习笔记之三(事件监听)
- jQuery的ajax学习(二)事件监听
- [HTML] JS 键盘监听事件
- HTML事件监听和绑定
- 监听html窗口焦点事件
- jQuery监听事件经典例子
- jQuery动态绑定监听事件
- jQuery 监听修改文本框事件
- 算法和数据结构是程序的第一秘诀
- 多线程GCD的初步研究
- LINUX 命令大全
- noip2011 day1-3 Mayan游戏
- Cloud
- html学习 - jquery事件监听详解
- http 网络请求 下载图片
- Ugly Numbers UVA 136 priority_queue+set
- 连接一切
- pb操作Excel文件多个sheet(留存备查)
- CC4.4
- 【Jason's_ACM_解题报告】Boxes in a Line
- leetcode:Climbing Stairs菜鸟解法
- java 调用matlab