Element.Event
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的更多相关文章
- DOJO 八 event dojo/on
官网教程:Events with Dojo在元素上绑定events,需要引用包dojo/on,通过on方法来实现. <button id="myButton">Clic ...
- zepto源码学习-04 event
之前说完$(XXX),然后还有很多零零碎碎的东西需要去分析,结果一看代码,发现zepto的实现都相对简单,没有太多可分析的.直接略过了一些实现,直接研究Event模块,相比JQuery的事件系统,ze ...
- Html5 touch event
HTML5 for the Mobile Web: Touch Events POSTED BY RUADHAN - 15 AUG 2013 See also... Touch-friendly Dr ...
- Zepto源码分析-event模块
源码注释 // Zepto.js // (c) 2010-2015 Thomas Fuchs // Zepto.js may be freely distributed under the MIT l ...
- 读Zepto源码之Event模块
Event 模块是 Zepto 必备的模块之一,由于对 Event Api 不太熟,Event 对象也比较复杂,所以乍一看 Event 模块的源码,有点懵,细看下去,其实也不太复杂. 读Zepto源码 ...
- 一个普通的 Zepto 源码分析(三) - event 模块
一个普通的 Zepto 源码分析(三) - event 模块 普通的路人,普通地瞧.分析时使用的是目前最新 1.2.0 版本. Zepto 可以由许多模块组成,默认包含的模块有 zepto 核心模块, ...
- JavaScript Interview Questions: Event Delegation and This
David Posin helps you land that next programming position by understanding important JavaScript fund ...
- zepto源码分析·event模块
准备知识 事件的本质就是发布/订阅模式,dom事件也不例外:先简单说明下发布/订阅模式,dom事件api和兼容性 发布/订阅模式 所谓发布/订阅模式,用一个形象的比喻就是买房的人订阅楼房消息,售楼处发 ...
- Event Binding in Angular
https://www.pluralsight.com/guides/angular-event-binding Introduction In this guide, we will explore ...
随机推荐
- c#语法与c++ 及 java语法的对比分析
早期开发的时候一直用c/c++,后来主要用的是java.最近需要用下c#. 熟悉了下c#,发现c#语言在对c/c++基础上做了很多简化,同时参考了很多java的语法习惯,本来在语法上c/c++就有很多 ...
- 基于visual Studio2013解决C语言竞赛题之0607strcpy
题目
- secureCRT登录不上ubuntu,Connection closed
secureCRT登录不上ubuntu 1.第一个原因是sshd服务没开,或者防火墙没关.装好sshd并打开就好. http://www.cnblogs.com/mylinux/p/5101956.h ...
- 字符串处理-AC自动机
估计在OJ上刷过题的都会对AC自动机这个名词很感兴趣,同样,记得去年ACM暑期集训的时候,在最后讲到字符串部分,听说了这个算法的名字之后就对于它心向往之,AC正好是Accept的简称,字面意义上的理解 ...
- 我的Python成长之路---第一天---Python基础(作业2:三级菜单)---2015年12月26日(雾霾)
作业二:三级菜单 三级菜单 可一次进入各个子菜单 思路: 这个题看似不难,难点在于三层循环的嵌套,我的思路就是通过flag的真假来控制每一层的循环的,简单来说就是就是通过给每一层循环一个单独的布尔变量 ...
- java--多线程之Runnable
引读: 上一篇博文中讲了Thread的继承,存在一个问题就是,如果类本身已经继承了某个父类,又要继承Thread,导致多重继承. [但是我们知道接口是实现多重继承的重要方式].java提供了Runna ...
- 仿OpenStack开发云计算管理软件
仿OpenStack开发云计算管理软件 使用Python语言开发一套类似OpenStack的云计算管理平台LouCloud,具备基本的用户,服务器,镜像与 虚拟机管理功能,学习IaaS,虚拟化,Lib ...
- 蛋疼的Apple IOS Push通知协议
简单介绍 Apple Push通知机制事实上非常easy,就是Apple的APNsserver做为中间人,把消息推送到相应的设备上. 一张来自Apple文档的图: 当然,示意图看起来简单,可是另一些实 ...
- Swift - 使用UI Dynamics给UIKit组件添加移动吸附行为
UI Dynamics是UIKit的一个新组成部分,它向iOS中的视图提供了与物理学有关的功能和动画.可以让你向视图中引入力和物理属性,可以让你的视图弹跳,舞动,受重力影响等等. 下面通过样例,演示使 ...
- D16Pascal的编译器和IDE
https://github.com/Memnarch/D16Pascal https://github.com/Memnarch/D16IDE https://github.com/Memnarch ...