亚洲乱色熟女一区二区三区丝袜,天堂√中文最新版在线,亚洲精品乱码久久久久久蜜桃图片,香蕉久久久久久av成人,欧美丰满熟妇bbb久久久

常用事件

鼠標(biāo)事件：

click：鼠標(biāo)左鍵單擊
dblclick：鼠標(biāo)左鍵雙擊
mousedown / mouseup：鼠標(biāo)按下/釋放
mousemove：鼠標(biāo)移動
mouseover / mouseout：鼠標(biāo)移入/移出元素
mouseenter / mouseleave：鼠標(biāo)移入/移出元素
contextmenu：鼠標(biāo)右鍵點擊時觸發(fā)
wheel：鼠標(biāo)滾輪滾動觸發(fā)

鍵盤事件：

keydown / keyup：鍵盤按鍵按下/釋放

窗口/文檔事件：

DOMContentLoaded：HTML 解析完成
load：資源加載完成（如窗口、圖片）
beforeunload / unload：窗口關(guān)閉前/后
resize：窗口大小變化
scroll：窗口滾動事件

動畫事件：

animationstart / animationend：CSS 動畫開始/結(jié)束
transitionstart / transitionend：CSS 過渡開始/結(jié)束

表單事件：

submit：表單提交
change：表單值變化（如輸入框、下拉框）
input：輸入時觸發(fā)
focus / blur：元素獲取/失去焦點

媒體事件：

play / pause：媒體播放/暫停
ended：媒體播放結(jié)束
timeupdate：播放時間更新
volumechange：音量變化

移動端事件：

touchstart：手指首次接觸屏幕時觸發(fā)
touchmove：手指在屏幕上滑動時連續(xù)觸發(fā)
touchend：手指離開屏幕時觸發(fā)
touchcancel：系統(tǒng)中斷觸摸時觸發(fā)（如來電、彈窗）

devicemotion：檢測設(shè)備加速度和旋轉(zhuǎn)速率
deviceorientation：檢測設(shè)備方向，多用于指南針或屏幕旋轉(zhuǎn)

HTML5 新事件：

drag / drop：拖拽操作
copy / cut / paste：剪貼板操作
visibilitychange：頁面可見性變化，比如瀏覽器 Tab 切換、瀏覽器最小化
hashchange：URL 哈希變化
popstate：瀏覽器歷史變化（如前進/后退）

hashchange 和 popstate 在常規(guī)的開發(fā)中不太常用，但 Vue 和 React 中的路由底層可都是用它們實現(xiàn)的，前端單頁應(yīng)用能迅速的火爆起來，少不了它倆的功勞。

除了這些常用事件外，還有一些標(biāo)簽獨有事件，比如 img 標(biāo)簽的 error 和 load 事件等。這里就不一一列舉了，可閱讀 MDN 文檔獲得更多信息。

MDN 事件文檔：

https://developer.mozilla.org/zh-CN/docs/Web/Events
https://developer.mozilla.org/zh-CN/docs/Web/API/Element/copy_event

事件綁定

見過常用事件之后，再聊聊 JS 綁定事件的幾種方式，以 click 事件為例。

最開始學(xué)習(xí) JS 的時候，就用的是 HTML 標(biāo)簽屬性的方式綁定事件，比如這樣：

<!-- 所有的 HTML 事件屬性都以 on 開頭，比如 onclick onload onkeydown -->
<button onclick="handleClick()">這里是按鈕</button>
<script>
  function handleClick() {
    alert('點擊了按鈕')
  }
</script>

慢慢的學(xué)習(xí)之后發(fā)現(xiàn)這種方式有個弊端啊，handleClick 這個函數(shù)名定義在全局作用域之下，這東東可被稱為 污染全局變量 了，后來就用上了這種方式：

<button id="button">這里是按鈕</button>
<script>
(() => {
  // 所有的事件屬性都以 on 開頭，比如 onclick onload onkeydown
  document.querySelector('#button').onclick = () => {
    alert('前端路引點擊了按鈕')
  }
})()
</script>

這種方式雖然看起來沒啥大問題，但是如果一個 DOM 節(jié)點綁定了兩個相同的事件之后，只會執(zhí)行最后一個綁定的方法，比如：

