$.on()方法是jquery1.7之后的一个超级方法,将事件绑定和事件委托整合到一个函数中去,支持绑定多个事件,并且可以绑定自定义事件。使用起来很方便。

demo传送门

事件委托

首先说一下事件委托。假如有100个<li>元素需要绑定一个click事件,通常的做法是:

$('li').click(eventHandler);
function eventHandler(event){
  alert(event.target.innerHtml);
}

但是这样做有两个缺点:

  1. 每个元素绑定了相同的事件,进行了大量的重复操作。
  2. 当向ul中加入新的元素时,需要再次为这个新元素绑定上述事件。

使用事件委托就可以解决这个问题。

首先把事件绑定在子元素的父节点上,当点击子元素时,click事件会冒泡到父元素上,在父元素的eventHandler中,通过检测event.target来对触发该事件的子元素进行操作。用原生js实现事件委托的代码如下:

var $=function(id){
return document.getElementById(id);
};
var eventHandler=function(event){
var event = event? event: window.event
var target = event.srcElement ? event.srcElement:event.target;
do(target);
}
$('#ul').addEventListener('click',eventHandler);

在jquery的on方法中实现事件委托就更简单了,on方法可以接受三个参数:

第一个参数是事件名,可以只绑定一个事件,如on('click'),也可以绑定多个事件,如on('click dbclick mouseover')等

$('ul').on('click mouseover',eventHandler);//绑定多个事件

  

第二个参数是可选参数,接受一个selector,当事件触发元素符合selector时,会调用事件处理函数。

$('ul').on('click mouseover','li',eventHandler);//触发元素是li时执行eventandler
$('ul').on('click mouseover','li:even',eventHandler);//触发元素是li时,而且元素是第单数个时执行eventandler

  

第三个参数是事件处理函数。

demo------->

自定义事件

on()方法可以绑定自定义事件,并通过trigger()来触发。所谓自定义事件,就是区别于标准事件的,在事件名称上,可以自己指定事件名。在触发动作上,则需要检测某个状态,并通过trigger来触发。

打个比方:到了晚上,当人进到屋子里会触发开灯事件,这里'turnOn'就是事件名,检测状态则是:人是否进入房子里。伪代码如下:

house.on('turnOn',turnOnLight);//为屋子绑定开灯事件
if(man in house){//检测人是否进入房间
house.trigger('turnOn');//触发开灯事件
}

开灯事件在线demo

这里用到自定义事件,和简单的拖拽功能。

html:(省略body和script等标签)

<div id='man'></div>
<div id=house>
<div id='light'></div>
</div>

css:

body{
width:100%;
overflow:hidden;
}
div{
background:red;
}
#man{
color:white;
position:absolute;
width:20%;
height:20%;
background-color:#ccc;
background-image:url('//pic.cnblogs.com/avatar/1016471/20161030122848.png');
background-size:contain;
background-repeat:no-repeat;
}
#house{
float:right;
width:300px;
height:300px;
background-color:black;
font-size:30px;
transition:background 0.3s ease-in-out; }
#light{
margin:0 auto;
width:20px;
height:20px;
border-radius:50%;
background-color:white;
display:none;
box-shadow:#fff 0px 0px 20px;
}

js:

var house=$('#house'),
man=$('#man'),
light=$('#light'),
turnOn=false;//表示开关状态,初始为false house.on('turnOn',function(){
if(turnOn){//如果开灯了则返回,防止重复触发事件
return true;
}
light.show('slow');
$(this).css('background-color','#529');
});
house.on('turnOff',function(){
if(!turnOn){//如果没开则返回,防止重复触发事件
return true;
}
light.hide();
$(this).css('background-color','black');
});
man.on('mousedown',function(event){
$(this).on('mousemove',mouseMove);
});
man.on('mouseup',function(event){
$(this).off('mousemove',mouseMove);
}); var mouseMove=function(event){
event.preventDefault();
var x=event.pageX,y=event.pageY,$this= $(this);
$this.css({left:(x-40)+'px',top:(y-40)+'px'});
if($this.offset().left+$this.width()>house.offset().left){
house.trigger('turnOn');//如果人进去,则触发开灯事件
turnOn=true;//将开关状态重置为true
}
if($this.offset().left+$this.width()<house.offset().left
&& turnOn){
house.trigger('turnOff');
turnOn=false;
}
};

  

