委托事件on

多个事件绑定同一个函数

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

多个事件绑定不同函数

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

将数据传递到处理程序

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

委托事件的高级用法-把事件绑定在父元素上

.on( events ,[ selector ] ,[ data ], handler(eventObject) )

$("div").on("click","p",fn)
事件绑定在最上层div元素上,当用户触发在a元素上,事件将往上冒泡,一直会冒泡在div元素上。如果提供了第二参数,那么事件在往上冒泡的过程中遇到了选择器匹配的元素,将会触发事件回调函数

这样可以极大优化内存,事件都绑定在一个div上,而不是对每个div里面的p元素绑定事件,具体为什么有待讨论,一般都用这种写法

jquery1.7以前用live方法delegate方法等等,1.7以后用on

.off("事件名")删除委托事件

事件对象

事件对象是用来记录一些事件发生时的相关信息的对象。

事件对象只有事件发生时才会产生,并且只能是事件处理函数内部访问,在所有事件处理函数运行结束后,事件对象就被销毁。

e.target ,target属性可以是注册事件的元素或者它的子元素。通常用event.target和this来确定事件是不是由于冒泡而触发的。e.target代表当前触发事件的元素,可以通过当前元素对象的一系列属性来判断是不是我们想想要的元素。

event.type  获取时间的类型  比如是click啊还是mousemove什么的

event.pageX,event.pageY 获取鼠标当前相当于页面的坐标

event.preventDefault()  阻止默认行为  比如a事件的跳转链接

event.stopPropagation() 阻止时间冒泡

event.which 获取鼠标单击时,单机的是鼠标的哪个键

event.currentTarget 在事件冒泡过程中的当前DOM元素

this和event.target的区别

this 是javascript的一个关键字,当函数运行时在内部自动生成,this指调用这个函数的对象,可以使用这个元素的javascript属性和方法,this会变

e.target 中的e是可以自己随意取名的,需要通过参数传过来。e.target就是触发这个事件的目标元素,e.target不会变

this其实就等于e.currentTarget,

this和event.target都是dom对象,如果要使用jquey中的方法可以将他们转换为jquery对象:$(this)和$(event.target);

如果你想知道.click,.bind,.unbind,.on,.off,.delegate,.undelegate他们的区别看我以前写的一篇文章

http://www.cnblogs.com/wufangfang/p/5333987.html

jquery总结05-常用事件04-委托事件的更多相关文章

  1. jQuery Direct and delegated events 直接事件与委托事件

    ref: http://api.jquery.com/on/ 直接事件: 将事件委托直接绑定到dom元素上,当事件发生时触发handler. 委托事件:  将事件委托绑定到dom元素的外层容器上,当事 ...

  2. 解密jQuery事件核心 - 委托设计(二)

    第一篇 http://www.cnblogs.com/aaronjs/p/3444874.html 从上章就能得出几个信息: 事件信息都存储在数据缓存中 对于没有特殊事件特有监听方法和普通事件都用ad ...

  3. python 全栈开发,Day55(jQuery的位置信息,JS的事件流的概念(重点),事件对象,jQuery的事件绑定和解绑,事件委托(事件代理))

    一.jQuery的位置信息 jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集 ...

  4. 委托、Lambda表达式、事件系列04,委托链是怎样形成的, 多播委托, 调用委托链方法,委托链异常处理

    委托是多播委托,我们可以通过"+="把多个方法赋给委托变量,这样就形成了一个委托链.本篇的话题包括:委托链是怎样形成的,如何调用委托链方法,以及委托链异常处理. □ 调用返回类型为 ...

  5. 事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流

    一.事件冒泡定义 事件冒泡是指在一个对象触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那 ...

  6. jQuery里面的常用的事件和基础动画的实现

    一:了解jquery里面常用的事件 二:了解基础动画的实现 1:加载DOM 在JavaScript中使用window.onload事件作为窗体加载事件(它在页面所有数据加载完成之后才会执行) 在jQu ...

  7. jQuery 学习笔记(5)(事件绑定与解绑、事件冒泡与事件默认行为、事件的自动触发、自定义事件、事件命名空间、事件委托、移入移出事件)

    1.事件绑定: .eventName(fn) //编码效率略高,但部分事件jQuery没有实现 .on(eventName, fn) //编码效率略低,所有事件均可以添加 注意点:可以同时添加多个相同 ...

  8. 事件冒泡及事件委托的理解(JQuery Dom操作)

    jQuery事件冒泡: click mouseenter 等事件没有绑定 也会触发,只是触发后没有任何结果 子元素触发事件后,会把触发事件传递给父元素,那么父元素也会被触发. 不管有没有绑定事件,都会 ...

  9. 理解jquery on 委托事件的机制

    前两天做了一个点击任意位置,都能关闭菜单的功能,因为菜单里面的每一个a,的点击事件都是用on绑定的.所以在阻止冒泡的时候不管用,今天特意来理解一下on的机制 on 是委托事件,利用的就是冒泡原理 $( ...

  10. 委托事件和jquery中的delegate方法

    利用事件冒泡的特性,给父元素绑定事件,然后判断事件对象,来给父元素的每个子元素添加事件,而不是直接在所有的子元素上绑定事件: <ul> <li></li> < ...

随机推荐

  1. smaller programs should improve performance

    COMPUTER ORGANIZATION AND ARCHITECTURE DESIGNING FOR PERFORMANCE NINTH EDITION In this section, we l ...

  2. PHP 判断客户端是IOS还是Android

    <?php if(strpos($_SERVER['HTTP_USER_AGENT'], 'iPhone')||strpos($_SERVER['HTTP_USER_AGENT'], 'iPad ...

  3. jQuery ajax 返回的数据类型

    请求数据的接口信息如下 当我们打印出返回的数据与数据节点时,我们发现数据节点显示为undefind 查看一下我们的代码 $.ajax({ type: "Post", url: &q ...

  4. jquery on()方法绑定多个选择器,多个事件

    on(events,[selector],[data],fn) •events:一个或多个用空格分隔的事件类型和可选的命名空间,如"click"或"keydown.myP ...

  5. JS之对象

    每个对象的属性有两种,每种属性有4中特征描述符 1.数据属性 1.1 [[configurable]]:表示不能通过delete删除属性,不能修改属性的特性,不能将数据属性改为访问器属性,默认值fal ...

  6. Inside Flask - json 处理

    Inside Flask - json 处理 在处理 web api 时,json 是非常好用的数据交换格式,它结构简单,基本上各种主流的编程语言都有良好的支持工具. flask 中处理 json 时 ...

  7. H5页面实现一个Audio标签加载多个音频文件,并进行播放和展示音频长度

    最近微信项目中有需求,要将微信端发送过来的amr格式的语音文件,在项目中的页面上进行展示和播放,实现方式如下: 1.首先java后台收到微信端的消息推送的时候,使用 ffmpeg将amr格式的音频文件 ...

  8. 连接弹性和命令拦截的 ASP.NET MVC 应用程序中的实体框架

    最近悟出来一个道理,在这儿分享给大家:学历代表你的过去,能力代表你的现在,学习代表你的将来. 十年河东十年河西,莫欺少年穷 学无止境,精益求精    上篇博客我们学习了EF 之 MVC 排序,查询,分 ...

  9. java-EL

    语法 ¥{} 运算符 算数 加+.减-.乘*.除/.模% 比较 大于>.小于<.等于==.不等于!=.empty(判断是否为空,空位true,非空为false)(null 未实例化,&qu ...

  10. html5,导航

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...