Element.Event

最新推荐文章于 2021-10-24 22:37:21 发布

原创最新推荐文章于 2021-10-24 22:37:21 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#fireEvent #element.Event

mootools 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了如何使用JavaScript操作DOM事件，包括添加、移除及触发事件的方法。通过具体实例展示了addEvent、removeEvent、addEvents、removeEvents、fireEvent及cloneEvent等函数的使用方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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