jQuery技术

jquery事件监听详解

字号+ 作者:H5之家 来源:H5之家 2017-05-31 10:02 我要评论( )

html学习 - jquery事件监听详解监听方法 在jquery里,监听的方法比较多,用的最多的就是简单的.click() .onchange() .pressdown() 所以这样很简单啊,直接使用就好了,只要符合参数规范就可以了。除了这个还有bind() live() 方法。 而addEventListener()同bi

html学习 - jquery事件监听详解 监听方法

在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()); { 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()多了一个功能,是它可以对未来的元素,和马上要生成的元素还有已经有的元素都起作用,这样就会方便很多。

大致就以上了。

转载请注明出处。

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 前端工程师之jquery实战案例大集合

    前端工程师之jquery实战案例大集合

    2017-05-31 11:01

  • jQuery判断数组是否包含了指定的元素

    jQuery判断数组是否包含了指定的元素

    2017-05-30 13:00

  • jQuery操作Table技巧大汇总,jquerytable技巧

    jQuery操作Table技巧大汇总,jquerytable技巧

    2017-05-30 10:03

  • 前端开发者都应知道的jQuery小技巧

    前端开发者都应知道的jQuery小技巧

    2017-05-30 10:00

网友点评