addEvent(type,fn):为DOM元素增加一个事件监听器

removeEvent(type,fn):移除先前为DOM元素添加的事件监听器

eg:

var destroy = function(){ alert('Boom: ' + this.id); } // this refers to the Element.
$('myElement').addEvent('click', destroy); //later...
$('myElement').removeEvent('click', destroy);

addEvents(events):一次为一个DOM元素添加多个事件监听器

eg:

$('myElement').addEvents({
mouseover: function(){
alert('mouseover');
},
click: function(){
alert('click');
}
});

removeEvents(events):移除DOM元素上某个类型的事件的所有监听器

var myElement = $('myElement');
myElement.addEvents({
mouseover: function(){
alert('mouseover');
},
click: function(){
alert('click');
}
}); myElement.addEvent('click', function(){ alert('clicked again'); });
myElement.addEvent('click', function(){ alert('clicked and again :('); });
//addEvent will keep appending each function.
//Unfortunately for the visitor, there will be three alerts they'll have to click on.
myElement.removeEvents('click'); // saves the visitor's finger by removing every click event.

fireEvent(type[,param,delay]):执行一个DOM元素上某个类型的事件的所有监听器,多用于需要在特定的时间或者场合下触发事件时

eg1:

function test(a) {
console.log(a);
}
$("btn1").addEvent('click', test);
$("btn1").addEvent('click', function() {
console.log('btn1 click event run')
}); $("btn1").fireEvent("click", "hello,world");

这个例子中代码将在页面一加载完就执行,而不需要等到click btn1时才执行。下面这个例子将更好的说明fireEvent的使用场合:

textarea.addEvents({
focus: function() {
// When focusing, if the textarea contains value "Type here", we
// simply clear it.
if (textarea.value.contains('Type here')) textarea.set('value', '');
}, keyup: function() {
// When user keyups we check if there are any of the magic words.
// If yes, we fire our custom event burn with a different text for each one.
if (textarea.value.contains('hello')) textarea.fireEvent('burn', 'hello world!');
else if (textarea.value.contains('moo')) textarea.fireEvent('burn', 'mootools!');
else if (textarea.value.contains('pizza')) textarea.fireEvent('burn', 'Italy!');
else if (textarea.value.contains('burn')) textarea.fireEvent('burn', 'fireEvent');
// note that in case of 'delayed', we are firing the event 1 second late.
else if (textarea.value.contains('delayed')) textarea.fireEvent('burn', "I'm a bit late!", 1000);
},
burn: function(text) {
// When the textarea contains one of the magic words
// we reset textarea value and set the log with text
textarea.set('value', '');
log.set('html', text);
// then we start the highlight morphing
highlight.start({
backgroundColor: ['#fff36f', '#fff'],
opacity: [1, 0]
});
}
});

注意标红部分。

结合这两个例子,想必fireEvent的用法已经很清楚了。

cloneEvent(from[,type]):从一个DOM元素上复制所有监听器到本元素:

eg:

function test(a) {
console.log(a);
}
$("btn1").addEvent('click', test);
$("btn1").addEvent('click', function() {
console.log('btn1 click event run')
});
$("btn1").fireEvent("click", 123);
$("btn2").cloneEvents($("btn1"));

将btn1上绑定的事件复制给btn2

