[Javascript] Events Listener

Events Listener

---

addEventListener("event",function)

---

이벤트는 어떤 특정한 행위에 대한 것으로 특정 트리거가 발생되면 함수를 실행시킬 수 있게 해주는 javascript문법이다.

addEventListener() 함수로 이벤트를 넣어 줄 수 있다. "click" 말고도 hover, load 등 많은 이벤트들이 있으니 MDN을 참고 바란다.

https://developer.mozilla.org/ko/docs/Web/Events

이벤트 참조 | MDN

하나 주의해야 하는데 2번째 인자에서 함수를 넣어줄 때 "()" 를 붙이면 안된다. ()를 붙이는 거는 함수를 바로 실행시킨다는 의미이다. 

2번 째 인자에 바로 익명 함수로 작성해줘도 된다.

const h1 = document.getElementById("title")


function clickEvent() {
    alert("10")
}

h1.addEventListener("click", clickEvent)

// 다른 방법
h1.onclick=clickEvent

// 익명 함수
h1.addEventListener("click",function () {
	alert("10")
})

태그 안에도 이벤트 리스너를 등록할 수 있는데 속성에 "on"으로 시작하는 것 들은 모두 이벤트이다. 

<h1 onclick="alert(1)">

---

❗ 저작권 및 참고

https://icons8.com/icon/TZ69zUw6d3Lu/right

Right icon in Flaticons Lineal Color Style

https://icons8.com/icon/NXAECrAk3Vkg/code

Code icon in Pastel Style

https://icons8.com/icon/48250/암호

Code icon in Gradient Line Style