MooTools
a compact javascript framework
MooTools Core v1.4.5
Core
Browser
Slick
Type: DOMEvent
MooTools的DOMEvent方法。DOMEvent Method: constructor
语法:
new DOMEvent([event[, win]]);
参数:
- event - (event, required)HTMLEvent对象。
- 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.');
});
<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.');
});
copyright ©2006-2014 Valerio Proietti , translate by Jobin Sun