[{"data":1,"prerenderedAt":696},["ShallowReactive",2],{"blog-\u002Fblog\u002Fjavascript_event_1":3},{"id":4,"title":5,"body":6,"category":684,"cover":685,"csdn":685,"date":686,"description":5,"draft":687,"extension":688,"meta":689,"navigation":119,"path":690,"seo":691,"stem":692,"tags":693,"updated":685,"__hash__":695},"blog\u002Fblog\u002Fjavascript_event_1.md","JavaScript 事件 1",{"type":7,"value":8,"toc":682},"minimark",[9,13,255,258,271,415,418,426,430,453,456,461,469,529,545,614,621,624,632,678],[10,11,12],"h1",{"id":12},"绑定事件处理函数",[14,15,20],"pre",{"className":16,"code":17,"language":18,"meta":19,"style":19},"language-javascript shiki shiki-themes github-dark","1. \u002F\u002F 只能绑定一个\ndiv.onclick = function () {\n    this.style.backgroundColor = 'red';\n}\n\u002F\u002F 基本等同于写在行间样式上\n\u003Cdiv onclick=\"alter('')\"> \u003C\u002Fdiv>\n\n------------------------------------------------------------------------------\n\n2. \u002F\u002F IE8 no\n   \u002F\u002F 可绑定多个\n   \u002F\u002F 填3个参数（事件类型, 处理函数, false）\ndiv.addEventListener('click', function(){\n\n}, false);\n\n------------------------------------------------------------------------------\n\n3. \u002F\u002F IE 独有\n   \u002F\u002F 可绑定多个\n   \u002F\u002F 填2个参数（'on' + type, fn)\n   \u002F\u002F 较addEventlistener更为松散\nobj.attachEvent('onclick', function () {});\n\n","javascript","",[21,22,23,36,57,76,82,88,114,121,127,132,141,147,153,176,181,193,198,203,208,217,222,228,234],"code",{"__ignoreMap":19},[24,25,28,32],"span",{"class":26,"line":27},"line",1,[24,29,31],{"class":30},"sDLfK","1.",[24,33,35],{"class":34},"sAwPA"," \u002F\u002F 只能绑定一个\n",[24,37,39,43,47,51,54],{"class":26,"line":38},2,[24,40,42],{"class":41},"s95oV","div.",[24,44,46],{"class":45},"svObZ","onclick",[24,48,50],{"class":49},"snl16"," =",[24,52,53],{"class":49}," function",[24,55,56],{"class":41}," () {\n",[24,58,60,63,66,69,73],{"class":26,"line":59},3,[24,61,62],{"class":30},"    this",[24,64,65],{"class":41},".style.backgroundColor ",[24,67,68],{"class":49},"=",[24,70,72],{"class":71},"sU2Wk"," 'red'",[24,74,75],{"class":41},";\n",[24,77,79],{"class":26,"line":78},4,[24,80,81],{"class":41},"}\n",[24,83,85],{"class":26,"line":84},5,[24,86,87],{"class":34},"\u002F\u002F 基本等同于写在行间样式上\n",[24,89,91,94,98,101,103,106,109,111],{"class":26,"line":90},6,[24,92,93],{"class":41},"\u003C",[24,95,97],{"class":96},"s4JwU","div",[24,99,100],{"class":45}," onclick",[24,102,68],{"class":49},[24,104,105],{"class":71},"\"alter('')\"",[24,107,108],{"class":41},"> \u003C\u002F",[24,110,97],{"class":96},[24,112,113],{"class":41},">\n",[24,115,117],{"class":26,"line":116},7,[24,118,120],{"emptyLinePlaceholder":119},true,"\n",[24,122,124],{"class":26,"line":123},8,[24,125,126],{"class":49},"------------------------------------------------------------------------------\n",[24,128,130],{"class":26,"line":129},9,[24,131,120],{"emptyLinePlaceholder":119},[24,133,135,138],{"class":26,"line":134},10,[24,136,137],{"class":30},"2.",[24,139,140],{"class":34}," \u002F\u002F IE8 no\n",[24,142,144],{"class":26,"line":143},11,[24,145,146],{"class":34},"   \u002F\u002F 可绑定多个\n",[24,148,150],{"class":26,"line":149},12,[24,151,152],{"class":34},"   \u002F\u002F 填3个参数（事件类型, 处理函数, false）\n",[24,154,156,158,161,164,167,170,173],{"class":26,"line":155},13,[24,157,42],{"class":41},[24,159,160],{"class":45},"addEventListener",[24,162,163],{"class":41},"(",[24,165,166],{"class":71},"'click'",[24,168,169],{"class":41},", ",[24,171,172],{"class":49},"function",[24,174,175],{"class":41},"(){\n",[24,177,179],{"class":26,"line":178},14,[24,180,120],{"emptyLinePlaceholder":119},[24,182,184,187,190],{"class":26,"line":183},15,[24,185,186],{"class":41},"}, ",[24,188,189],{"class":30},"false",[24,191,192],{"class":41},");\n",[24,194,196],{"class":26,"line":195},16,[24,197,120],{"emptyLinePlaceholder":119},[24,199,201],{"class":26,"line":200},17,[24,202,126],{"class":49},[24,204,206],{"class":26,"line":205},18,[24,207,120],{"emptyLinePlaceholder":119},[24,209,211,214],{"class":26,"line":210},19,[24,212,213],{"class":30},"3.",[24,215,216],{"class":34}," \u002F\u002F IE 独有\n",[24,218,220],{"class":26,"line":219},20,[24,221,146],{"class":34},[24,223,225],{"class":26,"line":224},21,[24,226,227],{"class":34},"   \u002F\u002F 填2个参数（'on' + type, fn)\n",[24,229,231],{"class":26,"line":230},22,[24,232,233],{"class":34},"   \u002F\u002F 较addEventlistener更为松散\n",[24,235,237,240,243,245,248,250,252],{"class":26,"line":236},23,[24,238,239],{"class":41},"obj.",[24,241,242],{"class":45},"attachEvent",[24,244,163],{"class":41},[24,246,247],{"class":71},"'onclick'",[24,249,169],{"class":41},[24,251,172],{"class":49},[24,253,254],{"class":41}," () {});\n",[10,256,257],{"id":257},"事件处理程序的运行环境",[259,260,261,265,268],"ol",{},[262,263,264],"li",{},"ele.onxxx = function (event) {} \u002F\u002F this --> dom",[262,266,267],{},"obj.addEventListener (type, fn, false); this --> dom",[262,269,270],{},"obj.attachEvent('on' + type, fn); this --> window",[14,272,274],{"className":16,"code":273,"language":18,"meta":19,"style":19},"\u002F\u002F 封装兼容性 addEvent(ele, type, handle)方法 *\nfunction addEvent(ele, type, handle) {\n  if (ele.addEventListener) {\n    ele.addEventListener(type, handle, false);\n  } else if (ele.attachEvent) {\n    ele.attachEvent(\"on\" + type, function () {\n      handle.call(ele);\n    });\n  } else {\n    ele[\"on\" + type] = handle;\n  }\n}\n",[21,275,276,281,307,315,329,343,364,375,380,389,406,411],{"__ignoreMap":19},[24,277,278],{"class":26,"line":27},[24,279,280],{"class":34},"\u002F\u002F 封装兼容性 addEvent(ele, type, handle)方法 *\n",[24,282,283,285,288,290,294,296,299,301,304],{"class":26,"line":38},[24,284,172],{"class":49},[24,286,287],{"class":45}," addEvent",[24,289,163],{"class":41},[24,291,293],{"class":292},"s9osk","ele",[24,295,169],{"class":41},[24,297,298],{"class":292},"type",[24,300,169],{"class":41},[24,302,303],{"class":292},"handle",[24,305,306],{"class":41},") {\n",[24,308,309,312],{"class":26,"line":59},[24,310,311],{"class":49},"  if",[24,313,314],{"class":41}," (ele.addEventListener) {\n",[24,316,317,320,322,325,327],{"class":26,"line":78},[24,318,319],{"class":41},"    ele.",[24,321,160],{"class":45},[24,323,324],{"class":41},"(type, handle, ",[24,326,189],{"class":30},[24,328,192],{"class":41},[24,330,331,334,337,340],{"class":26,"line":84},[24,332,333],{"class":41},"  } ",[24,335,336],{"class":49},"else",[24,338,339],{"class":49}," if",[24,341,342],{"class":41}," (ele.attachEvent) {\n",[24,344,345,347,349,351,354,357,360,362],{"class":26,"line":90},[24,346,319],{"class":41},[24,348,242],{"class":45},[24,350,163],{"class":41},[24,352,353],{"class":71},"\"on\"",[24,355,356],{"class":49}," +",[24,358,359],{"class":41}," type, ",[24,361,172],{"class":49},[24,363,56],{"class":41},[24,365,366,369,372],{"class":26,"line":116},[24,367,368],{"class":41},"      handle.",[24,370,371],{"class":45},"call",[24,373,374],{"class":41},"(ele);\n",[24,376,377],{"class":26,"line":123},[24,378,379],{"class":41},"    });\n",[24,381,382,384,386],{"class":26,"line":129},[24,383,333],{"class":41},[24,385,336],{"class":49},[24,387,388],{"class":41}," {\n",[24,390,391,394,396,398,401,403],{"class":26,"line":134},[24,392,393],{"class":41},"    ele[",[24,395,353],{"class":71},[24,397,356],{"class":49},[24,399,400],{"class":41}," type] ",[24,402,68],{"class":49},[24,404,405],{"class":41}," handle;\n",[24,407,408],{"class":26,"line":143},[24,409,410],{"class":41},"  }\n",[24,412,413],{"class":26,"line":149},[24,414,81],{"class":41},[10,416,417],{"id":417},"解除事件处理程序",[14,419,424],{"className":420,"code":422,"language":423},[421],"language-text","ele.onclick = false\u002F''\u002Fnull;\nele.removeEventListener(type, test, false);\nele.detachEvent('on' + type, test);\n\u002F\u002F 若绑定匿名函数则无法解除。\n","text",[21,425,422],{"__ignoreMap":19},[10,427,429],{"id":428},"事件处理模型-事件的冒泡捕获","事件处理模型-事件的冒泡、捕获 *",[431,432,433,436,439,442,445],"ul",{},[262,434,435],{},"冒泡：结构上嵌套关系的元素，自子元素冒泡向父元素；",[262,437,438],{},"捕获：结构上嵌套关系的元素，自父元素捕获至子元素。 ele.addEventListener('click', function() {}, true);",[262,440,441],{},"\u002F\u002F IE no",[262,443,444],{},"触发顺序，先捕获，后冒泡。",[262,446,447,448],{},"focus, blur, change, submit, reset, select等事件不冒泡。\n",[449,450],"img",{"alt":451,"src":452},"在这里插入图片描述","https:\u002F\u002Fpub-5ec96507162a4f0a8e713a916117c9f4.r2.dev\u002Fblog\u002F9c4bbc4e883e4b4031c9c26367d8e777.png",[10,454,455],{"id":455},"取消冒泡和阻止默认事件",[431,457,458],{},[262,459,460],{},"取消冒泡：",[259,462,463,466],{},[262,464,465],{},"W3C标准 event.stopPropagation(); IE8 no",[262,467,468],{},"IE event.cancelBubble = true;",[14,470,472],{"className":16,"code":471,"language":18,"meta":19,"style":19},"\u002F\u002F 封装取消冒泡的函数 stopBubble(event) {\n    if(event.stopPropagation){\n        event.stopPropagation();\n    }else{\n        event.cancelBubble = true;\n    }\n}\n",[21,473,474,479,487,498,508,520,525],{"__ignoreMap":19},[24,475,476],{"class":26,"line":27},[24,477,478],{"class":34},"\u002F\u002F 封装取消冒泡的函数 stopBubble(event) {\n",[24,480,481,484],{"class":26,"line":38},[24,482,483],{"class":49},"    if",[24,485,486],{"class":41},"(event.stopPropagation){\n",[24,488,489,492,495],{"class":26,"line":59},[24,490,491],{"class":41},"        event.",[24,493,494],{"class":45},"stopPropagation",[24,496,497],{"class":41},"();\n",[24,499,500,503,505],{"class":26,"line":78},[24,501,502],{"class":41},"    }",[24,504,336],{"class":49},[24,506,507],{"class":41},"{\n",[24,509,510,513,515,518],{"class":26,"line":84},[24,511,512],{"class":41},"        event.cancelBubble ",[24,514,68],{"class":49},[24,516,517],{"class":30}," true",[24,519,75],{"class":41},[24,521,522],{"class":26,"line":90},[24,523,524],{"class":41},"    }\n",[24,526,527],{"class":26,"line":116},[24,528,81],{"class":41},[431,530,531],{},[262,532,533,534],{},"阻止默认事件：\n默认事件-表单提交，a标签跳转，右键菜单等\n",[259,535,536,539,542],{},[262,537,538],{},"return false; 以对象属性的方式注册的事件才生效 \u002F\u002F兼容性好、原始、以句柄的方式来阻止默认事件，所以只有以句柄的方式绑定的事件才ok addEventListener(), attachEvent() no",[262,540,541],{},"event.preventDefault(); \u002F\u002F W3C标准，IE8 no",[262,543,544],{},"event.returnValue = false; 兼容IE",[14,546,548],{"className":16,"code":547,"language":18,"meta":19,"style":19},"\u002F\u002F 封装阻止默认事件的函数 cancelHandler(event);\nfunction cancelHandle(event) {\n  if (event.preventDefault) {\n    event.preventDefault();\n  } else {\n    event.returnValue = false;\n  }\n}\n",[21,549,550,555,569,576,586,594,606,610],{"__ignoreMap":19},[24,551,552],{"class":26,"line":27},[24,553,554],{"class":34},"\u002F\u002F 封装阻止默认事件的函数 cancelHandler(event);\n",[24,556,557,559,562,564,567],{"class":26,"line":38},[24,558,172],{"class":49},[24,560,561],{"class":45}," cancelHandle",[24,563,163],{"class":41},[24,565,566],{"class":292},"event",[24,568,306],{"class":41},[24,570,571,573],{"class":26,"line":59},[24,572,311],{"class":49},[24,574,575],{"class":41}," (event.preventDefault) {\n",[24,577,578,581,584],{"class":26,"line":78},[24,579,580],{"class":41},"    event.",[24,582,583],{"class":45},"preventDefault",[24,585,497],{"class":41},[24,587,588,590,592],{"class":26,"line":84},[24,589,333],{"class":41},[24,591,336],{"class":49},[24,593,388],{"class":41},[24,595,596,599,601,604],{"class":26,"line":90},[24,597,598],{"class":41},"    event.returnValue ",[24,600,68],{"class":49},[24,602,603],{"class":30}," false",[24,605,75],{"class":41},[24,607,608],{"class":26,"line":116},[24,609,410],{"class":41},[24,611,612],{"class":26,"line":123},[24,613,81],{"class":41},[615,616,617,618],"p",{},"阻止右键菜单\n",[449,619],{"alt":451,"src":620},"https:\u002F\u002Fpub-5ec96507162a4f0a8e713a916117c9f4.r2.dev\u002Fblog\u002F20b521fb612d994699e5d7e48bbb883d.png",[10,622,623],{"id":623},"事件对象",[431,625,626,629],{},[262,627,628],{},"event || window.event 用于IE",[262,630,631],{},"事件源对象\nevent.target firlfox只有这个\nevent.srcElement IE只有这个\nchrome 都有",[14,633,635],{"className":16,"code":634,"language":18,"meta":19,"style":19},"\u002F\u002F 兼容性写法\nvar event = e || window.event;\nvar target = event.target || event.srcElement;\n",[21,636,637,642,661],{"__ignoreMap":19},[24,638,639],{"class":26,"line":27},[24,640,641],{"class":34},"\u002F\u002F 兼容性写法\n",[24,643,644,647,650,652,655,658],{"class":26,"line":38},[24,645,646],{"class":49},"var",[24,648,649],{"class":41}," event ",[24,651,68],{"class":49},[24,653,654],{"class":41}," e ",[24,656,657],{"class":49},"||",[24,659,660],{"class":41}," window.event;\n",[24,662,663,665,668,670,673,675],{"class":26,"line":59},[24,664,646],{"class":49},[24,666,667],{"class":41}," target ",[24,669,68],{"class":49},[24,671,672],{"class":41}," event.target ",[24,674,657],{"class":49},[24,676,677],{"class":41}," event.srcElement;\n",[679,680,681],"style",{},"html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}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 pre.shiki code .s9osk, html code.shiki .s9osk{--shiki-default:#FFAB70}",{"title":19,"searchDepth":38,"depth":38,"links":683},[],"前端",null,"2020-05-10",false,"md",{},"\u002Fblog\u002Fjavascript_event_1",{"title":5,"description":5},"blog\u002Fjavascript_event_1",[694],"JavaScript","EVIzhitMqHVJXQszS9clgcvM2Gb1u4Tp8vrElI9_A4M",1780076048525]