\u8981\u9054\u5230 unobtrusive JavaScript (\u6700\u65b0\u8b6f\u540d: \u4e0d\u4e82\u5165JavaScript) \u7684\u5883\u754c\uff0c\u5c31\u5fc5\u9808\u5c0d Event-Driven \u6709\u6df1\u5165\u7684\u8a8d\u8b58\uff0c\u9019\u7ae0\u5c0d Events \u8b70\u984c\u505a\u4e86\u5f88\u8a73\u76e1\u7684\u89e3\u8aaa\uff0c\u524d\u4e00\u9663\u5b50\u770bYUI Event\u7684\u6642\u5019\uff0c\u88e1\u9762\u63d0\u5230\u7684\u5169\u500bIE fix\u90fd\u4e0d\u592a\u4e86\u89e3\u7de3\u7531\uff0c\u770b\u904e\u9019\u7ae0\u4e4b\u5f8c\u5c31\u604d\u7136\u5927\u609f\u5566\u3002<\/p>\n
\u76f8\u5c0d\u65bc W3C DOM \u8ddf XMLHttpRequest\uff0cEvents\u6709\u66f4\u591a\u7684 Browser Wars \u7559\u4e0b\u4f86\u7684\u554f\u984c\uff0c\u6709\u8457 Microsoft \u84c4\u610f\u7684\u4e0d\u76f8\u5bb9\u554f\u984c\uff0c\u4f60\u5fc5\u9808\u6ce8\u610f\u9019\u4e9b\u5be6\u505a\u5dee\u7570\uff0c\u6709\u4e9b\u89e3\u6cd5\u751a\u81f3\u6709\u4e9b tricky\uff0c\u800c\u4e14\u5fc5\u9808 case by case\uff0c\u6c92\u6709\u6cdb\u7528\u578b\u7684\u5075\u6e2c\u6cd5\u5247\uff0c\u4f8b\u5982\u6c92\u6709\u7c21\u55ae\u7684 if (W3C model)\u00a0{.. } else if (\u00a0Microsoft model ) { … } \u53ef\u4ee5\u7528\u3002<\/p>\n
Events \u53ef\u5206\u6210\u4e09\u7a2e\u985e\u578b 1. \u6ed1\u9f20\u4e8b\u4ef6 mouse 2. \u9375\u76e4\u4e8b\u4ef6 keyboard 3. \u754c\u9762\u4e8b\u4ef6 interface events (\u4f8b\u5982 form submit,readystatechange\u7b49)<\/p>\n
click\u662f\u552f\u4e00\u81ea\u52d5\u6709 accessible \u7684mouse event\uff0c\u56e0\u70ba\u7576\u9375\u76e4 focus \u4e14\u6309 Enter \u6642\u4e5f\u6703\u89f8\u767c\u3002\u800c\u5176\u5b83mouse events\u5fc5\u9808\u624b\u52d5\u518d\u52a0\u5c0d\u61c9\u7684keyboard events\uff0c\u4f8b\u5982 mouseover \u7b49\u540c\u65bc focus\uff0cmouseout\u7b49\u65bcblurred\uff0c\u4f46\u6709\u4e9b\u5c0d\u61c9\u5c31\u96e3\u4e86\uff0c\u4f8b\u5982 mousemove (\u6ed1\u9f20\u79fb\u52d5\u4e00\u500b1px\u5c31\u89f8\u767c\u4e00\u500b\u4e8b\u4ef6\uff0c\u4f46\u8981\u5c0d\u61c9\u9375\u76e4\u5c31\u4e0d\u884c\u4e86)\u3002\u56e0\u6b64\u5728 DOM Scripting \u9019\u672c\u66f8\u4e5f\u5efa\u8b70(p.111)\uff0c\u8a2d\u4e86 onclick \u7684\u5c31\u4e0d\u8981\u8a2d\u5b9a onkeypress event\u4e86\uff0c\u56e0\u70ba click \u9664\u4e86\u6ed1\u9f20\uff0c\u9375\u76e4\u4e5f\u6703\u6709\u4f5c\u7528\uff0c\u591a\u8a2d onkeypress \u53cd\u800c\u53ef\u80fd\u6703\u6709\u65b0\u9ebb\u7169\u3002<\/p>\n
\u53e6\u5916\u4e00\u500b keyboard \u7684 accessability \u91cd\u9ede\u662f\uff0c\u53ef\u4ee5\u88ab keyboard focus \u7684\u5143\u7d20\u53ea\u6709 links,form fields,buttons \u9019\u56db\u6a23\uff0c\u9019\u662f\u500b\u9700\u8981\u6ce8\u610f\u7684\u4e8b\u60c5\uff0c\u4efb\u4f55 keyboard-frientld event \u6216 script \u90fd\u5fc5\u9808\u8a2d\u5b9a\u5728\u9019\u4e09\u7a2e\u5143\u7d20\u4e0a\u9762\uff0c\u4f8b\u5982\u5728\u5beb mouseover \u7684\u9375\u76e4\u7b49\u50f9\u65b9\u6848\u7684\u6642\u5019\uff0c\u7562\u7adf\u8981\u53ef\u4ee5\u88ab\u4f7f\u7528\u8005\u6309 tab \u79fb\u52d5\u5230\uff0c\u5beb event script \u624d\u6709\u7528…:p<\/p>\n
Event-handler \u8a3b\u518a\u7684\u56db\u7a2e\u65b9\u6cd5:<\/p>\n
inline \uff0c\u4f8b\u5982\u76f4\u63a5\u5728element\u4e2d\u5beb onclick=”test()”\u00a0\u00a0<\/p>\n<\/li>\n
traditional model\uff0c\u4f8b\u5982 x.onclick= test\u00a0<\/p>\n<\/li>\n
W3C model \uff0c\u4f8b\u5982 x.addEventListener(‘click’,test,false) \u6216\u79fb\u9664 x.removeEventListener(‘click’,test,false)<\/p>\n<\/li>\n
Microsoft model\uff0c\u4f8b\u5982 x.attachEvent(‘onclick’,test) \u6216\u79fb\u9664 x.detachEvent(‘onclick’,test)<\/p>\n<\/li>\n<\/ol>\n
\u8981\u70ba\u5f8c\u5169\u8005\u505a\u4e00\u500b\u8de8\u700f\u89bd\u5668\u7684\u89e3\u6cd5\u4e26\u4e0d\u96e3\uff0cobject detection \u4e00\u4e0b\u5373\u53ef\u3002<\/p>\n
\u6cd5\u4e00\u662f JavaScript\u4e82\u5165\uff0c\u4e0d\u8981\u7528\u3002<\/p>\n
\u6cd5\u4e8c traditional model \u7684\u554f\u984c\u662f\uff0c\u7121\u6cd5\u9023\u7e8c\u70ba x \u639b\u8f09\u4e0d\u540c\u7684\u4e8b\u4ef6\uff0c\u4f8b\u5982 x.onclick = test; x.onclick = test2 \u5c31\u53ea\u5269\u4e0b test2 \u4e86\u3002\u56e0\u6b64\u9700\u8981\u518d\u5beb\u4e00\u500b function \u5305\u8d77\u4f86\uff0c\u5982 x.onclick = function () { test(); test2(); }\uff0c\u6bd4\u8f03\u4e0d\u5f48\u6027\u4e00\u9ede\uff0c\u4f46\u5982\u679c\u4f60\u53ef\u4ee5\u5b8c\u6574\u638c\u63e1 page \u5230\u5e95\u6709\u54ea\u4e9b script\uff0c\u4f5c\u8005\u5efa\u8b70\u4f60\u53ef\u4ee5\u7528 traditional model\u3002<\/p>\n
\u6cd5\u4e09\u6cd5\u56db\u6bd4\u8f03\u5148\u9032(?)\u662f\u7528 \u4e8b\u4ef6\u639b\u8f09\u7684\u65b9\u5f0f\uff0c\u8b93\u5404\u500b script \u90fd\u4e0d\u6703\u4e92\u76f8\u5f71\u97ff\u5230\u3002\u4e0d\u904e\u6709\u8da3\u7684\u662f\u7adf\u7136\u7121\u6cd5\u5f97\u77e5 x \u5df2\u7d93\u639b\u8f09\u591a\u5c11 event handlers\uff0c\u800c\u5982\u679c\u4e0d\u77e5\u9053\u639b\u8f09\u4e86\u4ec0\u9ebc\uff0c\u5c31\u7121\u6cd5\u79fb\u9664\u3002<\/p>\n
\u63a5\u8457\u662f\u00a0W3C model \u548c Microsoft model \u7684\u5169\u500b\u91cd\u5927\u5dee\u7570\uff0cMicrosoft model \u4e0d\u652f\u63f4 event capturing\uff0c\u53ea\u6709 bubbling(\u8acb\u53c3\u8003 O3noBLOG\u00a0 addEventListener\u7684\u7b2c\u4e09\u500b\u53c3\u6578<\/a> ) \u3002\u53e6\u5916\u5c31\u662f Microsoft model\u00a0 \u628a event-handler function \u7576\u6210\u4e00\u822c global function \u4f86\u8655\u7406\uff0c\u4e5f\u5c31\u662f\u5982\u679c\u4f60\u7528\u6cd5\u56db attachEvent \u4f86\u8a3b\u518a\u4e8b\u4ef6\u6642\uff0c event handler\u88e1\u9762\u7684 this \u6307\u7684\u662f window \u800c\u975e\u767c\u751f\u4e8b\u4ef6\u7684 object\u3002(\u4f5c\u8005\u63a8\u85a6 Dean Edward’s solution<\/a> \u53ef\u4ee5fix)<\/p>\n event bubbling \u80fd\u6709\u4ec0\u9ebc\u529f\u6548? \u4f60\u53ef\u4ee5\u975e\u5e38\u6709\u6548\u7387\u7684\u53ea\u8a2d\u5b9a\u4e00\u500bevent handler\u5230\u4e00\u500bHTML element\uff0c\u7136\u5f8c\u5c31\u53ef\u4ee5\u8655\u7406\u90a3\u500belement\u88e1\u9762\u4e00\u6574\u7fa4\u7684element\uff0c\u56e0\u70ba\u5b83\u6703 bubbling \u4e0a\u53bb\u89f8\u767c\u3002\u4f8b\u5982\u4f5c\u8005\u7684 Usable Forms \u7684\u7bc4\u4f8b\u4e2d\uff0c\u6709132\u500b form fields\uff0c\u4ed6\u4e0d\u60f3\u6bcf\u500b\u90fd\u7d66\u4ed6\u52a0\u4e0a event hander\uff0c\u9019\u6642\u5c31\u53ef\u4ee5\u5229\u7528 event bubbling \u5728 document \u52a0\u4e0a click event \u5373\u53ef\uff0c\u89f8\u767c\u4efb\u4e00\u500bfield\u90fd\u6703 bubbling \u4e0a\u53bb\u5230 document\uff0c\u7136\u5f8c\u5728 event handler \u4e2d\u518d\u4f86\u6839\u64da\u88ab\u89f8\u767c\u7684 element \u4f86\u6c7a\u5b9a\u505a\u4ec0\u9ebc\u52d5\u4f5c\u3002<\/p>\n \u5728 event handler\u4e2d\uff0c\u700f\u89bd\u5668\u6703\u81ea\u52d5\u7522\u751f\u4e00\u500b event object\uff0cW3C model \u662f\u6839\u64da\u7b2c\u4e00\u500b\u53c3\u6578\uff0cMicrosoft \u5247\u7e3d\u662fwindow.event\uff0c\u56e0\u6b64\u7a0b\u5f0f\u662f<\/p>\n document.onclick = handleEvent; \u9019\u500b\u00a0event object \u5305\u542b\u4e86\u89f8\u767c\u9019\u500b\u4e8b\u4ef6\u7684 event type (\u5373mouseover \u6216 keypress \u7b49\u7b49)\u3001\u89f8\u767c\u7684 target element ( W3C\u53eb target, Microsoft\u53eb srcElement)\u3001\u89f8\u767c\u6642\u7684\u6ed1\u9f20\u4f4d\u7f6e(\u8de8\u700f\u89bd\u5668\u8655\u7406\u5f88\u8907\u96dc\uff0c\u4f5c\u8005\u4e0d\u5efa\u8b70\u53bb\u7528\u3002\u800c\u4e14\u5927\u90e8\u5206\u7684\u60c5\u6cc1\u53ef\u4ee5\u6539\u7528\u4f60\u89f8\u767c\u7684element\u7684\u76f8\u5c0d\u4f4d\u7f6e\u4f86\u89e3\u6c7a\uff0c\u7b2c\u4e5d\u7ae0\u6703\u8a73\u8ff0)\u3001\u89f8\u767c\u6642\u6309\u4e0b\u7684\u6ed1\u9f20button\u8ddf\u9375\u76e4button \u7b49\u7b49\u8cc7\u8a0a\u3002<\/p>\n \u6ce8\u610f\u5230\u89f8\u767c\u4e8b\u4ef6\u7684element\u8ddf \u7576\u521d\u88ab\u5b9a\u7fa9 event handler \u7684 element \u4e26\u4e0d\u4e00\u5b9a\u76f8\u540c (\u56e0\u70baevent bubbling)\uff0c\u56e0\u6b64 target\u00a0element \u4e26\u4e0d\u4e00\u5b9a\u7b49\u65bc this\u3002\u5728 traditional\u8ddfW3C model\u4e2d\uff0cthis \u6307\u88ab\u5b9a\u7fa9event handler\u7684 element\u3002\u4f46\u5982\u524d\u6240\u8ff0\uff0c\u5fae\u8edf\u7684 this \u6307\u6210 window\uff0c\u4e5f\u5c31\u662f\u5982\u679c\u4f60\u6709\u7528\u5fae\u8edf attachEvent \u9019\u500b this \u7b49\u65bc\u6c92\u4ec0\u9ebc\u7528\u3002<\/p>\n \u770b\u6a23\u5b50\u7528 evtTarget \u597d\u50cf\u6bd4\u8f03\u597d? \u4e0d\u904e\u700f\u89bd\u5668\u5c0d\u65bc\u5230\u5e95\u662f “\u54ea\u500belement” \u89f8\u767c\u4e5f\u6709\u4e0d\u540c\u770b\u6cd5!! \u6240\u4ee5\u5c24\u5176\u662f\u78b0\u5230 mouseover,mouseout \u4f60\u5fc5\u9808\u7279\u5225check\u6293\u5230\u7684 element\u662f\u4f60\u8981\u7684\u3002<\/p>\n \u6240\u4ee5\u7d50\u8ad6\u662f\u5230\u5e95\u7528\u90a3\u7a2e\u5566? (\u8de8\u5e73\u53f0 event \u679c\u7136\u96e3\u641e) \u5982\u679c\u4f60\u4e0d\u7528Microsoft model\u7684 addEvent\u7684\u8a71\uff0c\u800c\u4e14\u8981\u88ab\u89f8\u767c\u7684element\u8ddf\u88ab\u5b9a\u7fa9\u7684element\u662f\u540c\u4e00\u500b\u7684\u8a71 (\u4e0d\u73a9event bubbling)\uff0c\u90a3\u4f5c\u8005\u63a8\u85a6\u7528 this \u5427\u3002<\/p>\n \u6ce8\u610f\u5230\u5728DOM Scripting\u90a3\u672c\u66f8\u4e2d\uff0cEvent-handler \u5b8c\u5168\u4f7f\u7528 traditional model\u00a0\u6cd5\uff0c\u4e5f\u6c92\u6709\u7528 event bubbling \u9032\u968e\u624b\u6cd5\uff0c\u56e0\u6b64\u4ed6\u7684 this \u4e00\u5f8b\u5c31\u662f target element\u3002<\/p>\n\n
\nfunction handleEvent(e) {
\nvar evt = e || window.event;
\nvar evtTarget = evt.target || evt.srcElement;
\n}<\/p>\n<\/blockquote>\n