홈페이지>웹 디자인 튜토리얼>자바스크립트 튜토리얼

js의 이벤트 객체, 이벤트 소스 객체 및 이벤트 스트림에 대한 자세한 설명

저자：Eve Cole 업데이트 시간：2022-08-09 08:57:32

js의 이벤트 객체, 이벤트 소스 객체, 이벤트 흐름 분석은

이벤트 객체(이벤트)를 이해합니다.

  • 이벤트란 무엇입니까? 이벤트는 js에서 발생할 수 있고 모니터링되는 모든 이벤트를 나타냅니다. 예를 들어 마우스, 키보드, 브라우저 창 변경 등이 있습니다.

  • 이벤트 객체(event)란 : 쉽게 말하면, 이벤트에 대한 다양한 정보를 기록하는 객체입니다.
    여기서 주목해야 할 점은 이벤트 객체에 호환성 문제가 있다는 점입니다. IE 이외의 브라우저에서는 이벤트이지만 브라우저가 아닌 경우에는 window.event입니다.

 btn.onclick = function(event){let e = 이벤트 ||
이벤트 소스 객체

간단히 말하면 이벤트가 발생한 특정 개체를 의미하며, 요소 요소의 경우 이벤트 소스 개체는 클릭한 요소를 의미합니다. 브라우저 호환성 문제도 있습니다.

  • fireFox에서는 event.srcElement입니다.
  • IE에서는 event.target입니다.
    호환 가능한 작성 방법은 이벤트 객체를 참조합니다.

이벤트 스트림

이벤트 흐름은 크게 1. 캡처 이벤트 2. 버블링 이벤트의 두 가지 범주로 나누어집니다. 트리거링 순서는 먼저 캡처한 다음 버블링하는 것입니다. 그러나 세분화하면 버블링 단계가 캡처된 후 대상 단계가 있게 됩니다. 구체적으로 수행할 작업 단계를 나타내는 DOM 요소입니다.

이벤트 캡처

최상위 노드가 먼저 이벤트를 수신한 후 이를 특정 노드로 하향 전파합니다. 예: 사용자가 p 요소를 클릭하고 이벤트 캡처를 사용하면 document>htm>body>p 순서로 클릭 이벤트가 전파됩니다. 전송 방식은 외부에서 내부로입니다.

버블링 이벤트

캡처 이벤트와 달리 사용자가 p를 클릭하면 p>body>html이라는 상위 항목으로 전달됩니다. ***이 기능은 이벤트 위임에 자주 사용되기 때문입니다.

이벤트 위임

모든 하위 요소에 의해 트리거되는 동일한 이벤트를 상위 요소에 바인딩하여 DOM 작업을 줄이고 성능을 향상시킬 수 있습니다. 구체적인 사용 방법은 이벤트 소스 객체 방식을 사용하는 것입니다.

 <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>

클릭 이벤트를 li에 바인딩하기 위해 일반적으로 우리의 접근 방식은 클릭 이벤트를 li에 반복하는 것입니다.

 let oLi = document.querySelectorAll("li")
 for(let i; i < oLi.length; i++){
            oLi[i].onclick = 함수(){
                console.log("i")
            }
        }

이벤트 위임을 사용하는 방법은 다음과 같습니다.

 let oUl = document.querySelector("ul")
  oUl.onclick = 함수(이벤트){
            e = 이벤트 ||
            console.log(e.target.innerHTML)
        }
  • 이점
  • 성능이 향상되어 이벤트를 하나씩 바인딩하기 위해 모든 요소를 ​​반복할 필요가 없습니다.
  • 이벤트를 다시 바인딩하지 않고도 유연하고 새로운 요소를 동적으로 생성할 수 있습니다.
이벤트 버블링 방지 및 기본 이벤트 차단

이벤트 버블링 방지 연산(호환성 작성)

***일부 이벤트에는 버블링 작업이 필요하지 않습니다.

 함수 stopBubble(이벤트){
    var e = event||window.event //이벤트 객체 호환 쓰기 방법 e.stopProgation() ? e.stopProgation() : e.cancelBubble = true //IE 호환 쓰기 방법}

기본 이벤트 차단(호환 가능한 쓰기 방법)

***태그와 마우스 오른쪽 버튼 기본 점프 및 메뉴 이벤트를 차단합니다.

 함수 cancelHandle(이벤트){
    var e = 이벤트||window.event
    e.preventDefault() ? e.preventDefault() : e.returnValue = false/*ie*/}

관련 권장사항: [JavaScript 비디오 튜토리얼]

위 내용은 js의 이벤트 객체, 이벤트 소스 객체, 이벤트 스트림에 대한 자세한 설명입니다. 자세한 내용은 PHP 중국어 사이트의 다른 관련 글을 참고해주세요!

관련 기사