鍝庯紝浣犳湁娌℃湁閬囧埌杩囪繖绉嶆儏鍐碉紵鏄庢槑缁欐寜閽姞浜嗙偣鍑讳簨浠讹紝鍙柊澧炵殑鍒楄〃椤圭偣浜嗗氨鏄病鍙嶅簲锛佹垜璺熶綘璁插晩锛屽幓骞村仛鐢靛晢椤圭洰鏃讹紝灏卞洜涓鸿繖涓棶棰樿娴嬭瘯濡瑰瓙杩炵幆call浜嗕笁澶?..

涓€銆佸姩鎬佸厓绱犱负浠€涔堟€?瑁呮"锛?/h3>

锛堟姄鑰虫尃鑵?jpg锛夊挶浠厛鎼炴槑鐧戒粈涔堝彨鍔ㄦ€佸厓绱犮€傜畝鍗曡灏辨槸鈥?strong>鈥嬪悗鏈熼€氳繃JavaScript鐢熸垚鐨凞OM鍏冪礌鈥?/strong>鈥嬶紝姣斿锛?/p>

• 璐墿杞︽柊澧炵殑鍟嗗搧
• 鎳掑姞杞界殑璇勮鍒楄〃
• 寮圭獥閲岀殑纭鎸夐挳

杩欐椂鍊欑洿鎺?code>document.querySelector()鎶撳彇鍏冪礌缁戝畾浜嬩欢锛熷樋锛屼繚鍑嗕綘缈昏溅锛佸洜涓衡€?strong>鈥嬭剼鏈繍琛屾椂杩欎簺鍏冪礌杩樻病鍑虹敓鍛⑩€?/strong>鈥嬶紝灏卞儚缁欐病鍑虹敓鐨勫瀛愬畨鎺掔浉浜测€斺€旇兘鎴愬姛鎵嶆€紒

---

浜屻€佷簨浠跺鎵橈細涓€缃戞墦灏界殑缁濇嫑

锛堝暘锛佹媿澶ц吙锛夎繖閲屽氨瑕佺キ鍑哄ぇ鏉€鍣ㄢ€斺€斾簨浠跺鎵樹簡锛佸師鐞嗗叾瀹炵壒绠€鍗曪細