Element.Event的更多相关文章

  1. DOJO 八 event dojo/on

    官网教程:Events with Dojo在元素上绑定events,需要引用包dojo/on,通过on方法来实现. <button id="myButton">Clic ...

  2. zepto源码学习-04 event

    之前说完$(XXX),然后还有很多零零碎碎的东西需要去分析,结果一看代码,发现zepto的实现都相对简单,没有太多可分析的.直接略过了一些实现,直接研究Event模块,相比JQuery的事件系统,ze ...

  3. Html5 touch event

    HTML5 for the Mobile Web: Touch Events POSTED BY RUADHAN - 15 AUG 2013 See also... Touch-friendly Dr ...

  4. Zepto源码分析-event模块

    源码注释 // Zepto.js // (c) 2010-2015 Thomas Fuchs // Zepto.js may be freely distributed under the MIT l ...

  5. 读Zepto源码之Event模块

    Event 模块是 Zepto 必备的模块之一,由于对 Event Api 不太熟,Event 对象也比较复杂,所以乍一看 Event 模块的源码,有点懵,细看下去,其实也不太复杂. 读Zepto源码 ...

  6. 一个普通的 Zepto 源码分析(三) - event 模块

    一个普通的 Zepto 源码分析(三) - event 模块 普通的路人,普通地瞧.分析时使用的是目前最新 1.2.0 版本. Zepto 可以由许多模块组成,默认包含的模块有 zepto 核心模块, ...

  7. JavaScript Interview Questions: Event Delegation and This

    David Posin helps you land that next programming position by understanding important JavaScript fund ...

  8. zepto源码分析·event模块

    准备知识 事件的本质就是发布/订阅模式,dom事件也不例外:先简单说明下发布/订阅模式,dom事件api和兼容性 发布/订阅模式 所谓发布/订阅模式,用一个形象的比喻就是买房的人订阅楼房消息,售楼处发 ...

  9. Event Binding in Angular

    https://www.pluralsight.com/guides/angular-event-binding Introduction In this guide, we will explore ...

随机推荐

  1. POJ 2479 不相交最大子段和

    题目意思还是很好理解的,在一个数列中,找出不相交的两个子串使得其和最大. 解题思路: 对于每个i来说,求出[0 ~ i - 1] 的最大子段和以及[i ~ n - 1]的最大子段和,在加起来,求最大的 ...

  2. int_float_double数据类型的存储格式。

    一段用来检测编辑器存储方式的程序 //date : 2013/8/16 //designer :pengxiaoen //function check the C programmable langu ...

  3. ASP.NET MVC进阶之路:深入理解Controller激活机制并使用Ioc容器创建对象

    本文标题说是"深入理解Controller"其实有点“标题党”的味道了.本篇只会探讨"Controller"的激活机制,也就是如何创建Controller的并调 ...

  4. 整数运算:CPU内部只有加法运算

    学汇编的一边儿去.我这里讲的是CPU进行计算的原理.首先我这里用MC的红石电路模拟了一个加法器:http://www.0xaa55.com/thread-313-1-1.htm首先加法器是怎么实现的呢 ...

  5. Flask web开发 处理Session

    本文我们在上篇文章<Flask web开发  处理POST请求(登录案例)>的基础上,来讲述Flask对session的支持. 在上面案例上,我们需要修改和新增如下功能 1.登录成功后的 ...

  6. 0-1背包的动态规划算法,部分背包的贪心算法和DP算法------算法导论

    一.问题描述 0-1背包问题,部分背包问题.分别实现0-1背包的DP算法,部分背包的贪心算法和DP算法. 二.算法原理 (1)0-1背包的DP算法 0-1背包问题:有n件物品和一个容量为W的背包.第i ...

  7. 放开chrome,微度新标签页 删除

    来自VIc_:http://blog.csdn.net/Vic___ 本人只是提供方法建议,没有任何商业欲望. 欢迎转载 有一天,突然,我的标签栏,被改变了,这是怎么了,我的书签栏 我是一个镇定的人, ...

  8. CentOS 如何安装git server + Gitolite 【配置不成功需要再测试2015-8-20】

    安装git 关于安装git  可以参考 http://gitolite.com/gitolite/install.html 里面有官方的介绍 1. Git 的工作需要调用 curl,zlib,open ...

  9. SuperSocket源码解析之会话生命周期

    一 基本概念 会话(Session)是客户端与服务器进行通信的基本单元,也是一个Socket的封装,在http协议中也有Session机制,其主要作用封装一个通信单元socket,负责服务器与客户端消 ...

  10. Qt学习之路(24): QPainter(改写paintEvent)

    多些大家对我的支持啊!有朋友也提出,前面的几节有关event的教程缺少例子.因为event比较难做例子,也就没有去写,只是把大概写了一下.今天带来的是新的部分,有关Qt的2D绘图.这部分不像前面的内容 ...