>웹 프론트엔드 >JS 튜토리얼 >자바스크립트 버블링 이벤트 사용예(코드)

자바스크립트 버블링 이벤트 사용예(코드)

不言
不言앞으로
2018-10-27 15:20:341484검색

이 글은 JavaScript 버블링 이벤트의 사용 예(코드)를 제공합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

설명: 하위 요소와 상위 요소가 동일한 이벤트를 지원하는 경우 상위 이벤트가 트리거되면 하위 이벤트도 트리거되는 것을 이벤트 버블링이라고 합니다.

이벤트 버블링 취소: ev.cancelBubble = true

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
        body{
        background:yellow;}
        div{
        width:300px;
        height:300px;
        background:green;
        }
        </style>
    </head>
    <body  onclick="di()">
        <div onclick="ding()"></div>    
    </body >
    <script>
    function di(){
    alert(&#39;底层&#39;)
    
    }
    function ding(e){
    var ev = e|| event

// 取消事件冒泡,其实是阻止事件向下传递
            ev.cancelBubble = true
    alert(&#39;上层社会&#39;)
    }
    
    </script>

</html>

상단 div를 클릭하면 하단 이벤트도 트리거됩니다. 버블링을 취소하려면 다음이 필요합니다: ev.cancelBubble = true

자바스크립트 버블링 이벤트 사용예(코드)

위 내용은 자바스크립트 버블링 이벤트 사용예(코드)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
이 기사는 csdn.net에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제