이 기사에서는 JavaScript의 이벤트 흐름에 대한 간략한 분석을 소개합니다. 필요한 참조 가치가 있습니다.

이벤트는 일반적으로 함수와 함께 사용되므로 함수 실행은 발생하는 이벤트에 의해 구동될 수 있습니다. 이벤트는 JavaScript로 감지할 수 있는 동작입니다.

Binding events#🎜 🎜#

먼저 이벤트를 바인딩해야 합니다. 바인딩 이벤트에는 세 가지 유형이 있습니다

1）在DOM元素中直接绑定，我们可以在DOM元素上绑定onclick、onmouseover、onmouseout、onmousedown、onmouseup、ondblclick、onkeydown、onkeypress、onkeyup等等

只可以执行一次 多次使用会跟随文档流所覆盖
   <p></p>
     <script>
       var box1=document.getElementById("box1");
        box1.onclick=function(){
            alert("你瞅啥")
        }
        box1.onclick=function(){
            alert("瞅你咋地")
        }
       </script>
     只弹出一个 瞅你咋地 你瞅啥被覆盖

로그인 후 복사

2) JavaScript 코드에서 이벤트를 바인딩할 수 있습니다(예: 스크립트 태그 내). JavaScript 코드를 HTML 태그와 분리하여 문서 구조가 명확하고 관리 및 개발이 쉽습니다.

<p></p>
<script>
  var box1=document.getElementById("box1");
box1.onclick = function () {
            alert("不服就干");
        }
        </script>

로그인 후 복사

3) 이벤트 수신을 사용하여 이벤트 바인딩

이벤트를 바인딩하는 또 다른 방법은 다음을 사용하는 것입니다. addEventListener() 또는 이벤트 수신 함수를 바인딩하는 attachmentEvent()

   <p></p>
   <script>
  var box1=document.getElementById("box1");
  box1.addEventListener("click",function(){
            alert("再瞅个试试")
        },false)
        //默认值为false 可以省略不写

        box1.addEventListener("click",function(){
            alert("试试就试试")
        }) //默认值为false 可以省略不写
        </script>
        两个都可以正常弹出 跟随文档流执行

로그인 후 복사

이벤트 흐름 프로세스

버블 캡처

DOM 표준은 해당 이벤트 흐름을 규정합니다. 이벤트 캡처 단계, 대상 단계 및 이벤트 버블링 단계의 세 단계가 포함됩니다.

이벤트 흐름 캡처: 이벤트 전파는 가장 구체적인 이벤트 대상에서 가장 구체적인 이벤트 대상으로 진행됩니다. 즉, 외부에서 내부로.

버블형 이벤트 흐름: 이벤트 전파는 가장 구체적인 이벤트 대상에서 가장 덜 구체적인 이벤트 대상으로 진행됩니다. 즉, 내부에서 외부로

자바스크립트의 이벤트 흐름 내용에 대한 간략한 분석

我们有以下代码 点击box3的时候 跟随자바스크립트의 이벤트 흐름 내용에 대한 간략한 분석 捕获 冒泡

    <p>box1
        </p><p>box2
            </p><p>box3</p>
        
    

<script>
    var box1=document.getElementById("box1");
    var box2=document.getElementById("box2");
    var box3=document.getElementById("box3");
    box1.addEventListener("click", function () {
        console.log("捕获box1")
    }, true)
    box2.addEventListener("click", function () {
        console.log("捕获box2")
    }, true)
    box3.addEventListener("click", function () {
        console.log("捕获box3")
    }, true)

    box1.addEventListener("click", function () {
        console.log("冒泡box1")
    }, false)
    box3.addEventListener("click", function () {
        console.log("冒泡box3")
    }, false)
    box2.addEventListener("click", function () {
        console.log("冒泡box2")
    }, false)

</script>

로그인 후 복사

대상 단계에 있을 때, 즉 box3을 클릭했을 때 이 기사에서 버블을 작성하면 캡처는 문서 흐름

의 실행을 따르므로 먼저 버블링된 다음 캡처됩니다. 다음과 같이 주의해야 합니다.
# 🎜🎜# 자바스크립트의 이벤트 흐름 내용에 대한 간략한 분석 #🎜🎜 #

사진과 같이 출력 순서는 글 쓰는 순서와 관련이 있습니다

자바스크립트의 이벤트 흐름 내용에 대한 간략한 분석 이벤트 위임
#🎜🎜 #이벤트 위임이란 무엇입니까:

이벤트 위임 — —이벤트를 상위 요소에 바인딩하여 하위 요소의 버블링 이벤트를 모니터링하고 해당 이벤트가 어떤 하위 요소인지 확인합니다.

이벤트 위임 3부작: #🎜🎜 #1단계: 상위 요소에 이벤트 바인딩

ul 요소에 바인딩 이벤트 추가, addEventListener를 통해 클릭 이벤트 클릭에 바인딩 추가

2단계: 하위 버블링 이벤트 수신 -element
여기서 기본값은 버블링입니다. 하위 요소 li를 클릭하면 위쪽으로 버블링됩니다.
3단계: 이벤트가 어떤 하위 요소인지 찾기
익명 콜백 함수를 통해 이벤트 개체를 받습니다. 알림으로 확인해보세요

    <p>
        </p>

로그인 후 복사

이벤트 차단 자바스크립트의 이벤트 흐름 내용에 대한 간략한 분석 # 🎜🎜#

버블링 차단

#🎜🎜 #

버블링 이벤트는 원하지 않으면 버블링이 발생할 수 있으므로 위에 썼습니다. 이 효과를 사용하면 막을 수 있는 방법이 없을까요? 대답은 '예'입니다. 코드를 직접 보면 더 명확하게 이해할 수 있습니다. 두 번째 클릭하면 box1만 팝업되어 box2의 두 번째 버블링을 방지합니다

#🎜🎜 #

웹페이지를 마우스 오른쪽 버튼으로 클릭하면 상자가 표시되나요? 여기서 스크린샷을 찍으면 표시되지 않습니다. 새로고침, 붙여넣기, 복사, 잘라내기 등의 버튼이 브라우저의 기본 오른쪽 클릭 이벤트입니다. 차단하세요.

    <p>
        </p>
    

<script>
    var box1 = document.getElementById("box1");
    var box2 = document.getElementById("box2");
    box1.addEventListener("click", function () {
        alert("我是第box1")
    })
    box2.addEventListener("click", clickStop)
    //设置函数 阻止box2冒泡事件 当点击第二次时 阻止冒泡事件
    var num = 0;
    function clickStop() {
        if (num >= 1) {
            box2.addEventListener(clickStop)
        } else {
            alert("我是box2");
            num++;
        }
    }
</script>

로그인 후 복사

관심이 있으시면 직접 제작해 드릴 수도 있습니다