jquery.on()超级方法的更多相关文章

  1. jquery 通过submit()方法 提交表单示例

    jquery 通过submit()方法 提交表单示例: 本示例:以用户注册作为例子.使用jquery中的submit()方法实现表单提交. 注:本示例仅提供了对表单的验证,本例只用选用了三个字段作为测 ...

  2. 重写jquery的ajax方法

    //首先备份下jquery的ajax方法 var _ajax=$.ajax; //重写jquery的ajax方法 $.ajax=function(opt){ //备份opt中error和success ...

  3. jQuery的extend方法

    jq中的extend在面试中经常会被问道,今天我总结一个下有关于extend的用法三种进行对比,可能不全,希望大家指点, 用法一: $.extend({})  ,为jQuery类添加方法,可以理解为扩 ...

  4. jQuery中eq()方法用法实例

    本文实例讲述了jQuery中eq()方法用法.分享给大家供大家参考.具体分析如下: 此方法能够获取匹配元素集上的相应位置索引的元素. 匹配元素集上元素的位置索引是从0开始的. 语法结构: 复制代码 代 ...

  5. HTML 5 的自定义 data-* 属性和jquery的data()方法的使用

    人们总喜欢往HTML标签上添加自定义属性来存储和操作数据.但这样做的问题是,你不知道将来会不会有其它脚本把你的自定义属性给重置掉,此外,你这样做也会导致html语法上不符合Html规范,以及一些其它副 ...

  6. 深度理解Jquery 中 offset() 方法

    参考原文:深度理解Jquery 中 offset() 方法

  7. [转]jQuery的each方法的几种常用的用法

    下面提一下jQuery的each方法的几种常用的用法 复制代码 代码如下:  var arr = [ "one", "two", "three&quo ...

  8. jquery中$.ajax方法提交表单

    function postdata(){                        //提交数据函数 $.ajax({                                //调用jqu ...

  9. JS,JQuery的扩展方法

    转 http://blog.csdn.net/tuwen/article/details/11464693 //JS的扩展方法: 1 定义类静态方法扩展 2 定义类对象方法扩展            ...

随机推荐

  1. Aspose.Cells导出Excel(2)

    DataTable dtTitle = ds.Tables[]; DataTable dtDetail = ds.Tables[]; int columns = dtTitle.Columns.Cou ...

  2. IOS 2D游戏开发框架 SpriteKit-->续(创建用户角色精灵--原创)

    一.主要实现   今天spritekit实现创建玩家角色精灵(SKSpriteNode *), 增加角色精灵的手势操作,这里增加的手势计算方法与objective-c中是不一样的,因为objectiv ...

  3. 计算(LnN!)的值

    import java.util.*;import java.math.*;public class CaculatorLnN { public static void main(String[] a ...

  4. 流程控制和循环.png

  5. 使用Mavne生成可以执行的jar文件

    到目前为之,还没有运行HelloWorld的项目,不要忘了HelloWorld类可是有一个main方法的.使用mvn clean install命令默认生成的jar 包是不能直接运行的.因为带有mai ...

  6. SQLServer2005+获取表结构信息

    SELECT d.name TableName, a.colorder FieldNo,a.name FieldName, (case when COLUMNPROPERTY( a.id,a.name ...

  7. CSS3 border-radius 圆角属性

    使用 CSS3 border-radius 属性,你可以给任何元素制作 "圆角". 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号. -webkit- 或 -moz- ...

  8. 释放Android的函数式能量(I):Kotlin语言的Lambda表达式

    原文标题:Unleash functional power on Android (I): Kotlin lambdas 原文链接:http://antonioleiva.com/operator-o ...

  9. git+coding.net记录篇

    很久没用了,有些配置快忘记了,记录下来,以供以后参考回忆 首先下载好git插件,然后在as上面设置好本地项目地址 设置好git,点击test测试通过 然后把项目添加到git本地库 你会看到你项目里的文 ...

  10. 数据备份的OSS接口

    最近在做一个新的项目,从RDS备份到OSS,进行数据备份以及后续的还原.这边对阿里云的OSS数据上传接口进行说明,先做下笔记先简单介绍下OSS: ①Object 在OSS中,用户操作的基本数据单元是O ...