JavaScript #5

3134 ワード
JavaScript テキストリンク
210802
JavaScript #5

イベントの聴取方法


ex) click event
1. title.addEventListener(「click」、関数名)->addEventListener()clickをスキップ
2. title.onclick=関数名
同じ機能です.
  • window event
    • -resize evnet
    const h1 = document.querySelector("div.hello h1")

function handleh1Click(){
  h1.style.color = "blue"
}

function handleMouseEnter(){
  h1.innerText = "Mouse is here"
}

function handleMouseLeave(){
  h1.innerText = "Mouse is gone"
}

function handleWindowResize(){
  document.body.style.backgroundColor = "green"
}


h1.addEventListener("click",handleh1Click)
h1.addEventListener("mouseenter",handleMouseEnter)
h1.addEventListener("mouseleave",handleMouseLeave)

window.addEventListener("resize",handleWindowResize)
    resizeで背景色を変更する

  • アクセス
    bodyは特別なdocumentbodyのように持ってきてもいいです
    documentのbody、head、titleなどが重要なので、このように存在します.
    他の要素はquerySelectorまたはgetElementByIdで検索する必要があります.
    • 他のイベントを見て
    -copy
    window.addEventListener("copy",handleCopy)
    function handleCopy(){
  alert("copier!!!")
}
    コピー操作時に警告ウィンドウが表示されます

    -offline,online
    const h1 = document.querySelector("div.hello h1")

function handleh1Click(){
  h1.style.color = "blue"
}

function handleMouseEnter(){
  h1.innerText = "Mouse is here"
}

function handleMouseLeave(){
  h1.innerText = "Mouse is gone"
}

function handleWindowResize(){
  document.body.style.backgroundColor = "green"
}

function handleCopy(){
  alert("copier!!!")
}

function handleOffline(){
  alert("NO WIFI...")
}

function handleOnline(){
  alert("WIFI YES!")
}

h1.addEventListener("click",handleh1Click)
h1.addEventListener("mouseenter",handleMouseEnter)
h1.addEventListener("mouseleave",handleMouseLeave)

window.addEventListener("resize",handleWindowResize)
window.addEventListener("copy",handleCopy)
window.addEventListener("offline",handleOffline)
window.addEventListener("online",handleOnline)
    Windowsはoff/onlineをチェックして警告ウィンドウを発行します.


    同様に、複数のeventまたは他の要素を検索して使用することができる.
    https://developer.mozilla.org/ko/docs/Web/API/Window
    最終的にエレメントがeventlistener->eventを追加すると、反応するパターンが繰り返されます.
    リファレンス
    https://nomadcoders.co/javascript-for-beginners/lectures/2896
    『ゼロから学ぶSwift』学習ノート(Day 27)——オプションタイプ
    毎日5分コード「Arrow Function」