{"id":1246,"date":"2018-05-12T02:45:27","date_gmt":"2018-05-11T18:45:27","guid":{"rendered":"https:\/\/damogame.cn:15443\/wordpress\/?p=1246"},"modified":"2018-05-12T02:45:27","modified_gmt":"2018-05-11T18:45:27","slug":"js-%e4%ba%8b%e4%bb%b6%e7%bb%91%e5%ae%9a%e3%80%81%e4%ba%8b%e4%bb%b6%e7%9b%91%e5%90%ac%e3%80%81%e4%ba%8b%e4%bb%b6%e5%a7%94%e6%89%98%e8%af%a6%e7%bb%86%e4%bb%8b%e7%bb%8d","status":"publish","type":"post","link":"https:\/\/i007.cc\/wordpress\/archives\/1246","title":{"rendered":"JS \u4e8b\u4ef6\u7ed1\u5b9a\u3001\u4e8b\u4ef6\u76d1\u542c\u3001\u4e8b\u4ef6\u59d4\u6258\u8be6\u7ec6\u4ecb\u7ecd"},"content":{"rendered":"
\n

JS \u4e8b\u4ef6\u7ed1\u5b9a\u3001\u4e8b\u4ef6\u76d1\u542c\u3001\u4e8b\u4ef6\u59d4\u6258\u8be6\u7ec6\u4ecb\u7ecd<\/h1>\n

\u8f6c\u8f7d<\/i>\u00a0\u00a02016-09-28 \u00a0 \u6295\u7a3f\uff1alqh \u00a0\u00a0\u00a0\u6211\u8981\u8bc4\u8bba<\/a><\/p>\n<\/div>\n

<\/div>\n
\n
\u8fd9\u7bc7\u6587\u7ae0\u4e3b\u8981\u4ecb\u7ecd\u4e86JS \u4e8b\u4ef6\u7ed1\u5b9a\u3001\u4e8b\u4ef6\u76d1\u542c\u3001\u4e8b\u4ef6\u59d4\u6258\u8be6\u7ec6\u4ecb\u7ecd\u7684\u76f8\u5173\u8d44\u6599,\u9700\u8981\u7684\u670b\u53cb\u53ef\u4ee5\u53c2\u8003\u4e0b<\/div>\n<\/div>\n
<\/div>\n
\n

\u5728JavaScript\u7684\u5b66\u4e60\u4e2d\uff0c\u6211\u4eec\u7ecf\u5e38\u4f1a\u9047\u5230JavaScript\u7684\u4e8b\u4ef6\u673a\u5236\uff0c\u4f8b\u5982\uff0c\u4e8b\u4ef6\u7ed1\u5b9a\u3001\u4e8b\u4ef6\u76d1\u542c\u3001\u4e8b\u4ef6\u59d4\u6258\uff08\u4e8b\u4ef6\u4ee3\u7406\uff09\u7b49\u3002\u8fd9\u4e9b\u540d\u8bcd\u662f\u4ec0\u4e48\u610f\u601d\u5462\uff0c\u6709\u4ec0\u4e48\u4f5c\u7528\u5462\uff1f<\/p>\n

\u4e8b\u4ef6\u7ed1\u5b9a<\/strong><\/p>\n

\u8981\u60f3\u8ba9 JavaScript \u5bf9\u7528\u6237\u7684\u64cd\u4f5c\u4f5c\u51fa\u54cd\u5e94\uff0c\u9996\u5148\u8981\u5bf9 DOM \u5143\u7d20\u7ed1\u5b9a\u4e8b\u4ef6\u5904\u7406\u51fd\u6570\u3002\u6240\u8c13\u4e8b\u4ef6\u5904\u7406\u51fd\u6570\uff0c\u5c31\u662f\u5904\u7406\u7528\u6237\u64cd\u4f5c\u7684\u51fd\u6570\uff0c\u4e0d\u540c\u7684\u64cd\u4f5c\u5bf9\u5e94\u4e0d\u540c\u7684\u540d\u79f0\u3002<\/p>\n

\u5728JavaScript\u4e2d\uff0c\u6709\u4e09\u79cd\u5e38\u7528\u7684\u7ed1\u5b9a\u4e8b\u4ef6\u7684\u65b9\u6cd5\uff1a<\/p>\n

    \n
  1. \u5728DOM\u5143\u7d20\u4e2d\u76f4\u63a5\u7ed1\u5b9a\uff1b<\/li>\n
  2. \u5728JavaScript\u4ee3\u7801\u4e2d\u7ed1\u5b9a\uff1b<\/li>\n
  3. \u7ed1\u5b9a\u4e8b\u4ef6\u76d1\u542c\u51fd\u6570\u3002<\/li>\n<\/ol>\n

    \u5728DOM\u4e2d\u76f4\u63a5\u7ed1\u5b9a\u4e8b\u4ef6<\/strong><\/p>\n

    \u6211\u4eec\u53ef\u4ee5\u5728DOM\u5143\u7d20\u4e0a\u7ed1\u5b9aonclick\u3001onmouseover\u3001onmouseout\u3001onmousedown\u3001onmouseup\u3001ondblclick\u3001onkeydown\u3001onkeypress\u3001onkeyup\u7b49\u3002\u597d\u591a\u4e0d\u4e00\u4e00\u5217\u51fa\u4e86\u3002\u5982\u679c\u60f3\u77e5\u9053\u66f4\u591a\u4e8b\u4ef6\u7c7b\u578b\u8bf7\u67e5\u770b\uff0c DOM\u4e8b\u4ef6 \u3002<\/p>\n

    \n
    <input type=\"button\" value=\"click me\" onclick=\"hello()\">\r\n\r\n<script>\r\nfunction hello(){\r\n alert(\"hello world!\");\r\n}\r\n<\/script>\r\n\r\n<\/pre>\n<\/div>\n
    \u5728JavaScript\u4ee3\u7801\u4e2d\u7ed1\u5b9a\u4e8b\u4ef6<\/p>\n
    \u5728JavaScript\u4ee3\u7801\u4e2d\uff08\u5373 script \u6807\u7b7e\u5185\uff09\u7ed1\u5b9a\u4e8b\u4ef6\u53ef\u4ee5\u4f7fJavaScript\u4ee3\u7801\u4e0eHTML\u6807\u7b7e\u5206\u79bb\uff0c\u6587\u6863\u7ed3\u6784\u6e05\u6670\uff0c\u4fbf\u4e8e\u7ba1\u7406\u548c\u5f00\u53d1\u3002<\/p>\n
    \n
    <input type=\"button\" value=\"click me\" id=\"btn\">\r\n\r\n<script>\r\ndocument.getElementById(\"btn\").onclick = function(){\r\n alert(\"hello world!\");\r\n}\r\n<\/script>\r\n\r\n<\/pre>\n<\/div>\n
    \u4f7f\u7528\u4e8b\u4ef6\u76d1\u542c\u7ed1\u5b9a\u4e8b\u4ef6<\/strong><\/p>\n
    \u7ed1\u5b9a\u4e8b\u4ef6\u7684\u53e6\u4e00\u79cd\u65b9\u6cd5\u662f\u7528 addEventListener() \u6216 attachEvent() \u6765\u7ed1\u5b9a\u4e8b\u4ef6\u76d1\u542c\u51fd\u6570\u3002\u4e0b\u9762\u8be6\u7ec6\u4ecb\u7ecd\uff0c\u4e8b\u4ef6\u76d1\u542c\u3002<\/p>\n
    \u4e8b\u4ef6\u76d1\u542c<\/strong><\/p>\n
    \u5173\u4e8e\u4e8b\u4ef6\u76d1\u542c\uff0cW3C\u89c4\u8303\u4e2d\u5b9a\u4e49\u4e863\u4e2a\u4e8b\u4ef6\u9636\u6bb5\uff0c\u4f9d\u6b21\u662f\u6355\u83b7\u9636\u6bb5\u3001\u76ee\u6807\u9636\u6bb5\u3001\u5192\u6ce1\u9636\u6bb5\u3002<\/p>\n
    \u8d77\u521dNetscape\u5236\u5b9a\u4e86JavaScript\u7684\u4e00\u5957\u4e8b\u4ef6\u9a71\u52a8\u673a\u5236\uff08\u5373\u4e8b\u4ef6\u6355\u83b7\uff09\u3002\u968f\u5373IE\u4e5f\u63a8\u51fa\u4e86\u81ea\u5df1\u7684\u4e00\u5957\u4e8b\u4ef6\u9a71\u52a8\u673a\u5236\uff08\u5373\u4e8b\u4ef6\u5192\u6ce1\uff09\u3002\u6700\u540eW3C\u89c4\u8303\u4e86\u4e24\u79cd\u4e8b\u4ef6\u673a\u5236\uff0c\u5206\u4e3a\u6355\u83b7\u9636\u6bb5\u3001\u76ee\u6807\u9636\u6bb5\u3001\u5192\u6ce1\u9636\u6bb5\u3002IE8\u4ee5\u524dIE\u4e00\u76f4\u575a\u6301\u81ea\u5df1\u7684\u4e8b\u4ef6\u673a\u5236\uff08\u524d\u7aef\u4eba\u5458\u4e00\u76f4\u5934\u75db\u7684\u517c\u5bb9\u6027\u95ee\u9898\uff09\uff0cIE9\u4ee5\u540eIE\u4e5f\u652f\u6301\u4e86W3C\u89c4\u8303\u3002<\/p>\n
    W3C\u89c4\u8303<\/p>\n
    \u8bed\u6cd5\uff1a<\/p>\n
    element.addEventListener(event, function, useCapture)<\/p>\n
    event : \uff08\u5fc5\u9700\uff09\u4e8b\u4ef6\u540d\uff0c\u652f\u6301\u6240\u6709 DOM\u4e8b\u4ef6 \u3002<\/p>\n
    function\uff1a\uff08\u5fc5\u9700\uff09\u6307\u5b9a\u8981\u4e8b\u4ef6\u89e6\u53d1\u65f6\u6267\u884c\u7684\u51fd\u6570\u3002<\/p>\n
    useCapture\uff1a\uff08\u53ef\u9009\uff09\u6307\u5b9a\u4e8b\u4ef6\u662f\u5426\u5728\u6355\u83b7\u6216\u5192\u6ce1\u9636\u6bb5\u6267\u884c\u3002true\uff0c\u6355\u83b7\u3002false\uff0c\u5192\u6ce1\u3002\u9ed8\u8ba4false\u3002<\/p>\n
    \u6ce8\uff1aIE8\u4ee5\u4e0b\u4e0d\u652f\u6301\u3002<\/p>\n
    \n
    <input type=\"button\" value=\"click me\" id=\"btn1\">\r\n\r\n<script>\r\ndocument.getElementById(\"btn1\").addEventListener(\"click\",hello);\r\nfunction hello(){\r\n alert(\"hello world!\");\r\n}\r\n<\/script>\r\n\r\n<\/pre>\n<\/div>\n
    IE\u6807\u51c6<\/strong><\/p>\n
    \u8bed\u6cd5\uff1a<\/p>\n
    element.attachEvent(event, function)<\/p>\n
    event\uff1a\uff08\u5fc5\u9700\uff09\u4e8b\u4ef6\u7c7b\u578b\u3002\u9700\u52a0\u201con\u201c\uff0c\u4f8b\u5982\uff1aonclick\u3002<\/p>\n
    function\uff1a\uff08\u5fc5\u9700\uff09\u6307\u5b9a\u8981\u4e8b\u4ef6\u89e6\u53d1\u65f6\u6267\u884c\u7684\u51fd\u6570\u3002<\/p>\n
    \n
    <input type=\"button\" value=\"click me\" id=\"btn2\">\r\n\r\n<script>\r\ndocument.getElementById(\"btn2\").attachEvent(\"onclick\",hello);\r\nfunction hello(){\r\n alert(\"hello world!\");\r\n}\r\n<\/script>\r\n\r\n<\/pre>\n<\/div>\n
    \u4e8b\u4ef6\u76d1\u542c\u7684\u4f18\u70b9<\/strong><\/p>\n
    1\u3001\u53ef\u4ee5\u7ed1\u5b9a\u591a\u4e2a\u4e8b\u4ef6\u3002<\/p>\n
    \n
    <input type=\"button\" value=\"click me\" id=\"btn3\">\r\n\r\n<script>\r\nvar btn3 = document.getElementById(\"btn3\");\r\nbtn3.onclick = function(){\r\n alert(\"hello 1\"); \/\/\u4e0d\u6267\u884c\r\n}\r\nbtn3.onclick = function(){\r\n alert(\"hello 2\"); \/\/\u6267\u884c\r\n}\r\n<\/script>\r\n\r\n<\/pre>\n<\/div>\n
    \u5e38\u89c4\u7684\u4e8b\u4ef6\u7ed1\u5b9a\u53ea\u6267\u884c\u6700\u540e\u7ed1\u5b9a\u7684\u4e8b\u4ef6\u3002<\/p>\n
    \n
    <input type=\"button\" value=\"click me\" id=\"btn4\">\r\n\r\n<script>\r\nvar btn4 = document.getElementById(\"btn4\");\r\nbtn4.addEventListener(\"click\",hello1);\r\nbtn4.addEventListener(\"click\",hello2);\r\n\r\nfunction hello1(){\r\n alert(\"hello 1\");\r\n}\r\nfunction hello2(){\r\n alert(\"hello 2\");\r\n}\r\n<\/script>\r\n\r\n<\/pre>\n<\/div>\n
    \u4e24\u4e2a\u4e8b\u4ef6\u90fd\u6267\u884c\u4e86\u3002<\/p>\n
    2\u3001\u53ef\u4ee5\u89e3\u9664\u76f8\u5e94\u7684\u7ed1\u5b9a<\/p>\n
    \n
    <input type=\"button\" value=\"click me\" id=\"btn5\">\r\n\r\n<script>\r\nvar btn5 = document.getElementById(\"btn5\");\r\nbtn5.addEventListener(\"click\",hello1);\/\/\u6267\u884c\u4e86\r\nbtn5.addEventListener(\"click\",hello2);\/\/\u4e0d\u6267\u884c\r\nbtn5.removeEventListener(\"click\",hello2);\r\n\r\nfunction hello1(){\r\n alert(\"hello 1\");\r\n}\r\nfunction hello2(){\r\n alert(\"hello 2\");\r\n}\r\n<\/script>\r\n\r\n<\/pre>\n<\/div>\n
    \u5c01\u88c5\u4e8b\u4ef6\u76d1\u542c<\/strong><\/p>\n
    \n
    <input type=\"button\" value=\"click me\" id=\"btn5\">\r\n\r\n\/\/\u7ed1\u5b9a\u76d1\u542c\u4e8b\u4ef6\r\nfunction addEventHandler(target,type,fn){\r\n if(target.addEventListener){\r\n target.addEventListener(type,fn);\r\n }else{\r\n target.attachEvent(\"on\"+type,fn);\r\n }\r\n}\r\n\r\n\/\/\u79fb\u9664\u76d1\u542c\u4e8b\u4ef6\r\nfunction removeEventHandler(target,type,fn){\r\n if(target.removeEventListener){\r\n target.removeEventListener(type,fn);\r\n }else{\r\n target.detachEvent(\"on\"+type,fn);\r\n }\r\n}\r\n\r\n\/\/\u6d4b\u8bd5\r\nvar btn5 = document.getElementById(\"btn5\");\r\naddEventHandler(btn5,\"click\",hello1);\/\/\u6dfb\u52a0\u4e8b\u4ef6hello1\r\naddEventHandler(btn5,\"click\",hello2);\/\/\u6dfb\u52a0\u4e8b\u4ef6hello2\r\nremoveEventHandler(btn5,\"click\",hello1);\/\/\u79fb\u9664\u4e8b\u4ef6hello1\r\n\r\n<\/pre>\n<\/div>\n
    \u4e8b\u4ef6\u59d4\u6258<\/strong><\/p>\n
    \u4e8b\u4ef6\u59d4\u6258\u5c31\u662f\u5229\u7528\u5192\u6ce1\u7684\u539f\u7406\uff0c\u628a\u4e8b\u4ef6\u52a0\u5230\u7236\u5143\u7d20\u6216\u7956\u5148\u5143\u7d20\u4e0a\uff0c\u89e6\u53d1\u6267\u884c\u6548\u679c\u3002<\/p>\n
    \n
    <input type=\"button\" value=\"click me\" id=\"btn6\">\r\n\r\nvar btn6 = document.getElementById(\"btn6\");\r\ndocument.onclick = function(event){\r\n event = event || window.event;\r\n var target = event.target || event.srcElement;\r\n if(target == btn6){\r\n alert(btn5.value);\r\n }\r\n}\r\n\r\n<\/pre>\n<\/div>\n
    \u4e0a\u9762\u53ea\u662f\u4e2a\u4f8b\u5b50\uff0c\u4ee3\u7801\u5c3d\u53ef\u80fd\u7684\u7b80\u5316\u4e86\u3002\u5728\u5b9e\u9645\u7684\u4ee3\u7801\u4e2d \u6211\u4eec\u53ef\u80fd\u7528\u5230jQuery\u7684live()\u3001delegate()\u3001bind()\u3001on()\u7b49\u3002<\/p>\n
    \u4e8b\u4ef6\u59d4\u6258\u4f18\u70b9<\/strong><\/p>\n
    1\u3001\u63d0\u9ad8JavaScript\u6027\u80fd\u3002\u4e8b\u4ef6\u59d4\u6258\u53ef\u4ee5\u663e\u8457\u7684\u63d0\u9ad8\u4e8b\u4ef6\u7684\u5904\u7406\u901f\u5ea6\uff0c\u51cf\u5c11\u5185\u5b58\u7684\u5360\u7528\u3002 \u5b9e\u4f8b\u5206\u6790JavaScript\u4e2d\u7684\u4e8b\u4ef6\u59d4\u6258\u548c\u4e8b\u4ef6\u7ed1\u5b9a \uff0c\u8fd9\u7bc7\u6587\u7ae0\u5199\u5f97\u8fd8\u4e0d\u9519\u3002<\/p>\n
    \u4f20\u7edf\u5199\u6cd5<\/strong><\/p>\n
    \n
    <ul id=\"list\">\r\n <li id=\"item1\" >item1<\/li>\r\n <li id=\"item2\" >item2<\/li>\r\n <li id=\"item3\" >item3<\/li>\r\n<\/ul>\r\n\r\n<script>\r\nvar item1 = document.getElementById(\"item1\");\r\nvar item2 = document.getElementById(\"item2\");\r\nvar item3 = document.getElementById(\"item3\");\r\n\r\nitem1.onclick = function(){\r\n alert(\"hello item1\");\r\n}\r\nitem2.onclick = function(){\r\n alert(\"hello item2\");\r\n}\r\nitem3.onclick = function(){\r\n alert(\"hello item3\");\r\n}\r\n<\/script>\r\n\r\n<\/pre>\n<\/div>\n
    \u4e8b\u4ef6\u59d4\u6258<\/strong><\/p>\n
    \n
    <ul id=\"list\">\r\n <li id=\"item1\" >item1<\/li>\r\n <li id=\"item2\" >item2<\/li>\r\n <li id=\"item3\" >item3<\/li>\r\n<\/ul>\r\n\r\n<script>\r\nvar item1 = document.getElementById(\"item1\");\r\nvar item2 = document.getElementById(\"item2\");\r\nvar item3 = document.getElementById(\"item3\");\r\n\r\ndocument.addEventListener(\"click\",function(event){\r\n var target = event.target;\r\n if(target == item1){\r\n alert(\"hello item1\");\r\n }else if(target == item2){\r\n alert(\"hello item2\");\r\n }else if(target == item3){\r\n alert(\"hello item3\");\r\n }\r\n})\r\n<\/script>\r\n\r\n<\/pre>\n<\/div>\n
    2\u3001\u52a8\u6001\u7684\u6dfb\u52a0DOM\u5143\u7d20\uff0c\u4e0d\u9700\u8981\u56e0\u4e3a\u5143\u7d20\u7684\u6539\u52a8\u800c\u4fee\u6539\u4e8b\u4ef6\u7ed1\u5b9a\u3002<\/p>\n
    \u4f20\u7edf\u5199\u6cd5<\/strong><\/p>\n
    \n
    <ul id=\"list\">\r\n <li id=\"item1\" >item1<\/li>\r\n <li id=\"item2\" >item2<\/li>\r\n <li id=\"item3\" >item3<\/li>\r\n<\/ul>\r\n\r\n<script>\r\nvar list = document.getElementById(\"list\");\r\n\r\nvar item = list.getElementsByTagName(\"li\");\r\nfor(var i=0;i<item.length;i++){\r\n (function(i){\r\n item[i].onclick = function(){\r\n alert(item[i].innerHTML);\r\n }\r\n })(i)\r\n}\r\n\r\nvar node=document.createElement(\"li\");\r\nvar textnode=document.createTextNode(\"item4\");\r\nnode.appendChild(textnode);\r\nlist.appendChild(node);\r\n\r\n<\/script>\r\n\r\n<\/pre>\n<\/div>\n
    \u70b9\u51fbitem1\u5230item3\u90fd\u6709\u4e8b\u4ef6\u54cd\u5e94\uff0c\u4f46\u662f\u70b9\u51fbitem4\u65f6\uff0c\u6ca1\u6709\u4e8b\u4ef6\u54cd\u5e94\u3002\u8bf4\u660e\u4f20\u7edf\u7684\u4e8b\u4ef6\u7ed1\u5b9a\u65e0\u6cd5\u5bf9\u52a8\u6001\u6dfb\u52a0\u7684\u5143\u7d20\u800c\u52a8\u6001\u7684\u6dfb\u52a0\u4e8b\u4ef6\u3002<\/p>\n
    \u4e8b\u4ef6\u59d4\u6258<\/strong><\/p>\n
    \n
    <ul id=\"list\">\r\n <li id=\"item1\" >item1<\/li>\r\n <li id=\"item2\" >item2<\/li>\r\n <li id=\"item3\" >item3<\/li>\r\n<\/ul>\r\n\r\n<script>\r\nvar list = document.getElementById(\"list\");\r\n\r\ndocument.addEventListener(\"click\",function(event){\r\n var target = event.target;\r\n if(target.nodeName == \"LI\"){\r\n alert(target.innerHTML);\r\n }\r\n})\r\n\r\nvar node=document.createElement(\"li\");\r\nvar textnode=document.createTextNode(\"item4\");\r\nnode.appendChild(textnode);\r\nlist.appendChild(node);\r\n\r\n<\/script>\r\n\r\n<\/pre>\n<\/div>\n
    \u5f53\u70b9\u51fbitem4\u65f6\uff0citem4\u6709\u4e8b\u4ef6\u54cd\u5e94\u3002\u8bf4\u660e\u4e8b\u4ef6\u59d4\u6258\u53ef\u4ee5\u4e3a\u65b0\u6dfb\u52a0\u7684DOM\u5143\u7d20\u52a8\u6001\u7684\u6dfb\u52a0\u4e8b\u4ef6\u3002<\/p>\n
    \u901a\u8fc7\u6b64\u6587\uff0c\u5e0c\u671b\u80fd\u5e2e\u52a9\u5230\u5927\u5bb6\uff0c\u8c22\u8c22\u5927\u5bb6\u5bf9\u672c\u7ad9\u7684\u652f\u6301\uff01<\/p>\n
    \n
    \u60a8\u53ef\u80fd\u611f\u5174\u8da3\u7684\u6587\u7ae0:<\/h4>\n