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