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)