美文网首页
jQuery基础(三)—事件篇-----事件的绑定与解绑

jQuery基础(三)—事件篇-----事件的绑定与解绑

作者: 王翔爱摇滚乐爱电影爱心理学爱哲 | 来源:发表于2017-08-02 11:15 被阅读0次

1、on()的多事件绑定

on()的多事件绑定
之前学的鼠标事件,表单事件与键盘事件都有个特点,就是直接给元素绑定一个处理函数,所有这类事件都是属于快捷处理。翻开源码其实可以看到,所有的快捷事件在底层的处理都是通过一个"on"方法来实现的。jQuery on()方法是官方推荐的绑定事件的一个方法。

基本用法:.on( events ,[ selector ] ,[ data ] )
最常见的给元素绑定一个点击事件,对比一下快捷方式与on方式的不同
$("#elem").click(function(){}) //快捷方式
$("#elem").on('click',function(){}) //on方式
最大的不同点就是on是可以自定义事件名

多个事件绑定同一个函数
$("#elem").on("mouseover mouseout",function(){ });
通过空格分离,传递不同的事件名,可以同时绑定多个事件

多个事件绑定不同函数
$("#elem").on({
mouseover:function(){},
mouseout:function(){}
});
通过空格分离,传递不同的事件名,可以同时绑定多个事件,每一个事件执行自己的回调方法

http://js.jirengu.com/gimiqobife/1/

将数据传递到处理程序?????

function greet( event ) {
alert( "Hello " + event.data.name ); //Hello 慕课网
}
$( "button" ).on( "click", {
name: "慕课网"
}, greet );
可以通过第二参数(对象),当一个事件被触发时,要传递给事件处理函数的

2、on()的高级用法?????

http://www.imooc.com/code/10032

3、卸载事件off()方法

根据on绑定事件的一些特性,off方法也可以通过相应的传递组合的事件名,名字空间,选择器或处理函数来移除绑定在元素上指定的事件处理函数。当有多个过滤参数时,只有与这些参数完全匹配的事件处理函数才会被移除

绑定2个事件
$("elem").on("mousedown mouseup",fn)

删除一个事件
$("elem").off("mousedown")

删除所有事件
$("elem").off("mousedown mouseup")

快捷方式删除所有事件,这里不需要传递事件名了,节点上绑定的所有事件讲全部销毁
$("elem").off()

http://js.jirengu.com/mukexivawa/1/

相关文章

  • 03-jQuery事件相关

    事件绑定与解绑 jQuery中有两种绑定事件方式eventName(fn);编码效率略高/部分事件jQuery没有...

  • jQuery事件机制

    jQuery的事件机制,指的是:jQuery对JavaScript操作DOM事件的封装,包括了:事件绑定、事件解绑...

  • jQuery基础(三)—事件篇-----事件的绑定与解绑

    1、on()的多事件绑定 on()的多事件绑定之前学的鼠标事件,表单事件与键盘事件都有个特点,就是直接给元素绑定一...

  • jquery中click事件绑定及移除的几种方法总结

    绑定事件与解绑事件是常用到的写法,这里总结了几种常见的绑定事件与解绑事件的方法。 绑定click事件 一:直接在h...

  • JS基础学习:为元素解绑事件

    解绑事件 用什么方式绑定事件,就应该用对应的方式解绑事件。有三种方式 1.解绑事件对象.on事件名字=事件处理函数...

  • jQuery事件与动画

    jQuery绑定事件的方法 .on() 为其传递数据时只需在事件类型后添加json数据即可 解绑事件.off() ...

  • 事件解绑

    用什么方式绑定事件就应该用什么方式解绑事件 解绑事件: 对象.on事件名字=事件处理函数--->绑定事件对象.on...

  • js跟jq的事件绑定以及解绑

    事件绑定 基本的事件绑定 其他事件绑定 On 替代bind方法/解绑用unbind on代替live动态创建元素绑...

  • 2018-04-10JQ中的事件

    事件绑定与解绑 bind/ ubbind 鼠标悬停事件 进入mouseover 离开 mouseout $("...

  • JQuery-事件绑定与解绑

    元素绑定事件 第一种方式:对象.事件名字(事件处理函数); 第一种写法链式编程 第二种方式:对象.bind(‘事件...

网友评论

      本文标题:jQuery基础(三)—事件篇-----事件的绑定与解绑

      本文链接:https://www.haomeiwen.com/subject/ckfghxtx.html