AddEventListener가 필요한 이유는 무엇입니까?
클립을 살펴 보겠습니다.
HTML 코드
<div id = "box"> 쫓는 꿈 </div>
on과 함께 코드
window.onload = function () {var box = document.getElementById ( "box"); box.onclick = function () {console.log ( "i am box1"); } box.onclick = function () {box.style.fontsize = "18px"; Console.log ( "I Am Box2"); }} 실행 결과 : "I Am Box2"나는 그것을 보았습니다. 두 번째 Onclick은 첫 번째 Onclick을 덮어 씁니다. 대부분의 경우 우리는 원하는 결과를 완성하기 위해 사용할 수 있지만 때로는 여러 동일한 이벤트를 실행해야합니다. 우리가 원하는 것을 완성하기 위해 사용할 수 없다면 추측 할 필요가 없습니다. 당신은 알아야합니다! addeventListener는 동일한 이벤트를 여러 번 바인딩 할 수 있으며 이전 이벤트를 덮어 쓰지 않습니다.
addeventListener가있는 코드
window.onload = function () {var box = document.getElementById ( "box"); box.adeventListener ( "click", function () {console.log ( "i am box1");}) box.addeventListener ( "click", function () {console.log ( "i am box2");})} 실행 결과 : i am box2addeventListenert 메소드의 첫 번째 매개 변수는 이벤트 이름으로 채워집니다. 글을 쓸 필요가 없습니다. 두 번째 매개 변수는 함수 일 수 있습니다. 세 번째 매개 변수는 버블 스테이지 또는 캡처 스테이지에서 이벤트 핸들러의 프로세스를 나타냅니다. True가 캡처 스테이지의 처리를 나타내는 경우, False가 기포 단계의 처리를 나타내는 경우, 세 번째 매개 변수를 생략 할 수 있습니다. 대부분의 경우 세 번째 매개 변수를 사용할 필요가 없습니다. 세 번째 매개 변수가 기록되지 않은 경우 기본 거짓은 false입니다.
세 번째 매개 변수 사용
때로는 이것이 사실입니다
<body>
<div id = "box">
<div id = "child"> </div>
</div>
</body>
상자에 클릭 이벤트를 추가하면 상자를 직접 클릭하면 문제가 없지만 자식 요소를 클릭하면 어떻게합니까? (실행 순서)
box.adeventListener ( "click", function () {console.log ( "box");}) child.addeventListener ( "click", function () {console.log ( "child")) 실행 결과 : child box즉, 기본 이벤트는 이벤트 기포 순서대로 수행됩니다.
세 번째 매개 변수가 true로 작성되면 이벤트 캡처 실행 순서로 수행됩니다.
box.adeventListener ( "click", function () {console.log ( "box");}, true) child.addeventListener ( "click", function () {console.log ( "hild");}) 실행 결과 : box child이벤트 버블 실행 프로세스 :
가장 구체적인 요소 (클릭 한 요소)에서 위로 버블 링을 시작하십시오. 위에서 우리의 사례를 받아들이고 그 순서는 다음과 같습니다. Child-> Box
이벤트 캡처 실행 프로세스 :
가장 구체적인 요소 (가장 바깥 쪽 상자)에서 내부로 버블 링을 시작하십시오. 우리의 사례를 위에서 생각하면 순서는 다음과 같습니다. Box-> Child
위의 기사는 AddeventListener와 ON의 차이점을 종합적으로 이해합니다. 나는 당신이 당신에게 참조를 줄 수 있기를 바랍니다. 그리고 당신이 wulin.com을 더 지원할 수 있기를 바랍니다.