집 > 기사 > 웹 프론트엔드 > addEventListener와 on의 차이점에 대한 자세한 설명

addEventListener와 on의 차이점에 대한 자세한 설명

黄舟원래의: 2017-12-04 15:25:032376검색

이전 기사에서는 JavaScript에서 addEventListener를 사용하는 방법을 소개했습니다. 모두가 addEventListener에 대해 더 잘 이해하고 있을 것이라 생각하므로 오늘은 계속해서 addEventListener와 on의 차이점을 소개하겠습니다!

addEventListener가 왜 필요한가요?

먼저 스니펫을 살펴보겠습니다.

html code

<div id="box">追梦子</div>

On 코드 사용

window.onload = function(){
    var box = document.getElementById("box");
    box.onclick = function(){
        console.log("我是box1");
    }
    box.onclick = function(){
        box.style.fontSize = "18px";
        console.log("我是box2");
    }
}
　　　　　运行结果：“我是box2”

보세요. 두 번째 onclick은 첫 번째 onclick을 다루지만 대부분의 경우 on을 사용하여 원하는 결과를 완성할 수 있습니다. 하지만 때로는 동일한 events를 여러 개 실행해야 할 때도 있습니다. 물론 on으로 원하는 것을 달성할 수 없다면 추측할 필요가 없습니다. addEventListener는 동일한 이벤트를 여러 번 바인딩할 수 있으며 이전 이벤트를 덮어쓰지 않습니다.

addEventListener의 코드를 사용하세요

window.onload = function(){
    var box = document.getElementById("box");
    box.addEventListener("click",function(){
        console.log("我是box1");
    })
    box.addEventListener("click",function(){
        console.log("我是box2");
    })
}
　　　　运行结果：我是box1
　　　　　　　　　我是box2

addEventListenert 메소드의 첫 번째 매개변수는 이벤트 이름을 입력하는 것입니다. 두 번째 매개변수는 함수일 수 있습니다. 이벤트는 버블링 단계 또는 캡처 단계에서 처리됩니다. 처리 프로그램에서 true이면 캡처 단계 처리를 나타내고, false이면 버블링 단계 처리를 나타내며 세 번째 매개변수는 생략할 수 있으며 대부분의 경우 그럴 필요가 없습니다. 세 번째 매개변수를 쓰지 않으면 기본값은 false

세 번째 매개변수의 활용

가끔 이런 상황이 있습니다

<body>
　　<div id="box">
　　　　<div id="child"></div>
　　</div>
</body>

박스에 클릭 이벤트를 추가하면 상자를 직접 보면 문제가 없지만 하위 요소를 클릭하면 어떻게 실행되나요? (실행 순서)

box.addEventListener("click",function(){
    console.log("box");
})

child.addEventListener("click",function(){
    console.log("child");
})
　　执行的结果：
　　　　　　　　child
　　　　　　　　box

즉, 기본적으로 이벤트가 버블링되는 순서대로 이벤트가 실행됩니다.

세 번째 파라미터를 true로 쓰면 이벤트 캡쳐의 실행 순서를 따릅니다.

box.addEventListener("click",function(){
    console.log("box");
},true)

child.addEventListener("click",function(){
    console.log("child");
})
　　执行的结果：
　　　　　　　　box
　　　　　　　　child

이벤트 버블링 실행 프로세스:

　　　 가장 구체적인 요소(클릭한 요소)부터 시작하여 위쪽으로 버블링되기 시작합니다. 위의 경우를 고려하면 순서는 다음과 같습니다. child->box

이벤트 캡처 실행 프로세스:

　　　특정 요소가 가장 적은 요소(가장 바깥쪽 상자)에서 시작하여 안쪽으로 버블링합니다. 위의 경우 순서는 다음과 같습니다. box->child

요약:

addEventListener와 on의 차이점은 자세히 설명되어 있습니다. 예제 방법을 통해 친구들이 addEventListener 사용에 대해 더 잘 이해할 수 있었으면 좋겠습니다.

addEventListener와 on의 차이점에 대한 자세한 설명

관련 기사