Event

Type: DOMEvent

MooTools的DOMEvent方法。

DOMEvent Method: constructor

语法:

new DOMEvent([event[, win]]);

参数:

1. event - (event, required)HTMLEvent对象。
2. win - (window, optional: defaults to window)事件的上下文。

属性:

• page.x - (number)的鼠标的x位置，相对于全窗口。
• page.y - (number)鼠标的y位置，相对于整个窗口。
• client.x - (number)鼠标的x位置，相对于可视区域。
• client.y - (number)鼠标的y位置，相对于可视区域。
• rightClick - (boolean) True如果用户点击了鼠标右键.
• wheel - (number)鼠标中轮滚动。
• relatedTarget - (element)触发本事件的元素。
• target - (element)事件绑定的元素。
• code - (number)被按下的键的键码。
• key - (string)被按下的键的名字。键可以是'enter', 'up', 'down', 'left', 'right', 'space', 'backspace', 'delete', 'esc' 。
• shift - (boolean) True如果用户按下shift键。
• control - (boolean) True如果用户按下控制键。
• alt - (boolean) True如果用户按下alt键。
• meta - (boolean) True如果用户按下了Meta键。

示例:

$('myLink').addEvent('keydown', function(event){
    // the passed event parameter is already an instance of the Event type.
    alert(event.key);   // returns the lowercase letter pressed.
    alert(event.shift); // returns true if the key pressed is shift.
    if (event.key == 's' && event.control) alert('Document saved.'); //executes if the user presses Ctr+S.
});

DOMEvent Method: stop

停止事件的传播，执行preventDefault 。

语法:

myEvent.stop();

返回:

• (object)原DOMEvent实例。

示例:

HTML :

<a id="myAnchor" href="http://google.com/">Visit Google.com</a>

JavaScript

$('myAnchor').addEvent('click', function(event){
    event.stop(); //Prevents the browser from following the link.
    this.set('text', 'Where do you think you\'re going?'); //'this' is Element that fires the Event.
    (function(){
        this.set('text', 'Instead visit the Blog.').set('href', 'http://blog.mootools.net');
    }).delay(500, this);
});

注意事项:

• 返回false也可以阻止事件的传播。

DOMEvent Method: stopPropagation

跨浏览器的方法来阻止事件的传播(这将停止事件向上冒泡) 。

语法:

myEvent.stopPropagation();

返回:

• (object)原DOMEvent对象。

示例:

"＃myChild"与"myElement"覆盖不相同的面积。因此'click'父/子元素依赖点击的位置:

HTML:

<div id="myElement">
    <div id="myChild"></div>
</div>

JavaScript:

$('myElement').addEvent('click', function(){
    alert('click');
    return false; //equivalent to stopPropagation.
});
$('myChild').addEvent('click', function(event){
    event.stopPropagation(); //prevents the event from bubbling up, and fires the parent's click event.
});

DOMEvent Method: preventDefault

跨浏览器阻止浏览器的默认行为.

语法:

myEvent.preventDefault();

返回:

• (object)原DOMEvent对象。

示例:

<form>
    <input id="myCheckbox" type="checkbox" />
</form>

JavaScript

$('myCheckbox').addEvent('click', function(event){
    event.preventDefault(); //prevents the checkbox from being "checked".
});

Function: DOMEvent.defineKey

此函数允许添加额外的事件识别码。

例如:

DOMEvent.defineKey(16, 'shift');
$('myInput').addEvent('keydown', function(event){
    if (event.key == 'shift') alert('You pressed shift.');
});

预定义项:

• enter
• up
• down
• left
• right
• esc
• space
• backspace
• tab
• delete

Function: DOMEvent.defineKeys

此函数允许添加多个额外的事件识别码。

例如:

DOMEvent.defineKeys({
    '16': 'shift',
    '17': 'control'
});
$('myInput').addEvent('keydown', function(event){
    if (event.key == 'control') alert('You pressed control.');
});