"鍝庯紵鎴戠殑鎸夐挳鎬庝箞鐐逛簡娌″弽搴斿晩锛?鈥斺€斿鏋滀綘姝ｅ湪瀵圭潃灞忓箷鎶撳ご鍙戯紝鍏垚鏄亣鍒皁nclick浜嬩欢缁戝畾澶辨晥鐨勯棶棰樹簡銆傚埆鎱岋紒浠婂ぉ鍜变滑灏辨幇寮€浜嗘弶纰庝簡璇磋杩欎釜璁╂柊鎵嬫姄鐙傜殑缁忓吀闂銆?/p>

锛堟暡榛戞澘锛夊厛璁颁綇杩欎釜涓囪兘鍙ｈ瘈锛氣€?strong>鈥嬩簨浠剁粦涓嶄笂锛屽繀鏌ヤ笁鍦版柟銆傚厓绱犳壘娌℃壘锛熸椂鏈哄涓嶅锛熷嚱鏁版湁娌℃湁锛熲€?/strong>鈥?鎺ヤ笅鏉ュ挶浠氨鎸夎繖涓€濊矾寰€涓嬬洏銆?/p>

涓€銆侀〉闈㈠厓绱犵湡鐨勫瓨鍦ㄥ悧锛?/h3>

寰堝鏂版墜瀹规槗鏍藉湪杩欎釜鍧戦噷锛?鎴戞槑鏄庡啓浜嗘寜閽殑onclick灞炴€у晩锛? 浣嗕粩缁嗕竴鐪嬩唬鐮侊紝濂藉浼欙紝鑴氭湰灞呯劧鏀惧湪鎸夐挳鏍囩鍓嶉潰浜嗭紒灏卞儚杩欐牱锛?/p>

html杩愯澶嶅埗
<script>
document.getElementById("myBtn").onclick = showAlert; // 杩欓噷浼氭姤null
script>

<button id="myBtn">鐐规垜button>

鈥?strong>鈥嬭繖灏辨槸鍏稿瀷鐨凞OM鏈姞杞藉氨鎿嶄綔鍏冪礌鈥?/strong>鈥嬨€傛祻瑙堝櫒鏄粠涓婂線涓嬭В鏋愭枃妗ｇ殑锛屽綋鑴氭湰鎵ц鏃舵寜閽繕娌″嚭鐢熷憿锛屽彲涓嶅氨鎵句笉鍒板璞″槢锛?/p>

瑙ｅ喅鏂规涓夐€変竴锛?/p>

1. 鈥?strong>鈥嬫妸script鏍囩鎸埌body鏈熬鈥?/strong>鈥嬶紙绠€鍗曠矖鏆存湁鏁堬級
2. 鈥?strong>鈥嬩娇鐢―OMContentLoaded浜嬩欢鈥?/strong>鈥嬶紙鎺ㄨ崘濮垮娍锛?/li>
3. 鈥?strong>鈥嬫敼鐢ㄤ簨浠跺鎵樷€?/strong>鈥嬶紙楂橀樁鐜╂硶锛屽悗闈㈢粏璇达級

涓句釜鏍楀瓙馃尠锛?/p>

javascript澶嶅埗
document.addEventListener("DOMContentLoaded", function(){
    // 杩欓噷鏀句綘鐨勫垵濮嬪寲浠ｇ爜
});

---

浜屻€佺粦瀹氬Э鍔垮埌搴曞涓嶅锛?/h3>

甯歌缈昏溅鐜板満锛氭湁浜烘妸鍑芥暟鍚嶅啓鎴愪簡瀛楃涓诧紝杩樻湁浜虹洿鎺ュ啓鍑芥暟閫昏緫銆傚挶浠洿鎺ヤ笂瀵规瘮琛ㄦ牸鏇存竻妤氾細

姝ｇ‘鍐欐硶	閿欒鍐欐硶	閿欒鍘熷洜
btn.onclick = showAlert	btn.onclick = "showAlert()"	搴旇璧嬪€煎嚱鏁拌€屼笉鏄瓧绗︿覆
btn.onclick = function(){...}	btn.onclick = showAlert()	鎷彿瀵艰嚧绔嬪嵆鎵ц

锛堝垝閲嶇偣锛夆€?strong>鈥嬬瓑鍙峰彸杈瑰繀椤绘槸鍑芥暟寮曠敤锛屼笉鑳芥槸鎵ц缁撴灉锛佲€?/strong>鈥?濡傛灉鐪嬪埌鎺у埗鍙版姤"xxx is not a function"锛岃刀绱ф鏌ユ槸涓嶆槸鎵嬫粦澶氬啓浜嗘嫭鍙枫€?/p>

