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

이벤트 객체, 이벤트 소스 객체, js에서의 이벤트 흐름 분석 및 이해

이벤트 객체(이벤트)

• 이벤트란 : 이벤트란 js에서 발생할 수 있고 모니터링되는 모든 이벤트를 말합니다. as (마우스, 키보드, 브라우저 창 변경 등)

• 이벤트 객체(event)란 무엇입니까? 일반인의 용어로는 이벤트에 대한 다양한 정보를 기록하는 객체입니다.
  여기서 주목해야 할 점은 이벤트 개체가 IE 이외의 브라우저에서는 이벤트이지만 브라우저가 아닌 경우에는 window.event입니다.

btn.onclick = function(event){let e = event || window.event}

이벤트 소스입니다. object

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

• fireFox에서는 event.srcElement입니다
• IE에서는 event.target입니다
  호환되는 쓰기 방법은 이벤트 객체

이벤트 흐름

이벤트 흐름을 참조하세요. 크게 2가지로 나누어집니다: 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 = function(){
                console.log("i")
            }
        }

이벤트 위임을 사용하는 방법은

let oUl = document.querySelector("ul")
  oUl.onclick = function(event){
            let e = event || window.event
            console.log(e.target.innerHTML)
        }

• 장점
• 성능 향상, 모든 요소를 ​​반복할 필요가 없습니다. 결정된 사건을 하나씩 묶는 것입니다.
• 이벤트를 다시 바인딩하지 않고도 유연하고 새로운 요소를 동적으로 생성할 수 있습니다.

이벤트 버블링 방지 및 기본 이벤트 차단

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

***일부 이벤트에는 버블링 연산이 필요하지 않습니다

function stopBubble(event){
    var e = event||window.event //事件对象兼容写法
    e.stopProgation() ? e.stopProgation() : e.cancelBubble = true //IE兼容写法}

기본 이벤트 차단(호환 쓰기 방식) )

***a 태그와 마우스 오른쪽 버튼의 기본 점프 및 메뉴 이벤트 차단

function cancelHandle(event){
    var e = event||window.event
    e.preventDefault() ? e.preventDefault() : e.returnValue = false/*ie*/}

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

위 내용은 js의 이벤트 객체, 이벤트 소스 객체 및 이벤트 스트림에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!