[WDB2022] DOM 이벤트
이벤트란 기본적으로 사용자가 특정 버튼을 클릭하거나 마우스를 올리거나, 드래그를 하거나, 뭔가 입력하거나 폼을 제출하는 등의 경우. 유저들이 하는 행동에 반응하는 작업, JavaScript 코드를 실행하는 방법
html inline 얘도 html에서 js dom에 속성으로 들어간다. 함수처럼 작용
<button onclick="alert('you clicked me!')"> click me </button> 따옴표 다루기 힘들다. 똑같은 기능 버튼 쓰려면 복사해야해
ondbclick 더블클릭
Js상에서
const btn = document.querySelector('#v2');
btn.onclick = function () {
console.log("YOUclick me!");
}
onmouseenter
function scream() {
constf
}
btn.onmouseenter = scream; 마우스가 핫스팟 안에 있을때?
한 줄일 지라도 함수로 넘겨야한다.
그렇지 않으면 명령어를 바로 실행한다.
요 방법 추천한다네
const button = document.querySelector('h1');
button.addEventListener('click', () => { (콜백함수라는데 콜백함수가 모니) 아래 설명
alert("You");
})
위에껀 중복해서 함수 못 넘겨줘, 다양한 옵션이 많다.
tasButton.addEventListener('click', twist, {once: true }) 처음 한 번 실행되고 이후 제거
* 콜백함수는 다른 함수의 인자로써 넘겨진 후 특정 이벤트에 의해 호출되는 함수. 이 때 함수는 포인터나 람다식 등으로 전달된다.
const h1s =document.querySelectorAll('h1');
for (let h1 of h1s) {
h1.addEventListener('click', colorize);
}
// general
function colorize()
this.style.backgroundColor = makeRandColor();
this.style.color = makeRandColor();
}h1태크 하나에 국한되지 않고 다양한 곳에서 사용 가능해진다 general하게 사용가능.
his가 안에 있을 때 아니면 이벤트 핸들러에 의해 발동된 콜백 안에서 사용될 때, 이 떄 this는 불러낸 주체를 참조한다.
const input = document.querySElecotr('input');
input.addEventListener('keydown', function (e) {
console.log(e.key) 환경에 따라 다르게 보임 q, ㅂ
console.log(e.code) 언제나 Q
})
tweetForm.addEventListener('submit', function (e) {
e.proventDefault();
const usernameInput = tweetForm.elements.username;
const tweetInput = tweetForm.elements.tweet;
addTweet(usernameInput.value, tweetInput.value)
usernameInput.value = '';
tweetInput.value = '';
});
const addTweet = (username, tweet) => {
const newTweet = document.createElement('li');
const bTag = document.createElement('b');
bTag.append(username);
newTweet.append(bTag);
newTweet.append(`- ${tweet}`);
tweetsContatiner.append(newTweet);
}
addEvent"istener
input 입력될때마다
change는 입력을 blur 할 떄만 발동, 그 입력을 떠날 떄마다.
-
<section onclick="alert('section clicked')">
<p onclick="alert('asd')">
이벤트 버를링으로 p클릭해도 외부 까지 발동됨
e.stopPropagation(); 으로 방지
이벤트 위임 부모 이벤트 물려받음 상속 비스무리한건가..
tweetsContatiner.addEventListener('click', function (e) {
e.target.nodeName === 'LI' && e.target.remove();
} target확인해