Javascript:이벤트 편집하기 (부분)

==이벤트 델리게이션==
event delegation. 클릭이벤트가 일어날 때 매번 다양한 클릭이벤트를 정의하는 것을 막기 위해 사용한다.(for문으로 이벤트를 체크하기도 하지만, 성능에 부하가 걸린다.) 부모에게 걸어준다.

부모에게 걸어주어 클릭한 해당 객체가 무엇인지 구분한 후 명령을 실행한다.<syntaxhighlight lang="javascript">
const box = document.querySelector('.box');

function delegation(e){
    let target = e.target;  // 이벤트객체 e를 이용한 것. 어떤 것을 클릭했는지 알려준다.
    console.log(target);
    while(!target.getArribute('속성')){
        target = target.parentNode;  //찾는 속성이 없는 경우, 부모에서 속성을 찾는다.
        if(target.nodeName === 'BODY'){target = null; return;}  // 바디까지 올라가도 없으면 없음. 종료시켜준다.
    }
    if(target.matches('[속성명="값"]')){
        해당 버튼에 대한 명령
    }else if(target.matches('[속성명2="값2"]')){
        해당 버튼에 대한 명령
        target.classList.toggle('on');  // 실시간으로 좋아요 버튼을 활성화하는 등에 쓰인다.
}

window.addEventListener('click', delegation);
</syntaxhighlight>