JavaScript事件に関すること

14348 ワード

先端を選択します。 JavaScript

JavaScript事件に関すること
今日は紅ちゃんの本を復習して、事件の知識点を整理します.
イベント:ドキュメントまたはブラウザウィンドウで発生する特定のインタラクションの瞬間に、リスタまたは処理プログラムを使用してイベントを予約して、イベントが対応する論理コードを実行することができます.よくあるボタンのクリックイベントなどです.イベントフロー:ページでイベントを受信する順序を説明する概念.IEのイベントバースト、Netscape Communicatorのイベントキャプチャストリームの2つの種類があります.全体的には両方ともDOM構造に基づいている.IEのイベントのバースト:イベントは、最も具体的な要素によって受信され、その後、段階的に、あまり具体的でないノード(ドキュメント)イベントの獲得ストリームに伝播する:あまり具体的でないノード(ドキュメント)からイベントを受信し、段階的に、最も具体的な要素に伝達してイベントを受信する.


<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Documenttitle>
  head>
  <body>
    <ul>
      <li>li1li>
      <li>li2li>
    ul>
  body>
html>

上の栗をもってパッパと言います.li 2をクリックする時:

事件泡流:li->ul->body->document

イベントキャプチャストリーム:document->body->ul->li

DOMのイベントフローは三つの段階を含む.

イベント捕獲

目標取得

事件の泡が立ちました.
実際の目標は捕獲段階では事件を受信しないのか、それともその上の栗にとって事件はulで停止し、次の段階では「目標」の段階にあるため、事件はli 2で発生し、事件処理中に泡の一部と見なされ、その後、泡が発生する.
イベントハンドラ、つまりイベントの定義を見に来ました.

直接要素上にイベントを定義する

<input type="text" onchange="handleChange(event)" id="inputElem" />
function handleChange(event) {
	console.log('handleChange event', event)
}

addEventListenerとremoveEventListener

var inputElem = document.getElementById('inputElem')
inputElem.addEventListener(
        'change',
        function (event) {
          console.log('inputElem.addEventListener change', event)
        },
        false
      )

海油の一種

inputElem.onchange = function (event) {
	console.log('inputElem.onchange', event)
}

最後の一つはIEのatachEventとdetachEventの注意です.ここのイベントの役割領域はwindow海油です.change

ではありません.

inputElem.attachEvent('onchange', function(event){
	consoe.log('xxxx')
})

だから、ブラウザをまたぐ方法が来ました.

var EventUtil = {
        addHandler: function (element, type, handler) {
          if (element.addEventListener) {
            element.addEventListener(type, handler, false)
          } else if (element.attachEvent) {
            element.attachEvent('on' + type, handler)
          } else {
            element['on' + type] = handler
          }
        },
        removeHandle: function (element, type, handler) {
          if (element.removeEventListener) {
            element.removeEventListener(type, handler, false)
          } else if (element.detachEvent) {
            element.detachEvent('on' + type, handler)
          } else {
            element['on' + type] = null
          }
        },
      }

特にatachEventのonに注意します.

EventUtil.addHandler(inputElem, 'change', handleChange)

イベントオブジェクト:ブラウザはイベントハンドラにイベントオブジェクトを入力します.イベントハンドラの内部では、thisは常にcurrentTargetの値に等しく、targetはイベントを含む実際の目標です.

btnElem.onclick = function (event) {
        console.log(
          'btnElem.onclick',
          event,
          this === event.target, // true
          this === event.currentTarget // true
        )
      }

特定のイベントのデフォルトをブロック:

event.preventDefault()

イベントのさらなる捕獲または発泡をキャンセルします.

event.stopPropagation()

JavaScriptの4つの呼び出しモードとthisの例を紹介します.