addEventListener(), on(), onClick

addEventListener()는 DOM 요소에 이벤트 리스너를 추가하는 가장 표준적이고 강력한 방법입니다. 먼저 이 것을 자세히 보고, 다른 프레임웍에서는 어떻게 사용하는지 보겠습니다.

 

주로 아래와 같은 형태로 DOM 요소에 붙여 사용합니다. 

   addEventListener(type, listener);
   addEventListener(type, listener, options);
   addEventListener(type, listener, useCapture);

 type 

여기서 type 이라고 하는 것은 이벤트 대상에 따라 많은 종류가 있습니다. 필요 할때 MDN 싸이트를 통해서 길을 찾기를 권하며, 여기서는 mouse 등과 관련된 예시를 몇가지 하겠습니다. 

"click" : 클릭했을 때 ( PointerEvent 라는 객체 생성)

"dblclick" : 더블 클릭 했을 때 ( MouseEvent 객체 생성)

"mouseleave" : 마우스가 대상 element을 벗어 났을 때 ( MouseEvent 객체 생성)

"dragstart": 마우스가 드래그를 시작 했을 때 (Drag Event 객체 생성)

 

listener

여기의 listener 라고 하는 것은 이벤트가 발생할 때 실행될 콜백 함수입니다. 이 함수는 이벤트 객체를 인수로 받습니다. 흔히 e 또는 event 라고 사용하는 데, 정말로 많은 정보를 갖고 있습니다. 이 둘을 조합하여 보면 아래와 같은 형태로 사용을 하게되는 것입니다.

 

//html 요소 중 하나를 id가 myElement 라고 설정 (예, <div #myElement /> )
const element = document.getElementById('myElement');

element.addEventListener('click', function(event) {
    console.log('클릭 했음');
}
// 마우스로 대상을 클릭 할때마다 console에 "클릭 했음" 가 찍힘

 

options

여기서 options은 사용하지 않아도 함수(addEventListener) 작동에 지장을 주지 않지만 세밀한 조정을 위해 사용 할 수 있는 매개변수 입니다.

• capture: 이벤트가 캡처링 단계에서 발생해야 하는지를 지정합니다.
• passive: 이벤트 리스너가 preventDefault()를 호출하지 않는다는 것을 브라우저에 알려줍니다. 이는 스크롤 성능을 향상시킬 수 있습니다.
• once: 이벤트 리스너가 한 번만 실행된 후 자동으로 제거되도록 합니다.
• signal: AbortSignal 객체를 사용하여 이벤트 리스너를 중단시킬 수 있습니다.

옵션을 사용한 예를 보겠습니다.

const element = document.getElementById('myElement');

element.addEventListener('dragstart', function(event) {
    console.log('Drag started');
}, {
    capture: false,
    passive: true,
    once: true
});

 

useCapture

여기서 useCapture는 옵션으로 기본값은 false 입니다.  자손 EventTarget으로 이벤트가 전달되기 전에, 이 수신기가 먼저 발동돼야 함을 나타내는 불리언 값입니다.

 

유사한 onclick, onmouseover, onload 등의 이벤트 속성

const element = document.getElementById('myElement');
element.onclick = function(event) {
    console.log('Element clicked');
};

 

JQuery 에서는 addEventListener() 대신 on()을 사용

// JQuery 
$('#myElement').on('click', function(event) {
    console.log('Element clicked');
});

 

React.js 에서는 JSX 문법을 사용하여 이벤트를 처리 함

function MyComponent() {
    const handleClick = (event) => {
        console.log('Element clicked');
    };

    return (
        <button onClick={handleClick}>Click me</button>
    );
}