jquery.on()超级方法
$.on()方法是jquery1.7之后的一个超级方法,将事件绑定和事件委托整合到一个函数中去,支持绑定多个事件,并且可以绑定自定义事件。使用起来很方便。
事件委托
首先说一下事件委托。假如有100个<li>元素需要绑定一个click事件,通常的做法是:
$('li').click(eventHandler);
function eventHandler(event){
alert(event.target.innerHtml);
}
但是这样做有两个缺点:
- 每个元素绑定了相同的事件,进行了大量的重复操作。
- 当向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
第三个参数是事件处理函数。
自定义事件
on()方法可以绑定自定义事件,并通过trigger()来触发。所谓自定义事件,就是区别于标准事件的,在事件名称上,可以自己指定事件名。在触发动作上,则需要检测某个状态,并通过trigger来触发。
打个比方:到了晚上,当人进到屋子里会触发开灯事件,这里'turnOn'就是事件名,检测状态则是:人是否进入房子里。伪代码如下:
house.on('turnOn',turnOnLight);//为屋子绑定开灯事件
if(man in house){//检测人是否进入房间
house.trigger('turnOn');//触发开灯事件
}
这里用到自定义事件,和简单的拖拽功能。
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()超级方法的更多相关文章
- jquery 通过submit()方法 提交表单示例
jquery 通过submit()方法 提交表单示例: 本示例:以用户注册作为例子.使用jquery中的submit()方法实现表单提交. 注:本示例仅提供了对表单的验证,本例只用选用了三个字段作为测 ...
- 重写jquery的ajax方法
//首先备份下jquery的ajax方法 var _ajax=$.ajax; //重写jquery的ajax方法 $.ajax=function(opt){ //备份opt中error和success ...
- jQuery的extend方法
jq中的extend在面试中经常会被问道,今天我总结一个下有关于extend的用法三种进行对比,可能不全,希望大家指点, 用法一: $.extend({}) ,为jQuery类添加方法,可以理解为扩 ...
- jQuery中eq()方法用法实例
本文实例讲述了jQuery中eq()方法用法.分享给大家供大家参考.具体分析如下: 此方法能够获取匹配元素集上的相应位置索引的元素. 匹配元素集上元素的位置索引是从0开始的. 语法结构: 复制代码 代 ...
- HTML 5 的自定义 data-* 属性和jquery的data()方法的使用
人们总喜欢往HTML标签上添加自定义属性来存储和操作数据.但这样做的问题是,你不知道将来会不会有其它脚本把你的自定义属性给重置掉,此外,你这样做也会导致html语法上不符合Html规范,以及一些其它副 ...
- 深度理解Jquery 中 offset() 方法
参考原文:深度理解Jquery 中 offset() 方法
- [转]jQuery的each方法的几种常用的用法
下面提一下jQuery的each方法的几种常用的用法 复制代码 代码如下: var arr = [ "one", "two", "three&quo ...
- jquery中$.ajax方法提交表单
function postdata(){ //提交数据函数 $.ajax({ //调用jqu ...
- JS,JQuery的扩展方法
转 http://blog.csdn.net/tuwen/article/details/11464693 //JS的扩展方法: 1 定义类静态方法扩展 2 定义类对象方法扩展 ...
随机推荐
- C# 当前系统的多管理账户测判断
using (DirectoryEntry comp = new DirectoryEntry("WinNT://" + Environment.MachineName + &qu ...
- Struts 原理
今天开始接触公司的框架,叫YNA,三个字母应该是雅马哈的缩写,这个框架听公司前辈说功能很强大,但实际上我看不懂.哈哈...... 其中整合了SSH框架,接下来我说下Struts的一些原理 其实这张图就 ...
- Java 内存区域与内存溢出
内存区域 Java 虚拟机在执行 Java 程序的过程中会把他所管理的内存划分为若干个不同的数据区域.Java 虚拟机规范将 JVM 所管理的内存分为以下几个运行时数据区:程序计数器.Java 虚拟机 ...
- Struts2框架深入详解版
一.认识Struts2 1. 什么是Web框架? 1.1 模型1 1.2 模型2 和MVC 1.3 Web框架的诞生 2. Struts1 到Struts2 2.1 其他 Web框架 2.2 ...
- SQL中varchar和nvarchar的区别
varchar(n)长度为 n 个字节的可变长度且非 Unicode 的字符数据.n 必须是一个介于 1 和 8,000 之间的数值.存储大小为输入数据的字节的实际长度,而不是 n 个字节. nvar ...
- 【容器云】传统金融企业的 Docker 实践
基于 Docker 的容器云-Padis 目前市面上基于容器云的产品有很多,对于平安而言,则是基于 Docker 的 Padis 平台.所谓 Padis,全称是 PingAn Distribution ...
- linux php编译安装
1.下载php安装包 http://cn2.php.net/get/php-5.5.36.tar.gz/from/this/mirror 默认情况下Nginx和PHP他俩之间是一点感觉没有的.Apac ...
- [Modern OpenGL系列(四)]在OpenGL中使用Shader
本文已同步发表在CSDN:http://blog.csdn.net/wenxin2011/article/details/51347440 在上一篇文章中已经介绍了OpenGL窗口的创建.本文接着说如 ...
- AngularJS 模块& 表单
模块定义了一个应用程序. 模块是应用程序中不同部分的容器. 模块是应用控制器的容器. 控制器通常属于一个模块. 应用("myApp") 带有控制器 ("myCtrl&qu ...
- mysql半同步(semi-sync)源码实现
mysql复制简单介绍了mysql semi-sync的出现的原因,并说明了semi-sync如何保证不丢数据.这篇文章主要侧重于semi-sync的实现,结合源码将semi-sync的实现过程展现给 ...