|
ootools对元素提供了addEvent，removeEvent,addEvents,removeEvents,cloneEvents等方 法，用于（批量） 添加或（批量）移除，以及clone事件等。下面代码为相应方法的使用示例： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www./1999/xhtml" > <head> <title>event</title> <script type="text/javascript" src="js/mootools-1.2-core.js"></script> <script type="text/javascript" src="js/mootools-1.2-more.js"></script> </head> <body> <input id="myText" type="text" size="10" /> <br /> <input id="myText2" type="text" size="10" /> <br /> <input id="myText3" type="text" size="10" /> <br /> <input id="myText4" type="text" size="10"/> <br /> <div id="myDiv" style="background:aliceblue;width:100px;height:100px">鼠标进入区域</div> </body> </html> <script type="text/javascript"> /* Event: 兼容各浏览器的事件管理 参数: event 浏览器的event对象 属性: shift 如果按了键盘的shift键，则返回true control 如果按了键盘的ctrl键，则返回true alt 如果按了键盘的alt键，则返回true meta 如果按了键盘的meta键，则返回true wheel 鼠标滚轮的滚动量 code 按下的键盘的键代码 page.x 相对于整个浏览器的鼠标x位置 page.y 相对于整个浏览器的鼠标y位置 client.x 相对于可视区域的鼠标x位置 client.y 相对于可视区域的鼠标y位置 key 按下的键盘的键的名称。 如 ‘enter’, ‘up’, ‘down’, ‘left’, ‘right’, ‘space’, ‘backspace’, ‘delete’, ‘esc’. target 事件的target relatedTarget 事件的参照target（即前一个事件的target） */ $('myText').onkeydown = function(event){ var event = new Event(event); //alert(event.key); //alert(event.shift); if (event.key == 's' && event.control) { alert('documentsaved'); } }; /***************************************事件的添加和移 除*************************************************/ function eventOp() { var destroy = function(){ alert('Boom: ' + this.id); } // this refers to the Element. $('myText2').addEvent('click', destroy); //添加并移除事件 $('myText4').addEvent('click', destroy); //移除先前为DOM元素添加的事件监听器 $('myText4').removeEvent('click', destroy); //bind方法的使用 //When the function is added using Function:bind or Function:pass, etc, a new reference is created. //For removeEvent to work, you must pass a reference to the exact function to be removed. //This method is also attached to Document and Window. var boundDestroy = destroy.bind($('anotherElement')); $('myText4').addEvent('click', boundDestroy); // 之后 $('myText4').removeEvent('click', destroy); // 这不会移除事件. $('myText4').removeEvent('click', destroy.bind($('anotherElement'))); // 这也不会移除event. $('myText4').removeEvent('click', boundDestroy); // 这是移除event 的正确方式.< /span> //addEvents批量添加事件的方法 $('myText4').addEvents({ 'mouseover': function(){ alert('mouseover'); }, 'click': function(){ alert('click'); } }); $('myText4').addEvent('click', function(){ alert('clicked again'); }); $('myText4').addEvent('click', function(){ alert('clicked and again :('); }); //addEvent will keep appending each function. //Unfortunately for the visitor, that'll be three alerts they'll have to click on. //批量删除事件 $('myText4').removeEvents('click'); // This saves the visitor's finger by removing every click event. $('myText4').removeEvents('mouseover'); $('myText4').fireEvent('click', $('anElement'), 1000); //事件Clone var myElement = $('myElement'); var myClone = myElement.clone().cloneEvents(myElement); //clones 元素及它的所有事件 } eventOp(); function myFunction(event){ alert(event.client.x); }; /* bindWithEvent 自动会向目标function中传入一个mootools的Event类实例 参数: bind 可选，该对象中this所要引用的对象 args 可选，要传递入的参数;如果参数数量大于一个，需要使用数组 */ $('myText3').addEvent('click', myFunction.bindWithEvent($('myText3'))); function showPosition(event){ $('myDiv').innerHTML = 'X:' + event.client.x + ' Y:' + event.client.y; }; //mouseenter 鼠标进入DOM元素的区域后触发。不会在经过子元素的时候触发(不像 mouseover)。 $('myDiv').addEvent('mouseenter', showPosition); //mouseleave 鼠标离开DOM元素的区域后触发。不会在经过子元素的时候触发(不像 mouseout)。 $('myDiv').addEvent('mouseleave', showPosition); $('myDiv').addEvent('mousemove', showPosition); $('myDiv').addEvent('mousewheel', showPosition); </script>
|
|
|
来自： 寂寞如故 > 《mootools》