<button id="button2">這里是按鈕</button>
<script>
(() => {
  const btn = document.querySelector('#button2')
  btn.onclick = () => {
    alert('點擊了按鈕')
  }
  btn.onclick = () => {
    alert('前端路引點擊了按鈕')
  }
})()
</script>

還是存在弊端，如果團隊合作的時候，有其他兄弟伙用這種方式綁定就完蛋了，所以后來又學(xué)到了一種新的方式：

<button id="button3">這里是按鈕</button>
<script>
(() => {
  const btn = document.querySelector('#button3')
  // addEventListener 綁定的事件不需要添加 on 前綴
  btn.addEventListener('click', () => {
    alert('點擊了按鈕')
  })
  btn.addEventListener('click', () => {
    alert('前端路引點擊了按鈕')
  })
})()
</script>

嗯，這種綁定方式就完美了，在任何地方都可以綁定，還能一個事件多次綁定，也不存在全局污染。

取消綁定

有綁定事件，那必然就有取消綁定的需求。某些場景下，綁定的事件只需要執(zhí)行一次，這種需求其實用一個變量也能實現(xiàn)，比如：

<button id="button4">這里是按鈕</button>
<script>
(() => {
  const btn = document.querySelector('#button4')
  let isClicked = false
  btn.addEventListener('click', () => {
    if (isClicked) {
      return
    }
    isClicked = true
    alert('前端路引點擊了按鈕')
  })
})()
</script>

再復(fù)雜一點，搞一個計數(shù)器，想限制多少次就限制多少，比如限制按鈕只能點擊五次：

<button id="button5">這里是按鈕</button>
<script>
(() => {
  const btn = document.querySelector('#button5')
  let times = 0
  btn.addEventListener('click', () => {
    if (times >= 5) {
      return
    }
    times++
    alert('前端路引點擊了按鈕' + times)
  })
})()
</script>

雖然這種方式也能滿足需求，但與取消綁定的方式多少有點出入，還是聊聊取消綁定的幾種方法。

使用 HTML 標(biāo)簽屬性綁定的事件，可通過 removeAttribute 方法取消綁定：

<button onclick="handleClick(this)">這里是按鈕</button>
<script>
  function handleClick(el) {
    alert('點擊了按鈕')
    el.removeAttribute('onclick')
  }
</script>

使用 onclick 綁定的事件，可通過將屬性置空取消綁定：

<button id="button2">這里是按鈕</button>
<script>
(() => {
  const btn = document.querySelector('#button2')
  btn.onclick = () => {
    btn.onclick = undefined
    alert('點擊了按鈕')
  }
})()
</script>

使用 addEventListener 綁定的事件，可通過 removeEventListener 方法取消綁定：

<button id="button3">這里是按鈕</button>
<script>
(() => {
  const btn = document.querySelector('#button3')
  function handleClick() {
    alert('前端路引點擊了按鈕')
    // 點擊后移除事件
    btn.removeEventListener('click', handleClick)
  }
  btn.addEventListener('click', handleClick)
})()
</script>

removeEventListener 第二個參數(shù)必須傳入要移除的事件函數(shù)，否則方法報錯?。?/p>

關(guān)于只執(zhí)行一次的事件，也可以用 addEventListener 的第三個參數(shù) once 來處理，比如：

<button id="button4">這里是按鈕</button>
<script>
(() => {
  const btn = document.querySelector('#button4')
  btn.addEventListener('click', () => {
    alert('前端路引點擊了按鈕')
  }, { once: true })
})()
</script>

AbortController 移除事件

曾一度以為 AbortController 這個 API 僅用于終止 fetch 請求，后來發(fā)現(xiàn)也可以用于移除 DOM 事件，比如：

<button id="button5">這里是按鈕</button>
<script>
(() => {
  const btn = document.querySelector('#button5')
  const controller = new AbortController();
  
  btn.addEventListener('click', () => {
    alert('點擊了按鈕')
  }, { signal: controller.signal })
  btn.addEventListener('click', () => {
    alert('前端路引點擊了按鈕')
    // 移除所有通過此 signal 綁定的事件
    controller.abort();
  }, { signal: controller.signal })
})()
</script>

這個 API 的強大之處在于可一次性移除多個事件，嗯..比 removeEventListener 是要更加方便。

轉(zhuǎn)自https://www.cnblogs.com/linx/p/18957244