javascript : DOM - onclick, addEventListener

inline 작성

<button onclick="alert('clicked'); alert('stop click');"> click me </button>

• html 안에 script 코드를 작성하게 되며 일일이 작성해야 해서 불편하다.
• 작성할 때는 script 코드가 함수는 아니지만 DOM 에서는 onclick 항목에 함수처럼 등록된다.

onclick 함수 설정

• html

<button id="v2"> button 2 </button>
<h1> h1 </h1>
<script src="app.js"></script>

• js

<script>
const btn = document.querySelector('#v2');
btn.onclick = function () {
    console.log("clicked");
}

function scream() {
    console.log("aaaaaahhhhh");
    console.log("stop touching");
}

btn.onmouseenter = scream;

document.querySelector('h1').onclick = function () {
    alert('you clicked the h1');
}

document.querySelector('h1').onclick = () => {
    alert('you clicked the h1');
}
/* 함수를 간단하게 작성하는 것도 가능하다. */

/* document.querySelector('h1').onclick = alert('you clicked the h1'); */
/* 잘못된 코드 */

</script>

• chrome 개발자도구를 열어 콘솔창에 console.dir(btn) 을 입력해보면 button에 적용할 수 있는 DOM 이벤트 목록이 출력된다. 변수 뒤에 이 이벤트를 작성하여 사용할 수 있다.
• btn.onclick에 적용된 이름 없는 function이나 scream 과 같은 함수는 내가 직접 호출하는 것이 아니라 onclick, onmouseenter 이벤트로 전달하는 것이다. 그리고 사용자가 실제로 click, mouseenter를 했을 때 함수가 실행된다.
• 위처럼 한 개의 버튼에 여러가지 이벤트를 사용할 수 있다.
• 감지 이벤트는 button 태그 뿐만 아니라 h1 태그 등 어떤 DOM 요소에도 사용할 수 있다.
• 한 줄에 불과하더라도 실행될 코드는 함수로 감싸주어야 한다. 이벤트의 목적은 이벤트에 함수를 참조하도록 설정하는 것이지 함수를 바로 실행시키는 것이 아니기 때문이다.

addEventListener

• html

<button id="v3"> button 3 </button>
<button id="tas"> twist & shout </button>
<script src="app.js"></script>

• js

<script>
const btn3 = document.querySelector('#v3');
btn3.addEventListener('click', function(){
    alert('clicked');
})

btn3.addEventListener('click', () => {
    alert('clicked');
})

/* addEventListener를 사용해야 하는 이유 */

const tasButton = document.querySelector('#tas');

function twist(){
    console.log("twist");
}

function shout(){
    console.log("shout");
}

tasButton.onclick = twist;
tasButton.onclick = shout;

/* onclick은 한가지 설정만이 적용되어
twist는 실행되지 않고 shout만 실행된다. */

tasButton.addEventListener('click', twist);
tasButton.addEventListener('click', shout);

/* addEventListener를 사용하면 두가지 설정이 동시에 적용되고,
shout는 두번째로 적용된다. */

tasButton.addEventListener('click', twist, {once: true});
tasButton.addEventListener('click', shout);
/* addEventListener를 사용하면 다양한 옵션을 적용할 수 있다. */
/* once: true 옵션을 적용하면 처음 한 번만 실행된 다음,
addEventListener를 완전히 제거한다. 
즉 위 2줄을 작성하고 실행하면 twist는 한번만 실행되고 
shout는 계속 실행된다.
이벤트리스너가 많고 복잡한 앱의 경우에는 옵션을 통해
이벤트리스너를 관리할 수 있다. */
</script>