Element/Event

Type: Element

自定义类型，它的方法允许所有的Element,window,document对象使用。

注意事项:

• IE浏览器随机触发元素事件,如果它们没有被fireEvent触发。

Element Method: addEvent

对元素设置一个侦听器.

语法:

myElement.addEvent(type, fn);

参数:

1. type - (string) 事件名,没有'on'。
2. fn - (function) 事件函数。

返回:

• (element)当前元素。

示例:

HTML

<div id="myElement">Click me.</div>

JavaScript

$('myElement').addEvent('click', function(){
    alert('clicked!');
});

注意事项:

• 这种方法也可用到Document和Window对象上。

Element Method: removeEvent

删除一个事件侦听器。

语法:

myElement.removeEvent(type, fn);

参数:

1. type - (string) 事件名称。
2. fn - (function) 删除的函数。

返回:

• (element)当前元素。

示例:

标准用法:

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

绑定的例子:

var destroy = function(){ alert('Boom: ' + this.id); }
var boundDestroy = destroy.bind($('anotherElement'));
$('myElement').addEvent('click', boundDestroy);
 
//later...
$('myElement').removeEvent('click', destroy); // this won't remove the event.
$('myElement').removeEvent('click', destroy.bind($('anotherElement')); // this won't remove the event either.
$('myElement').removeEvent('click', boundDestroy); // the correct way to remove the event.

注意事项:

• 当一个函数增加被Function:bind或Function:pass等,一个新的引用将被创建,为了使removeEvent工作,你必须传入一个更准确的引用。
• 这种方法也被用到Docuemnt和Windows对象上。

Element Method: addEvents

增加多个事件侦听.

语法:

myElement.addEvents(events);

参数:

1. events - (object) 包含多个事件的对象(对象的key为事件名,value为事件函数)。

返回:

• (element)当前元素。

示例:

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

注意事项:

• 这种方法也可被用到Document和Window对象上。

Element Method: removeEvents

删除多个事件,如果没有参数传入,将删除所有事件.

语法:

myElements.removeEvents([events]);

参数:

1. events - (optional) 如果没有传入参数,则删除所有事件。
   • (string) 事件名如'click'。
   • (object) 与事件对应的事件函数。

返回:

• (element)当前元素。

示例:

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.

注意事项:

• 这种方法也被用于Document和Window对象。

Element Method: fireEvent

执行一个或多个事件.

语法:

myElement.fireEvent(type[, args[, delay]]);

参数:

1. type - (string) 事件名称(例如"click" )
2. args - (mixed, optional) 事件函数的参数,数组或单个对象，如果超过一个参数,必须是一个数组。
3. delay - (number, optional) 延迟(ms)执行时间。

返回:

• (element)当前元素。

示例:

// fires all the added 'click' events and passes the Element 'anElement' after one second
$('myElement').fireEvent('click', $('anElement'), 1000);

注意事项:

• 不能触发行内事件如:onmousedown,onclick等 。
• 这种方法也可用于Document和Window对象。

Element Method: cloneEvents

克隆事件从另一个事件到当前元素.

语法:

myElement.cloneEvents(from[, type]);

参数:

1. from - (element) 复制所有事件从这个元素。
2. type - (string, optional) 复制指定事件,如果为null则复制所有。

返回:

• (element)当前元素。

示例:

var myElement = $('myElement');
var myClone = myElement.clone().cloneEvents(myElement); // clones the element and its events

注意事项:

• 这种方法也可用于Document和Window对象。

Object: Element.Events

可以通过增加Element.Events对象属性添加自定义事件.

参数:

Element.Events.yourProperty(对象)可以是

1. base - (string, optional) 基础事件。如果设置了condition参数,此参数是必须的。
2. condition - (function, optional) 自定义触发条件.
3. onAdd - (function, optional) 当事件被添加时执行。
4. onRemove - (function, optional) 当事件移除时执行。

示例:

Element.Events.shiftclick = {
    base: 'click', // the base event type
    condition: function(event){ //a function to perform additional checks
        return (event.shift == true); // this means the event is free to fire
    }
};
 
$('myInput').addEvent('shiftclick', function(event){
    log('the user clicked the left mouse button while holding the shift key');
});

Built-in Custom Events

Event: mouseenter

当鼠标进入元素区域时被触发,如果鼠标再次进入元素的子元素,事件将不会再次触发(不像mouseover).

示例:

$('myElement').addEvent('mouseenter', myFunction);

Event: mouseleave

当鼠标离开元素区域时被触发,如果鼠标跨越子元素时,事件将不会被触发(不像mouseout).

示例:

$('myElement').addEvent('mouseleave', myFunction);

Event: mousewheel

当鼠标滚轮旋转时触发这个事件;

示例:

$('myElement').addEvent('mousewheel', myFunction);

注意事项:

• mouseenter和mouseleave事件被IE浏览器原生支持，其它浏览器将使用MooTools自定义的。

Object: Element.NativeEvents

这个对象包含所以事件类型名为键名,值可能是0,1,2.
这是一个对象，所有已知的DOM事件类型，如点击，鼠标悬停，负载等每个事件都有一个值，可能的值是0 (未定义，为null ) ，1和2 。

为0时:

默认情况下它是undefined。在这种情况下，你可以添加事件，但你应该手动触发他们。

例如:

element.addEvent('pizza', fn);
element.fireEvent('pizza', 'yum!');

为1时:

这种情况,事件被绑定到元素上用element.addEventListener或element.attachEvent(IE),你仍然能用element.fireEvent('load')手动触发.

为2时:

第后一种情况和第二种情况相似,但这种情况事件包含数据(如click).

添加一个不支持的对象:

Element.NativeEvents.popstate = 2;
// Now element.addEvent('popstate', fn); will work everywhere