JS=>イベントオブジェクト

7202 ワード
イベントオブジェクト テキストリンク

アクティブなオブジェクトとは?


ユーザ入力(onclick、onkeyup、onscrollなど)をトリガするイベント情報を含むオブジェクト.
イベント・オブジェクトの例
<body>
 <button>아메리카노</button>
 <button>카페라떼</button>
  <script>
    let menus = document.querySelectorAll("button"); //모든 버튼을 가져옵니다.
    let btnAmericano = menus[0]; // menus의 첫번째 엘리먼트 // 아메리카노 버튼
    let btnCaffelatte = menus[1]; // menus의 두번째 엘리먼트 // 카페라떼 버튼
<br>
    btnAmericano.onclick = handleClick; 
    btnCaffelatte.onclick = handleClick; 
    // onclick에 이벤트 핸들러 함수를 할당할 때는 함수 실행 자체를 할당하면 안되고 해당 함수 이름만 할당
<br>
    function handleClick(event) {
    let currentMenu = event.target.textContent 
    // 클릭된 이벤트 객체의 textContent를 currentMenu에 할당
    console.log(currentMenu + "를 클릭하셨습니다."); // 클릭하면 콘솔에 찍힘
}
  </script>
</body>

event.targetに撮られたのは何ですか?
    function handleClick(event) {
    console.log(event.target); 
    // <button>아메리카노</button> or button>아메리카노</button>
}

onclick VS addEventListener


次の例ではmenu 1関数は機能しません.menu 2を作成すると、menu 1は動作しません.すなわち,onclickイベントでは複数のイベントを同時に発生させることはできない.
let obj = document.getElementById('coffee');
let menu1 = () => {
    alert("Americano");
};
let menu2 = () => {
    alert("Caferatte");
};
obj.onclick = menu1;
obj.onclick = menu2;
}
次のaddEventListener関数menu 1とmenu 2は両方とも動作します.
つまり、[発生]をクリックして複数のイベントを有効にする場合は、addEventListenerを使用します.
obj.addEventListener('click', menu1);
obj.addEventListener('click', menu2);
ライフサイクル(クラスと関数)
SqlServerメモリボトルネック分析--SQLServer:Buffer Manager