javascript澶嶅埗
// 涓句釜鏍楀瓙馃尠
document.body.addEventListener('click', function(e) {
  if(e.target.classList.contains('dynamic-btn')) {
    console.log('閫埌浣犲暒锛?);
  }
});

杩欐嫑濡欏湪鍝憿锛?/p>

1. 鈥?strong>鈥嬬渷鍐呭瓨鈥?/strong>鈥嬶細鏁翠釜椤甸潰鍙敤1涓洃鍚櫒
2. 鈥?strong>鈥嬭嚜閫傚簲鈥?/strong>鈥嬶細绠′綘鏄幇鍦ㄨ繕鏄皢鏉ョ敓鎴愮殑鍏冪礌
3. 鈥?strong>鈥嬪ソ缁存姢鈥?/strong>鈥嬶細鎵€鏈夐€昏緫闆嗕腑澶勭悊

鍘诲勾鍙屽崄涓€椤圭洰瀹炴祴锛岀敤杩欐嫑璁╁姩鎬佷氦浜掗棶棰樺噺灏戜簡80%锛?/p>

涓夈€佹柊浜哄繀韪╃殑5涓潙

锛堟壎棰濆徆姘旓級鍒互涓轰細浜嗕簨浠跺鎵樺氨涓囦簨澶у悏锛岃繖鍑犱釜闆峰尯鎴戝綋骞撮兘韪╄繃锛?/p>

1. 鍐掓场闃绘柇缁煎悎鐥?/h4>

javascript澶嶅埗
// 閿欒绀鸿寖鉂?/span>
e.target.onclick = function() {
  e.stopPropagation(); // 闃绘柇浜嬩欢鍐掓场
  //...涓氬姟閫昏緫
}

鈥?strong>鈥嬮棶棰樷€?/strong>鈥嬶細杩欐牱浼氱牬鍧忎簨浠跺鎵樻満鍒讹紒姝ｇ‘鍋氭硶鏄湪濮旀墭灞傚鐞嗗垽鏂潯浠躲€?/p>

2. 閫夋嫨鍣ㄩ€夋嫨鍥伴毦鐥?/h4>

javascript澶嶅埗
// 涓嶉潬璋辩殑鍐欐硶
if(e.target.id === 'btn'){...}

// 鏇寸ǔ濡ョ殑濮垮娍鉁?/span>
if(e.target.matches('.list-item .btn')){...}

鐢?code>matches()鏂规硶鏀寔澶嶆潅閫夋嫨鍣紝杩樿兘鐢?code>:hover杩欑浼被锛?/p>

3. 鍐呭瓨娉勬紡鍋ュ繕鐥?/h4>

javascript澶嶅埗
// 瀹氭椂鍣ㄩ噷鐨勫潙
setInterval(() => {
  container.addEventListener('click', handler);
}, 1000);

杩欎細瀵艰嚧鐩戝惉鍣ㄥ儚婊氶洩鐞冧竴鏍峰闀匡紒璁板緱鐢?code>removeEventListener鎴栬€呯洿鎺ラ攢姣佺埗鍏冪礌銆?/p>

---

鍥涖€佺Щ鍔ㄧ鐗规畩鍏崇収鎸囧崡

锛堟帍鍑烘墜鏈烘紨绀猴級鐜板湪鎵嬫満鐢ㄦ埛杩欎箞澶氾紝杩欏嚑涓偣鍙緱娉ㄦ剰锛?/p>

1. 鈥?strong>鈥?00ms寤惰繜鈥?/strong>鈥嬶細鑰佺敓甯歌皥浣嗕緷鐒跺瓨鍦?

   javascript澶嶅埗
   // 瑙ｅ喅鏂规
   document.addEventListener('touchstart', () => {}, {passive: true});

2. 鈥?strong>鈥嬬偣閫忕幇璞♀€?/strong>鈥嬶細蹇€熺偣鍑绘椂涓婂眰鍏冪礌娑堝け锛屼笅灞傚厓绱犺瑙﹀彂
3. 鈥?strong>鈥嬪畨鍗撴満鍏煎鈥?/strong>鈥嬶細鏌愪簺鍗冨厓鏈轰細蹇界暐鍔ㄦ€佺粦瀹氱殑浜嬩欢

涓婂懆甯湅鍙嬩紭鍖朒5椤甸潰锛屽姞浜?code>touchstart浜嬩欢鍚庯紝鐐瑰嚮鍝嶅簲閫熷害鐩存帴浠?20ms闄嶅埌150ms锛?/p>

浜斻€佸疄鎴橈細浠垮井淇℃秷鎭暱鎸夊垹闄?/h3>

锛堟悡鎵嬪噯澶囧疄鎿嶏級鍜变滑鏉ユ暣涓椿锛佸亣璁捐鍋氫竴涓秷鎭垪琛細

javascript澶嶅埗
let msgList = document.getElementById('msg-list');

msgList.addEventListener('contextmenu', function(e) {
  const msgItem = e.target.closest('.msg-item');
  if(msgItem) {
    showDeleteMenu(msgItem.dataset.id);
    e.preventDefault(); // 闃绘榛樿鍙抽敭鑿滃崟
  }
});

// 鍔ㄦ€佹坊鍔犳秷鎭?/span>
function addNewMsg(text) {
  let div = document.createElement('div');
  div.className = 'msg-item';
  div.dataset.id = Date.now();
  div.innerHTML = text;
  msgList.appendChild(div);
}

鐪嬫槑鐧芥病锛熻繖鏍蜂笉绠℃柊澧炲灏戞秷鎭紝闀挎寜鍒犻櫎鍔熻兘閮借兘鑷姩鐢熸晥锛?/p>

---

鍏€佸喎鐭ヨ瘑锛氫簨浠舵睜鐨勫鐢?/h3>

锛堟帹鐪奸暅锛夎涓繘闃舵妧宸р€斺€斾簨浠舵睜绠＄悊銆傚綋闇€瑕佸鐞嗗ぇ閲忓姩鎬佸厓绱犳椂锛?/p>

javascript澶嶅埗
const eventPool = new Map();

function bindEvent(element, handler) {
  const wrappedHandler = (e) => {
    handler(e);
    // 鑷姩娓呯悊
    if(e.target.dataset.dispose === 'true') {
      eventPool.delete(element);
    }
  };
  eventPool.set(element, wrappedHandler);
  element.addEventListener('click', wrappedHandler);
}

杩欏鏂规鍦ㄦ暟鎹ぇ灞忛」鐩噷甯垜浠噺灏戜簡37%鐨勫唴瀛樺崰鐢紒

---

涓汉纰庣蹇?/h3>

璇村疄鍦ㄧ殑锛岀幇鍦ㄥ緢澶氭柊鎵嬩竴涓婃潵灏卞妗嗘灦锛屽弽鑰屾妸鍘熺敓浜嬩欢鏈哄埗缁欒崚搴熶簡銆傚氨鍍忔垜閭ｄ釜瀹炰範鐢燂紝Vue鐜╁緱璐?锛岀粨鏋滆浠栨墜鍐欎釜浜嬩欢濮旀墭鎰ｆ槸鎲嬩簡淇╁皬鏃躲€傚叾瀹炲師鐢烰S鐜╃啛浜嗭紝鍐嶅妗嗘灦浼氳交鏉惧緢澶氾紝浣犺鏄笉鏄繖涓悊锛?/p>

锛堢獊鐒舵兂鍒帮級瀵逛簡锛佹渶杩戝彂鐜颁釜瀹濊棌璋冭瘯鎶€宸р€斺€旂敤Chrome鐨?code>monitorEvents()鍑芥暟鍙互鐩存帴瑙傚療鍏冪礌浜嬩欢瑙﹀彂鎯呭喌锛屾瘮console.log鐩磋澶氫簡锛屼綘浠揩鍘昏瘯璇曪紒

本文由嘻道妙招独家原创，未经允许，严禁转载