日韩欧美人妻无码精品白浆,www.大香蕉久久网,狠狠的日狠狠的操,日本好好热在线观看

常用事件

鼠標(biāo)事件：

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

鍵盤事件：

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

窗口/文檔事件：

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

動(dòng)畫事件：

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

表單事件：

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

媒體事件：

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

移動(dòng)端事件：

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

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

HTML5 新事件：

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

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

除了這些常用事件外，還有一些標(biāo)簽獨(dú)有事件，比如 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

事件綁定

見(jiàn)過(guò)常用事件之后，再聊聊 JS 綁定事件的幾種方式，以 click 事件為例。

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

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

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

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

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

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

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

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

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

取消綁定

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

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

再?gòu)?fù)雜一點(diǎn)，搞一個(gè)計(jì)數(shù)器，想限制多少次就限制多少，比如限制按鈕只能點(diǎn)擊五次：

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

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

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

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

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

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

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

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

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

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

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

AbortController 移除事件

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

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

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

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