[{"data":1,"prerenderedAt":550},["ShallowReactive",2],{"\u002Fposts\u002Fdo-not-use-dom-onxxx":3,"surround:\u002Fposts\u002Fdo-not-use-dom-onxxx":541},{"id":4,"title":5,"body":6,"createdAt":533,"description":16,"extension":534,"meta":535,"navigation":536,"path":537,"seo":538,"stem":539,"__hash__":540},"posts\u002Fposts\u002F2022\u002Fdo-not-use-dom-onxxx.md","不要使用 DOM 的 onxxx 属性的第一万个理由",{"type":7,"value":8,"toc":531},"minimark",[9,13,17,76,79,86,89,92,95,100,103,106,113,116,170,173,176,181,184,186,189,250,255,262,264,267,332,337,343,345,348,411,416,419,421,424,449,454,460,463,466,497,502,509,519,524,527],[10,11,5],"h1",{"id":12},"不要使用-dom-的-onxxx-属性的第一万个理由",[14,15,16],"p",{},"直接来。首先创建一个 HTML 文件用于测试：",[18,19,24],"pre",{"className":20,"code":21,"language":22,"meta":23,"style":23},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cinput onclick=\"console.log(body)\">\n","html","",[25,26,27],"code",{"__ignoreMap":23},[28,29,32,36,40,44,47,50,54,57,61,65,68,71,73],"span",{"class":30,"line":31},"line",1,[28,33,35],{"class":34},"sMK4o","\u003C",[28,37,39],{"class":38},"swJcz","input",[28,41,43],{"class":42},"spNyl"," onclick",[28,45,46],{"class":34},"=",[28,48,49],{"class":34},"\"",[28,51,53],{"class":52},"sTEyZ","console",[28,55,56],{"class":34},".",[28,58,60],{"class":59},"s2Zo4","log",[28,62,64],{"class":63},"sfazB","(",[28,66,67],{"class":52},"body",[28,69,70],{"class":63},")",[28,72,49],{"class":34},[28,74,75],{"class":34},">\n",[14,77,78],{},"保存成一个 test.html 文件，然后拖动到 Chrome 中",[14,80,81],{},[82,83],"img",{"alt":84,"src":85},"image","https:\u002F\u002Fuser-images.githubusercontent.com\u002F5101076\u002F185025635-78f1074f-c4e0-4cd5-ad4c-77e71dd3da7d.png",[14,87,88],{},"点一下，猜猜看控制台会打印什么呢？",[90,91],"br",{},[14,93,94],{},"小明：我知道！这里没有 body 变量的定义，所以会直接报错！TypeError: body is not defined 对不对？",[14,96,97],{},[82,98],{"alt":84,"src":99},"https:\u002F\u002Fuser-images.githubusercontent.com\u002F5101076\u002F185025688-3139925e-6ab2-498d-87dd-f9ba25badb7d.png",[14,101,102],{},"咦，竟然打印出了 body 元素！",[104,105],"hr",{},[14,107,108,109],{},"小明：我现在全明白了，原来",[110,111,112],"strong",{},"元素的 onxxx 属性里实际上可以访问到 document 的属性作为变量，就像是我们任何地方都能访问 window 的属性作为变量一样！",[14,114,115],{},"好的小明，我们来改一下",[18,117,119],{"className":20,"code":118,"language":22,"meta":23,"style":23},"\u003Ctitle>ok\u003C\u002Ftitle>\n\u003Cinput onclick=\"console.log(title)\">\n",[25,120,121,141],{"__ignoreMap":23},[28,122,123,125,128,131,134,137,139],{"class":30,"line":31},[28,124,35],{"class":34},[28,126,127],{"class":38},"title",[28,129,130],{"class":34},">",[28,132,133],{"class":52},"ok",[28,135,136],{"class":34},"\u003C\u002F",[28,138,127],{"class":38},[28,140,75],{"class":34},[28,142,144,146,148,150,152,154,156,158,160,162,164,166,168],{"class":30,"line":143},2,[28,145,35],{"class":34},[28,147,39],{"class":38},[28,149,43],{"class":42},[28,151,46],{"class":34},[28,153,49],{"class":34},[28,155,53],{"class":52},[28,157,56],{"class":34},[28,159,60],{"class":59},[28,161,64],{"class":63},[28,163,127],{"class":52},[28,165,70],{"class":63},[28,167,49],{"class":34},[28,169,75],{"class":34},[14,171,172],{},"这次打印出来什么？",[14,174,175],{},"小明：是 ok！对吧？对……对吗？",[14,177,178],{},[82,179],{"alt":84,"src":180},"https:\u002F\u002Fuser-images.githubusercontent.com\u002F5101076\u002F185025768-791668b2-44a0-44dd-b6bd-4ff831fb22e8.png",[14,182,183],{},"猜猜看，为什么？",[104,185],{},[14,187,188],{},"只需要简单修改一下代码，就能够发现这个问题了：",[18,190,192],{"className":20,"code":191,"language":22,"meta":23,"style":23},"\u003Ctitle>ok\u003C\u002Ftitle>\n\u003Cinput onclick=\"console.log(title)\" title=\"ko\">\n",[25,193,194,210],{"__ignoreMap":23},[28,195,196,198,200,202,204,206,208],{"class":30,"line":31},[28,197,35],{"class":34},[28,199,127],{"class":38},[28,201,130],{"class":34},[28,203,133],{"class":52},[28,205,136],{"class":34},[28,207,127],{"class":38},[28,209,75],{"class":34},[28,211,212,214,216,218,220,222,224,226,228,230,232,234,236,239,241,243,246,248],{"class":30,"line":143},[28,213,35],{"class":34},[28,215,39],{"class":38},[28,217,43],{"class":42},[28,219,46],{"class":34},[28,221,49],{"class":34},[28,223,53],{"class":52},[28,225,56],{"class":34},[28,227,60],{"class":59},[28,229,64],{"class":63},[28,231,127],{"class":52},[28,233,70],{"class":63},[28,235,49],{"class":34},[28,237,238],{"class":42}," title",[28,240,46],{"class":34},[28,242,49],{"class":34},[28,244,245],{"class":63},"ko",[28,247,49],{"class":34},[28,249,75],{"class":34},[14,251,252],{},[82,253],{"alt":84,"src":254},"https:\u002F\u002Fuser-images.githubusercontent.com\u002F5101076\u002F185025824-6da7cdbd-3ce7-4fab-81ef-71d2bd1b5345.png",[14,256,257,258,261],{},"小明：哦！原来如此！所以 ",[110,259,260],{},"onxxx 访问变量的时候，会先在元素本身的属性上查找，没有的话就会找到 document 和 window","。",[104,263],{},[14,265,266],{},"为了继续调戏小明，我们再来修改一下代码：",[18,268,270],{"className":20,"code":269,"language":22,"meta":23,"style":23},"\u003Cform action=\"mailto:x\">\n  \u003Cinput onclick=\"console.log(action)\">\n\u003C\u002Fform>\n",[25,271,272,293,323],{"__ignoreMap":23},[28,273,274,276,279,282,284,286,289,291],{"class":30,"line":31},[28,275,35],{"class":34},[28,277,278],{"class":38},"form",[28,280,281],{"class":42}," action",[28,283,46],{"class":34},[28,285,49],{"class":34},[28,287,288],{"class":63},"mailto:x",[28,290,49],{"class":34},[28,292,75],{"class":34},[28,294,295,298,300,302,304,306,308,310,312,314,317,319,321],{"class":30,"line":143},[28,296,297],{"class":34},"  \u003C",[28,299,39],{"class":38},[28,301,43],{"class":42},[28,303,46],{"class":34},[28,305,49],{"class":34},[28,307,53],{"class":52},[28,309,56],{"class":34},[28,311,60],{"class":59},[28,313,64],{"class":63},[28,315,316],{"class":52},"action",[28,318,70],{"class":63},[28,320,49],{"class":34},[28,322,75],{"class":34},[28,324,326,328,330],{"class":30,"line":325},3,[28,327,136],{"class":34},[28,329,278],{"class":38},[28,331,75],{"class":34},[14,333,334],{},[82,335],{"alt":84,"src":336},"https:\u002F\u002Fuser-images.githubusercontent.com\u002F5101076\u002F185025873-58436ce9-f6cb-4744-a161-ef8d8f9a2bf1.png",[14,338,339,340],{},"小明：哎，我怎么一下子没想到，显然 ",[110,341,342],{},"onxxx 访问变量在发现本身没有该属性的时候，会沿着 DOM 结构向上查找，最终找到 document 和 window 上！",[104,344],{},[14,346,347],{},"小明小明，你再来看看：",[18,349,351],{"className":20,"code":350,"language":22,"meta":23,"style":23},"\u003Clabel for=\"me\">\n  \u003Cinput onclick=\"console.log(htmlFor)\">\n\u003C\u002Flabel>\n",[25,352,353,374,403],{"__ignoreMap":23},[28,354,355,357,360,363,365,367,370,372],{"class":30,"line":31},[28,356,35],{"class":34},[28,358,359],{"class":38},"label",[28,361,362],{"class":42}," for",[28,364,46],{"class":34},[28,366,49],{"class":34},[28,368,369],{"class":63},"me",[28,371,49],{"class":34},[28,373,75],{"class":34},[28,375,376,378,380,382,384,386,388,390,392,394,397,399,401],{"class":30,"line":143},[28,377,297],{"class":34},[28,379,39],{"class":38},[28,381,43],{"class":42},[28,383,46],{"class":34},[28,385,49],{"class":34},[28,387,53],{"class":52},[28,389,56],{"class":34},[28,391,60],{"class":59},[28,393,64],{"class":63},[28,395,396],{"class":52},"htmlFor",[28,398,70],{"class":63},[28,400,49],{"class":34},[28,402,75],{"class":34},[28,404,405,407,409],{"class":30,"line":325},[28,406,136],{"class":34},[28,408,359],{"class":38},[28,410,75],{"class":34},[14,412,413],{},[82,414],{"alt":84,"src":415},"https:\u002F\u002Fuser-images.githubusercontent.com\u002F5101076\u002F185025995-2f3af7f1-86ec-4588-a9bd-d89c9bbe16a8.png",[14,417,418],{},"小明：我X？为啥？？没天理了？！！",[104,420],{},[14,422,423],{},"小刚：小明你起开，让我来！",[18,425,427],{"className":20,"code":426,"language":22,"meta":23,"style":23},"\u003Cinput onclick=\"debugger\">\n",[25,428,429],{"__ignoreMap":23},[28,430,431,433,435,437,439,441,445,447],{"class":30,"line":31},[28,432,35],{"class":34},[28,434,39],{"class":38},[28,436,43],{"class":42},[28,438,46],{"class":34},[28,440,49],{"class":34},[28,442,444],{"class":443},"sbssI","debugger",[28,446,49],{"class":34},[28,448,75],{"class":34},[14,450,451],{},[82,452],{"alt":84,"src":453},"https:\u002F\u002Fuser-images.githubusercontent.com\u002F5101076\u002F185026033-a91603fb-3963-43b4-83ce-e4026f6ef273.png",[14,455,456,457,261],{},"小刚：小明你过来看看，实际上是 ",[110,458,459],{},"onxxx 被浏览器包裹在多个 with 块中执行的，并且可能有多个",[14,461,462],{},"小明：切，这跟我说的有啥区别？",[14,464,465],{},"小刚：",[18,467,469],{"className":20,"code":468,"language":22,"meta":23,"style":23},"\u003Cinput onclick=\"domain='gang.nb.com'\">\n",[25,470,471],{"__ignoreMap":23},[28,472,473,475,477,479,481,483,486,489,492,495],{"class":30,"line":31},[28,474,35],{"class":34},[28,476,39],{"class":38},[28,478,43],{"class":42},[28,480,46],{"class":34},[28,482,49],{"class":34},[28,484,485],{"class":52},"domain",[28,487,488],{"class":34},"='",[28,490,491],{"class":63},"gang.nb.com",[28,493,494],{"class":34},"'\"",[28,496,75],{"class":34},[14,498,499],{},[82,500],{"alt":84,"src":501},"https:\u002F\u002Fuser-images.githubusercontent.com\u002F5101076\u002F185026081-362dddb1-743e-43d1-b68e-1285830ebc7e.png",[14,503,504,505,508],{},"小明：对哦，所以",[110,506,507],{},"实际上不仅能读取这些属性，还能够对其修改","！万一我不小心修改了刚才的 action 这种属性，岂不是连请求地址都错了！",[14,510,511,512,518],{},"小刚：你再好好读读 ",[513,514,515],"a",{"href":515,"rel":516},"https:\u002F\u002Fhtml.spec.whatwg.org\u002Fmultipage\u002Fwebappapis.html#event-handler-content-attributes",[517],"nofollow"," 吧，别再摸鱼了。",[14,520,521],{},[82,522],{"alt":84,"src":523},"https:\u002F\u002Fuser-images.githubusercontent.com\u002F5101076\u002F185026131-6e6df880-008d-452e-943c-7738defe7bec.png",[14,525,526],{},"小明：小刚牛笔！",[528,529,530],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":23,"searchDepth":143,"depth":143,"links":532},[],"2022-08-17","md",{},true,"\u002Fposts\u002Fdo-not-use-dom-onxxx",{"title":5,"description":16},"posts\u002F2022\u002Fdo-not-use-dom-onxxx","8X-tlslSaez-xM8UHRKIcVQ6lYQjiX4qNDBhJq33QB4",[542,546],{"title":543,"path":544,"stem":545,"children":-1},"我们是如何记录图片的","\u002Fposts\u002Fhow-we-record-pictures","posts\u002F2022\u002Fhow-we-record-pictures",{"title":547,"path":548,"stem":549,"children":-1},"什么？不同函数的 prototype 竟然会表现不同？","\u002Fposts\u002Fdifferent-prototypes","posts\u002F2022\u002Fdifferent-prototypes",1792500630764]