jQuery中的事件监听小记
一,一个事件监听的简便写法
最近发现一个jQuery中事件监听的简洁写法,感觉方便好多。同时也深感自己基础薄弱,好多东西竟然都模棱两可。因此,记录的同时,也对jQuery事件监听做个小的总结
原文链接:http://blog.csdn.net/luyinchangdejiqing/article/details/52413368
//鼠标拖拽触发动画
$(".item-wrap").on({
mousedown: function(e) {
var el = $(this);
var os = el.offset();
dy1 = e.pageY - os.top;
},
mouseup: function(e) {
var el = $(this);
var os = el.offset();
dy2 = e.pageY - os.top;
//停止拖拽事件
$(document).off('mousemove.drag');
// 根据鼠标拖动的方向触发响应动画
var moveDistance=dy1-dy2;
if (moveDistance>0) {//鼠标向下拖动
direction = 'down';
downNum++;
if(downNum >= 5) {
downNum = 0;
}
} else{//鼠标向上拖动
direction = 'up';
upNum++;
if(upNum >= 5) {
upNum = 0;
}
};
sumDistance = 0;
scroll(direction);
}
});
总结一下就是,当同一个元素需要监听多个事件时,我们可以使用json对象的形式把所有事件和事件的处理函数一并传给on监听。我们回忆下最原始的写法是:
$('a').on('click',function(){
//code goes there
})
这里事件和事件的处理函数是一一对应的关系。如何把多个一一对应的东西联系在一起呢,很容易想到的就是json,它的每个键值对都是一一对应的。举个例子:
{
'name1':'value1',
'name2':'value2',
'name3':'value3'
}
把它用到刚刚的a标签的事件监听上:
$('a').on({
click: function() {alert('click')},
mouseover: function() {alert('mouseover')},
dbclick: function() {alert('dbclick')}
})
不知道以前用没用过,其实jQuery的css设置也可以这样使用:
$('a').css('color','red');
$('a').css({
'display':'inline-block',
'padding':'20px',
'background-color':'yellow'
});
二,jQuery事件监听总结
第一种,事件就是方法:直接可以在元素上使用具体的方法来绑定事件的回调,这种,是一一对应的,一次对应一个事件。
$("input").blur(function(){
$("input").css("background-color","#D6D6FF");
});
第二种,一次可以附加一个或者多个事件处理器。比如上文提到的on,除此之外还有bind。
其他目前还不清楚,等知道了再慢慢添加。
附:jQuery事件列表。
方法 | 描述 |
---|---|
bind() | 向匹配元素附加一个或更多事件处理器 |
blur() | 触发、或将函数绑定到指定元素的 blur 事件 |
change() | 触发、或将函数绑定到指定元素的 change 事件 |
click() | 触发、或将函数绑定到指定元素的 click 事件 |
dblclick() | 触发、或将函数绑定到指定元素的 double click 事件 |
delegate() | 向匹配元素的当前或未来的子元素附加一个或多个事件处理器 |
die() | 移除所有通过 live() 函数添加的事件处理程序。 |
error() | 触发、或将函数绑定到指定元素的 error 事件 |
event.isDefaultPrevented() | 返回 event 对象上是否调用了 event.preventDefault()。 |
event.pageX | 相对于文档左边缘的鼠标位置。 |
event.pageY | 相对于文档上边缘的鼠标位置。 |
event.preventDefault() | 阻止事件的默认动作。 |
event.result | 包含由被指定事件触发的事件处理器返回的最后一个值。 |
event.target | 触发该事件的 DOM 元素。 |
event.timeStamp | 该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数。 |
event.type | 描述事件的类型。 |
event.which | 指示按了哪个键或按钮。 |
focus() | 触发、或将函数绑定到指定元素的 focus 事件 |
keydown() | 触发、或将函数绑定到指定元素的 key down 事件 |
keypress() | 触发、或将函数绑定到指定元素的 key press 事件 |
keyup() | 触发、或将函数绑定到指定元素的 key up 事件 |
live() | 为当前或未来的匹配元素添加一个或多个事件处理器 |
load() | 触发、或将函数绑定到指定元素的 load 事件 |
mousedown() | 触发、或将函数绑定到指定元素的 mouse down 事件 |
mouseenter() | 触发、或将函数绑定到指定元素的 mouse enter 事件 |
mouseleave() | 触发、或将函数绑定到指定元素的 mouse leave 事件 |
mousemove() | 触发、或将函数绑定到指定元素的 mouse move 事件 |
mouseout() | 触发、或将函数绑定到指定元素的 mouse out 事件 |
mouseover() | 触发、或将函数绑定到指定元素的 mouse over 事件 |
mouseup() | 触发、或将函数绑定到指定元素的 mouse up 事件 |
one() | 向匹配元素添加事件处理器。每个元素只能触发一次该处理器。 |
ready() | 文档就绪事件(当 HTML 文档就绪可用时) |
resize() | 触发、或将函数绑定到指定元素的 resize 事件 |
scroll() | 触发、或将函数绑定到指定元素的 scroll 事件 |
select() | 触发、或将函数绑定到指定元素的 select 事件 |
submit() | 触发、或将函数绑定到指定元素的 submit 事件 |
toggle() | 绑定两个或多个事件处理器函数,当发生轮流的 click 事件时执行。 |
trigger() | 所有匹配元素的指定事件 |
triggerHandler() | 第一个被匹配元素的指定事件 |
unbind() | 从匹配元素移除一个被添加的事件处理器 |
undelegate() | 从匹配元素移除一个被添加的事件处理器,现在或将来 |
unload() | 触发、或将函数绑定到指定元素的 unload 事件 |
jQuery中的事件监听小记的更多相关文章
- jQuery中的事件监听方式及异同点
jQuery中的事件监听方式及异同点 作为全球最知名的js框架之一,jQuery的火热程度堪称无与伦比,简单易学的API再加丰富的插件,几乎是每个前端程序员的必修课.从读<锋利的jQuery&g ...
- Javascript事件模型系列(三)jQuery中的事件监听方式及异同点
作为全球最知名的js框架之一,jQuery的火热程度堪称无与伦比,简单易学的API再加丰富的插件,几乎是每个前端程序员的必修课.从读<锋利的jQuery>开始,到现在使用jQuery有一年 ...
- [No00006A]Js的addEventListener()及attachEvent()区别分析【js中的事件监听】
1.添加时间监听: Chrom中: addEventListener的使用方式: target.addEventListener(type, listener, useCapture); target ...
- Java中的事件监听机制
鼠标事件监听机制的三个方面: 1.事件源对象: 事件源对象就是能够产生动作的对象.在Java语言中所有的容器组件和元素组件都是事件监听中的事件源对象.Java中根据事件的动作来区分不同的事件源对象,动 ...
- 简单剖析Node中的事件监听机制(一)
使用js的class类简单的实现一个事件监听机制,不同于浏览器中的时间绑定与监听,类似于node中的时间监听,并且会在接下来的文章中去根据自己的理解去写一下Event模块中的原理. Node.js使用 ...
- Java 中的事件监听机制
看项目代码时遇到了好多事件监听机制相关的代码.现学习一下: java事件机制包含三个部分:事件.事件监听器.事件源. 1.事件:继承自java.util.EventObject类,开发人员自己定义. ...
- vue中的事件监听之——v-on vs .$on
跟着视频中老师的教学视频学vue的时候,看很多时候都用@(v-on)来监听子级emit的自定义事件,但在bus总线那块,又用.$on来监听bus自身emit的事件,v-on之间似乎相似但又不同,今天对 ...
- Spring中的事件监听实现
在spring中我们可以自定义事件,并且可以使用ApplicationContext类型对象(就是spring容器container)来发布这个事件 事件发布之后,所有的ApplicaitonList ...
- JavaScript中绑定事件监听函数的通用方法addEvent() 和 事件绑定之bindEvent()与 unBindEvent()函数
下面绑定事件的代码,进行了兼容性处理,能够被所有浏览器支持: function addEvent(obj,type,handle){ try{ // Chrome.FireFox.Opera.Safa ...
随机推荐
- 转)sqlite 数据类型
一般数据采用的固定的静态数据类型,而SQLite采用的是动态数据类型,会根据存入值自动判断.SQLite具有以下五种数据类型: 1.NULL:空值. 2.INTEGER:带符号的整型,具体取决有存入数 ...
- Vim编辑器的注释,解注,删除与恢复
1. 注释: 将光标移动到注释首部 命令模式下 Ctrl+V,进入列模式 上下移动,选中待注释内容 按大写I,进入插入模式 输入 // or # 按两次退出 2 解注 将光标移动到待解注首部 命令模式 ...
- web服务器学习4---httpd-2.4.29优化
实验环境: 环境:CentOS 7.4 软件版本:httpd-2.4.29 一.网页压缩 1.检查是否安装压缩模块 apachectl -D DUMP_MODULES | grep deflate 如 ...
- 201621123043 《Java程序设计》第6周学习总结
1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图或相关笔记,对面向对象思想进行一个总结. 注1:关键词与内容不求多,但概念之间的联系要清晰,内容覆盖面向对象的 ...
- Node.js系列文章:编写自己的命令行界面程序(CLI)
CLI的全称是Command-line Interface(命令行界面),即在命令行接受用户的键盘输入并作出响应和执行的程序. 在Node.js中,全局安装的包一般都具有命令行界面的功能,例如我们用于 ...
- 《javascript设计模式与开发实践》阅读笔记(13)—— 职责链模式
职责链模式 使多个对象都有机会处理请求,从而避免请求的发送者和接收者之间的耦合关系,将这些对象连成一条链,并沿着这条链传递该请求,直到有一个对象处理它为止. 书里的订单的例子 假设我们负责一个售卖手机 ...
- JAVA_SE基础——15.循环嵌套
嵌套循环是指在一个循环语句的循环体中再定义一个循环语句结构,while,do-while,for循环语句都可以进行嵌套,并且可以互相嵌套,下面来看下for循环中嵌套for循环的例子. 如下: publ ...
- MongoDb进阶实践之三 MongoDB查询命令详述
一.引言 上一篇文章我们已经介绍了MongoDB数据库的最基本操作,包括数据库的创建.使用和删除数据库,文档的操作也涉及到了文档的创建.删除.更新和查询,当然也包括集合的创建.重命 ...
- DDD实战进阶第一波(二):开发一般业务的大健康行业直销系统(搭建支持DDD的轻量级框架一)
要实现软件设计.软件开发在一个统一的思想.统一的节奏下进行,就应该有一个轻量级的框架对开发过程与代码编写做一定的约束. 虽然DDD是一个软件开发的方法,而不是具体的技术或框架,但拥有一个轻量级的框架仍 ...
- c# 字符串的内存分配和驻留池( 转 )
刚开始学习C#的时候,就听说CLR对于String类有一种特别的内存管理机制:有时候,明明声明了两个String类的对象,但是他们偏偏却指向同一个实例.如下: string s1 = "he ...