---

涓夈€佸姩鎬佺敓鎴愬厓绱犳€庝箞澶勭悊锛?/h3>

杩欐槸杩涢樁鐗堝潙浣嶃€傛瘮濡傞€氳繃Ajax鍔犺浇鐨勬寜閽紝浼犵粺缁戝畾鏂瑰紡鐩存帴姝囪彍銆傝繖鏃跺€欏氨瑕佺キ鍑衡€?strong>鈥嬩簨浠跺鎵樷€?/strong>鈥嬭繖涓ぇ鏉€鍣ㄤ簡锛?/p>

javascript澶嶅埗
// 鑰佸徃鏈洪兘杩欐牱鍐?/span>
document.body.addEventListener('click', function(e){
    if(e.target.id === 'dynamicBtn'){
        // 浣犵殑澶勭悊閫昏緫
    }
});

浼樺娍瀵规瘮锛?/p>

• 浼犵粺缁戝畾锛氬彧鑳界粦瀹氬凡瀛樺湪鐨勫厓绱?/li>
• 浜嬩欢濮旀墭锛氳嚜鍔ㄨ鐩栧悗缁柊澧炲厓绱狅紙鐪熼锛侊級

---

鍥涖€佹祻瑙堝櫒鍏煎鎬ф殫闆?/h3>

浣犱互涓虹幇浠ｆ祻瑙堝櫒閮藉瞾鏈堥潤濂斤紵纰板埌IE杩欎綅澶х埛杩樻槸瑕佺暀涓績鐪笺€傛瘮濡傝繖娈典唬鐮侊細

javascript澶嶅埗
element.onclick = function(){...} // 閫氱敤鍐欐硶
element.attachEvent('onclick',func) // IE8鍙婁互涓嬩笓鐢?/span>

寤鸿鐩存帴涓婇€氱敤瑙ｅ喅鏂规锛?/p>

javascript澶嶅埗
if(element.addEventListener){
    element.addEventListener('click',func);
}else{
    element.attachEvent('onclick',func);
}

---

浜斻€佹鏋舵椂浠ｇ殑鐢熷瓨鎸囧崡

鐜板湪Vue/React褰撻亾锛屾湁浜涙柊浜轰細闂細"杩樼敤寰楃潃瀛﹀師濮嬩簨浠剁粦瀹氬悧锛? 鎴戠殑瑙傜偣鏄細鈥?strong>鈥嬪繀椤诲锛佲€?/strong>鈥?灏卞儚寮€鑷姩鎸¤溅涔熻鎳傜鍚堝櫒鍘熺悊銆傚墠涓ゅぉ鏈変釜瀛﹀憳鍦≧eact閲岃繖鏍峰啓锛?/p>

jsx澶嶅埗
<button onClick={handleClick()}>鎻愪氦button> // 閿欒锛佺珛鍗虫墽琛屼簡

缁撴灉椤甸潰鍔犺浇鏃跺氨寮瑰嚭浜嗘彁浜ゆ彁绀恒€傛敼鎴?code>onClick={handleClick}绔嬮┈姝ｅ父銆備綘鐪嬶紝搴曞眰鍘熺悊姘歌繙涓嶈繃鏃讹紒

鏈€鍚庡敔鐐瑰疄鍦ㄧ殑

閬囧埌杩囦笉灏戝悓瀛︽妸浜嬩欢缁戝畾闂褰掑拵浜?鐜勫"锛屽叾瀹炲摢鏈夐偅涔堝鐜勫锛岄兘鏄熀纭€鐭ヨ瘑涓嶆墡瀹為椆鐨勩€傚缓璁柊鎵嬪吇鎴愪笁涓ソ涔犳儻锛?/p>

1. 缁戝畾鍓嶅厛鐢╟onsole.log鎵撳嵃鍏冪礌瀵硅薄
2. 澶氱敤debugger璇彞鎵撴柇鐐?/li>
3. 鍠勭敤娴忚鍣ㄧ殑Elements鍜孋onsole闈㈡澘

璁颁綇锛屸€?strong>鈥嬫瘡涓姤閿欎俊鎭兘鏄嚎绱⑩€?/strong>鈥嬨€備笅娆″啀閬囧埌onclick缃㈠伐锛屾寜鐓т粖澶╄鐨勪簲姝ユ帓鏌ユ硶锛屼繚鍑嗕綘浜斿垎閽熷唴閿佸畾闂銆傝鏄繕鎼炰笉瀹?..锛堝仠椤匡級閭ｈ偗瀹氭槸娴忚鍣ㄦ娊椋庝簡锛岄噸鍚瘯璇曪紒锛堢瑧锛?/p>