07-6イベントオブジェクト、イベント励起オブジェクト、デフォルトイベント

16214 ワード
JavaScript テキストリンク

キーボードイベント


keydown


キー押下時運転
キーボードまたはキーボード入力を押したまま実行

keypress


キー入力時に実行

keyup


キーボードのキーが落ちたときに実行
→keydownとkeypressはWebブラウザによってアジア文字(韓国語、中国語、日本語)の問題をうまく処理できず、一般的にkeyupを使って活動する.
document.addEventListener('DOMContentLoaded', () => {
  document.addEventListener('keydown', (event) => {
    document.body.innerHTML = `<h1>keydown ${event.code}</h1>`
    
  })
  document.addEventListener('keyup', () => {
    document.body.innerHTML = `<h1>keyup</h1>`
  })
})
実行結果

キーボード・キー・コードの使用

code:入力された鍵keyCode:入力キーを示す数字altKey:AltキーctrlKey:CTRLキーを押すかどうかshiftKey:Shiftキー

余剰文字数の出力(例)

<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>남은 글자 수 출력하기</title>
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const h1 = document.querySelector('h1')
      const textarea = document.querySelector('textarea')
    
      textarea.addEventListener('keyup', () => {
        h1.textContent = `글자 수: ${textarea.value.length}`
      })
    })
  </script>
</head>
<body>
  <h1>글자 수: 0</h1>
  <textarea></textarea>
</body>
実行結果

イベントオカレンスオブジェクト


場合によっては、イベントリスナー内で変数にアクセスできない場合があります.
コード規模が拡大するにつれて、イベントリスナーを外部に分離することが多くなり、event.currentTargetまたはthisキーワードを使用して問題を解決することができる.
textarea.addEventListener('keyup', () => {
  h1.textContent = `글자 수: ${textarea.value.length}`
})
textarea.addEventListener('keyup', (event) => {
  h1.textContent = `글자 수: ${event.currentTarget.value.length}`
})
textarea.addEventListener('keyup', function () {
  h1.textContent = `글자 수: ${this.value.length}`
})
第2の方法を多用する

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

event.preventDefault()メソッド
<head>
  <meta charset="UTF-8">
  <title>이벤트 막기</title>
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const a = document.querySelector('a')
      a.addEventListener('click', (event) => {
        event.preventDefault()
      })
      a.addEventListener('contextmenu', (event) => {
        event.preventDefault()
      })
    })
  </script>
</head>
<body>
  <a href='https://velog.io/@onezeun'>링크</a>
</body>
これではリンクをクリックしても移動しません.
インターネット上で非拡散保護を実施するためのコード
The NewWorld is a new world!!
jquery post乱符号問題utf-8 gbk