{"id":603,"date":"2008-10-17T21:10:33","date_gmt":"2008-10-17T13:10:33","guid":{"rendered":"http:\/\/fdream.net\/blog\/article\/603.aspx"},"modified":"2008-10-17T23:10:11","modified_gmt":"2008-10-17T15:10:11","slug":"Mootools+1.2%e6%95%99%e7%a8%8b(5)%e2%80%94%e2%80%94%e4%ba%8b%e4%bb%b6%e5%a4%84%e7%90%86","status":"publish","type":"post","link":"https:\/\/fdream.net\/blog\/article\/603","title":{"rendered":"Mootools 1.2\u6559\u7a0b(5)\u2014\u2014\u4e8b\u4ef6\u5904\u7406"},"content":{"rendered":"

\u539f\u6587\u5730\u5740\uff1a30 Days of Mootools 1.2 Tutorials – Day 5 – Event Handling<\/a><\/p>\n

MooTools 1.2\u4e2d\u7684\u4e8b\u4ef6\u5904\u7406<\/h2>\n

\u8bf7\u5c0a\u91cd\u4e2a\u4eba\u52b3\u52a8\uff0c\u8f6c\u8f7d\u8bf7\u6ce8\u660e\u51fa\u5904\uff1ahttp:\/\/fdream.net\uff0c\u8bd1\u8005\uff1aFdream<\/p>\n

\u5982\u679c\u4f60\u8fd8\u6ca1\u6709\u51c6\u5907\u597d\uff0c\u8bf7\u9605\u8bfb\u4ee5\u524d\u7684\u6559\u7a0b\uff0c\u8fd9\u91cc\u662f\u300aMooTools 1.2\u7cfb\u5217\u6559\u7a0b\u76ee\u5f55\u300b<\/a>\u3002<\/p>\n

\u4eca\u5929\u6211\u4eec\u5f00\u59cb\u7b2c\u4e94\u8bb2\uff0c\u5728\u4e0a\u4e00\u8bb2\uff08\u300aMootools 1.2\u6559\u7a0b(4)\u2014\u2014\u51fd\u6570\u300b<\/a>\uff09\u4e2d\uff0c\u6211\u4eec\u5b66\u4e60\u4e86\u5728MooTools 1.2\u4e2d\u5efa\u7acb\u548c\u4f7f\u7528\u51fd\u6570\u7684\u51e0\u79cd\u4e0d\u540c\u65b9\u5f0f\u3002\u4e0b\u4e00\u6b65\u5c31\u662f\u7406\u89e3\u4e8b\u4ef6\u4e86\u3002\u548c\u9009\u62e9\u5668\u7c7b\u4f3c\uff0c\u4e8b\u4ef6\u4e5f\u662f\u5efa\u7acb\u4e92\u52a8\u754c\u9762\u7684\u4e00\u4e2a\u91cd\u8981\u90e8\u5206\u3002\u4e00\u65e6\u4f60\u638c\u63e1\u4e86\u4e00\u4e2a\u5143\u7d20\uff0c\u4f60\u9700\u8981\u53bb\u51b3\u5b9a\u4ec0\u4e48\u884c\u4e3a\u6765\u89e6\u53d1\u4ec0\u4e48\u6548\u679c\u3002\u5148\u628a\u6548\u679c\u7559\u7740\u4ee5\u540e\u5728\u8bb2\uff0c\u6211\u4eec\u9996\u5148\u770b\u4e00\u770b\u4e2d\u95f4\u6b65\u9aa4\u548c\u4e00\u4e9b\u5e38\u89c1\u7684\u4e8b\u4ef6\u3002<\/p>\n

\u5de6\u952e\u5355\u51fb\u4e8b\u4ef6<\/h3>\n

\u5de6\u952e\u5355\u51fb\u4e8b\u4ef6\u662fweb\u5f00\u53d1\u4e2d\u6700\u5e38\u89c1\u7684\u4e8b\u4ef6\u3002\u8d85\u94fe\u63a5\u8bc6\u522b\u70b9\u51fb\u4e8b\u4ef6\uff0c\u7136\u540e\u628a\u4f60\u5e26\u5230\u53e6\u5916\u4e00\u4e2aURL\u5730\u5740\u3002MooTools\u80fd\u591f\u8bc6\u522b\u5176\u4ed6DOM\u5143\u7d20\u4e0a\u7684\u70b9\u51fb\u4e8b\u4ef6\uff0c\u5728\u8bbe\u8ba1\u548c\u529f\u80fd\u4e0a\u7ed9\u4e86\u4f60\u6781\u5927\u7684\u7075\u6d3b\u6027\u3002\u7ed9\u4e00\u4e2a\u5143\u7d20\u6dfb\u52a0\u4e00\u4e2a\u70b9\u51fb\u4e8b\u4ef6\u7684\u7b2c\u4e00\u6b65\uff1a<\/p>\n

\n\/\/ \u901a\u8fc7$('id_name') \u53d6\u5f97\u4e00\u4e2a\u5143\u7d20\n\/\/ \u7528.addEvent\u6dfb\u52a0\u4e8b\u4ef6\n\/\/ ('click')\u5b9a\u4e49\u4e86\u4e8b\u4ef6\u7684\u7c7b\u578b\n$('id_name').addEvent('click', function(){\n    \/\/ \u5728\u8fd9\u91cc\u6dfb\u52a0\u70b9\u51fb\u4e8b\u4ef6\u53d1\u751f\u65f6\u4f60\u8981\u6267\u884c\u7684\u4efb\u4f55\u4ee3\u7801\n    alert('this element now recognizes the click event');\n});\n<\/pre>\n<\/p>\n
\u4f60\u4e5f\u53ef\u4ee5\u628a\u8fd9\u4e2a\u51fd\u6570\u4ece.addEvent();\u72ec\u7acb\u51fa\u6765\u6765\u5b8c\u6210\u76f8\u540c\u7684\u4e8b\u60c5\uff1a<\/p>\n
\nvar clickFunction = function(){\n    \/\/ \u5728\u8fd9\u91cc\u6dfb\u52a0\u4e8b\u4ef6\u53d1\u751f\u65f6\u4f60\u8981\u6267\u884c\u7684\u4efb\u4f55\u4ee3\u7801\n    alert('this element now recognizes the click event');\n}\n \nwindow.addEvent('domready', function() {\n    $('id_name').addEvent('click', clickFunction);\n});\n<\/pre>\n<\/p>\n
\n<body>\n    <div id="id_name"> <! -- this element now recognizes the click event -->\n    <\/div>\n<\/body>\n<\/pre>\n<\/p>\n
\u6ce8\u610f<\/b>\uff1a\u548c\u8d85\u94fe\u63a5\u8bc6\u522b\u70b9\u51fb\u4e8b\u4ef6\u4e00\u6837\uff0cMooTools\u7684\u70b9\u51fb\u4e8b\u4ef6\u5b9e\u9645\u4e0a\u4e5f\u662f\u8bc6\u522b\u201cmouse up\u201d\uff0c\u610f\u5473\u7740\u5f53\u4f60\u9f20\u6807\u677e\u5f00\u662f\u53d1\u751f\uff0c\u800c\u4e0d\u662f\u9f20\u6807\u6309\u4e0b\u53bb\u7684\u65f6\u5019\u53d1\u751f\u3002\u8fd9\u5c31\u7ed9\u4e86\u7528\u6237\u4e00\u4e2a\u673a\u4f1a\u53bb\u6539\u53d8\u4ed6\u4eec\u7684\u4e3b\u610f\u2014\u2014\u53ea\u8981\u5728\u677e\u5f00\u4e4b\u524d\u628a\u9f20\u6807\u7684\u6307\u9488\u4ece\u70b9\u51fb\u7684\u5143\u7d20\u4e0a\u79fb\u5f00\u5c31\u53ef\u4ee5\u4e86\u3002<\/p>\n
\u9f20\u6807\u8fdb\u5165\u548c\u79bb\u5f00\u4e8b\u4ef6<\/h3>\n
\u5f53\u9f20\u6807\u505c\u7559\u5728\u4e00\u4e2a\u94fe\u63a5\u5143\u7d20\u4e0a\u65f6\uff0c\u8d85\u7ea7\u94fe\u63a5\u8fd8\u8bc6\u522b\u201chover\u201d\u4e8b\u4ef6\u3002\u901a\u8fc7MooTools\uff0c\u4f60\u53ef\u4ee5\u7ed9\u5176\u4ed6\u7684DOM\u5143\u7d20\u4e5f\u6dfb\u52a0\u4e00\u4e2a\u60ac\u505c\u4e8b\u4ef6\u3002\u901a\u8fc7\u628a\u8fd9\u4e2a\u4e8b\u4ef6\u5206\u4e3a\u9f20\u6807\u8fdb\u5165\u548c\u9f20\u6807\u79bb\u5f00\u4e8b\u4ef6\uff0c\u4f60\u53ef\u4ee5\u66f4\u52a0\u7075\u6d3b\u5730\u6839\u636e\u7528\u6237\u7684\u884c\u4e3a\u6765\u64cd\u63a7DOM\u3002<\/p>\n
\u548c\u4ee5\u524d\u4e00\u6837\uff0c\u6211\u4eec\u8981\u505a\u7684\u7b2c\u4e00\u4ef6\u4e8b\u5c31\u662f\u628a\u4e00\u4e2a\u4e8b\u4ef6\u9644\u52a0\u5230\u4e00\u4e2a\u5143\u7d20\uff1a<\/p>\n
\nvar mouseEnterFunction = function(){\n    \/\/ \u5728\u8fd9\u91cc\u6dfb\u52a0\u4e8b\u4ef6\u53d1\u751f\u65f6\u4f60\u8981\u6267\u884c\u7684\u4efb\u4f55\u4ee3\u7801\n    alert('this element now recognizes the mouse enter event');\n}\n \nwindow.addEvent('domready', function() {\n    $('id_name').addEvent('mouseenter', mouseEnterFunction);\n});\n<\/pre>\n<\/p>\n
\u9f20\u6807\u79bb\u5f00\u4e8b\u4ef6\u4e5f\u662f\u540c\u6837\u7684\uff0c\u8fd9\u4e2a\u4e8b\u4ef6\u5728\u9f20\u6807\u6307\u9488\u79bb\u5f00\u4e00\u4e2a\u5143\u7d20\u65f6\u53d1\u751f\u3002<\/p>\n
\nvar mouseLeaveFunction = function(){\n    \/\/ \u5728\u8fd9\u91cc\u6dfb\u52a0\u4e8b\u4ef6\u53d1\u751f\u65f6\u4f60\u8981\u6267\u884c\u7684\u4efb\u4f55\u4ee3\u7801\n    alert('this element now recognizes the mouse leave event');\n}\n \nwindow.addEvent('domready', function() {\n   $('id_name').addEvent('mouseleave', mouseLeaveFunction);\n});\n<\/pre>\n<\/p>\n
\u5220\u9664\u4e00\u4e2a\u4e8b\u4ef6<\/h3>\n
\u603b\u6709\u4e00\u4e9b\u65f6\u5019\uff0c\u4f60\u4e00\u65e6\u4e0d\u518d\u9700\u8981\u90a3\u4e9b\u4e8b\u4ef6\uff0c\u4e8e\u662f\u4f60\u9700\u8981\u4ece\u4e00\u4e2a\u5143\u7d20\u4e0a\u5220\u9664\u4e00\u4e2a\u4e8b\u4ef6\u3002\u5220\u9664\u4e00\u4e2a\u4e8b\u4ef6\u548c\u6dfb\u52a0\u4e00\u4e2a\u4e8b\u4ef6\u4e00\u6837\u5bb9\u6613\uff0c\u751a\u81f3\u8fde\u7ed3\u6784\u90fd\u662f\u7c7b\u4f3c\u7684\u3002<\/p>\n
\n\/\/ \u548c\u524d\u4e00\u4e2a\u793a\u4f8b\u4e00\u6837\n\/\/ \u53ea\u4e0d\u8fc7\u628a.addEvent\u6362\u6210\u4e86.removeEvent\n$('id_name').removeEvent('mouseleave', mouseLeaveFunction);\n<\/pre>\n<\/p>\n
textarea\u6216\u8005input\u4e2d\u7684\u6309\u952e\u4e8b\u4ef6<\/h3>\n
MooTools\u4e5f\u53ef\u4ee5\u8ba9\u4f60\u8bc6\u522b\u6587\u672c\u57df\uff08textarea\uff09\u548c\u6587\u672c\u6846\uff08input\uff09\u4e2d\u7684\u6309\u952e\u4e8b\u4ef6\u3002\u5176\u8bed\u6cd5\u548c\u6211\u4eec\u4e0a\u9762\u770b\u5230\u7684\u7c7b\u4f3c\uff1a<\/p>\n
\nvar function = keydownEventFunction () {\n    alert('This textarea can now recognize keystroke events');\n};\n \nwindow.addEvent('domready', function() {\n    $('myTextarea').addEvent('keydown', keydownEventFunction);\n});\n<\/pre>\n<\/p>\n
\u4e0a\u9762\u7684\u4ee3\u7801\u5c06\u4f1a\u8bc6\u522b\u4efb\u4f55\u6309\u952e\u3002\u8981\u9488\u5bf9\u4e00\u4e2a\u7279\u5b9a\u7684\u6309\u952e\uff0c\u6211\u4eec\u9700\u8981\u6dfb\u52a0\u4e00\u4e2a\u53c2\u6570\uff0c\u7136\u540e\u4f7f\u7528\u4e00\u4e2aif\u8bed\u53e5\uff1a<\/p>\n
\n\/\/ \u6ce8\u610f\u51fd\u6570\u62ec\u53f7\u4e2d\u7684\u201cevent\u201d\u53c2\u6570\nvar keyStrokeEvent = function(event){\n    \/\/ \u4e0b\u9762\u7684\u4ee3\u7801\u662f\u8bf4\uff1a\n    \/\/ \u5982\u679c\u6309\u4e0b\u7684\u952e\u4e3a\u201ck\u201d\uff0c\u5219\u505a\u4e0b\u9762\u7684\u4e8b\n    if (event.key == "k") {  \n\t    alert("This tutorial has been brought you by the letter k.") \n    };\n}\n \nwindow.addEvent('domready', function() {\n    $('myInput').addEvent('keydown', keyStrokeEvent);\n});\n<\/pre>\n<\/p>\n
\u5982\u679c\u9700\u8981\u5176\u4ed6\u7684\u63a7\u5236\uff0c\u6bd4\u5982\u201cshift\u201d\u952e\u548c\u201ccontrol\u201d\u89c1\uff0c\u8bed\u6cd5\u7565\u6709\u4e00\u70b9\u4e0d\u540c\uff1a<\/p>\n
\nvar keyStrokeEvent = function(event){\n    \/\/ \u4e0b\u9762\u4ee3\u7801\u662f\u8bf4\uff1a\n    \/\/ \u5982\u679c\u6309\u4e0b\u7684\u952e\u662f\u201cshift\u201d\uff0c\u5219\u505a\u4e0b\u9762\u7684\u4e8b\n    if (event.shift) { \n\t    alert("You pressed shift.") \n    };\n}\n \nwindow.addEvent('domready', function() {\n    $('myInput').addEvent('keydown', keyStrokeEvent);\n});\n<\/pre>\n<\/p>\n
\n<div id="body_wrap">\n    <input id="myInput" type="text" \/>\n<\/div>\n<\/pre>\n<\/p>\n
\u793a\u4f8b<\/h3>\n
\u8fd9\u91cc\u662f\u4e0a\u9762\u6211\u4eec\u5199\u8fc7\u7684\u4e00\u4e9b\u53ef\u4ee5\u6267\u884c\u7684\u4ee3\u7801\uff1a<\/p>\n
\u6ce8\u610f<\/b>\uff1a\u4f60\u53ef\u4ee5\u5728\u5355\u51fb\u793a\u4f8b\u4e0a\u9762\u8bd5\u4e00\u4e0b\uff0c\u4e0d\u8fc7\u4e0d\u662f\u5728\u4e0a\u9762\u677e\u5f00\u9f20\u6807\uff0c\u800c\u662f\u628a\u9f20\u6807\u4e00\u76f4\u6309\u7740\u4ece\u533a\u5757\u4e0a\u79bb\u5f00\uff0c\u7136\u540e\u518d\u677e\u5f00\u3002\u6ce8\u610f\u4e00\u4e0b\u5b83\u6ca1\u6709\u89e6\u53d1\u70b9\u51fb\u4e8b\u4ef6\u3002<\/p>\n
\nvar keyStrokeEvent = function(event){\n    \/\/ \u4e0b\u9762\u7684\u4ee3\u7801\u662f\u8bf4\uff1a\n    \/\/ \u5982\u679c\u6309\u4e0b\u7684\u952e\u4e3a\u201ck\u201d\uff0c\u5219\u505a\u4e0b\u9762\u7684\u4e8b\n    if (event.key == 'k') { \n        alert("This Mootorial was brought to you by the letter 'k.'")  \n    };\n}\n \nvar mouseLeaveFunction = function(){\n    \/\/ \u5728\u8fd9\u91cc\u6dfb\u52a0\u4e8b\u4ef6\u53d1\u751f\u65f6\u4f60\u8981\u6267\u884c\u7684\u4efb\u4f55\u4ee3\u7801\n    alert('this element now recognizes the mouse leave event');\n}\n \nvar mouseEnterFunction = function(){\n    \/\/ \u5728\u8fd9\u91cc\u6dfb\u52a0\u4e8b\u4ef6\u53d1\u751f\u65f6\u4f60\u8981\u6267\u884c\u7684\u4efb\u4f55\u4ee3\u7801\n    alert('this element now recognizes the mouse enter event');\n}\n \nvar clickFunction = function(){\n    \/\/ \u5728\u8fd9\u91cc\u6dfb\u52a0\u4e8b\u4ef6\u53d1\u751f\u65f6\u4f60\u8981\u6267\u884c\u7684\u4efb\u4f55\u4ee3\u7801\n    alert('this element now recognizes the click event');\n}\n \nwindow.addEvent('domready', function() {\n    $('click').addEvent('click', clickFunction);\n    $('enter').addEvent('mouseenter', mouseEnterFunction);\n    $('leave').addEvent('mouseleave', mouseLeaveFunction);\n    $('keyevent').addEvent('keydown', keyStrokeEvent);\n});\n<\/pre>\n<\/p>\n
\n<div id="click" class="block">\u5de6\u952e\u5355\u51fb\uff08Click\uff09<\/div><br \/>\n<div id="enter" class="block">\u9f20\u6807\u8fdb\u5165\uff08Mouse Enter\uff09<\/div><br \/>\n<div id="leave" class="block">\u9f20\u6807\u79bb\u5f00\uff08Mouse Leave\uff09<\/div><br \/>\n<input id="keyevent" type="text" value="\u8bf7\u8f93\u5165\u5b57\u7b26'k'" \/>\n<\/pre>\n<\/p>\n
\n