자바스크립트의 DOM 이벤트 분석(코드 포함)-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

자바스크립트의 DOM 이벤트 분석(코드 포함)

不言

Sep 04, 2018 am 10:20 AM

html javascript

어떤 이벤트인가요? 이벤트가 무슨 소용이 있나요? 이 기사에서는 JavaScript에서 DOM의 이벤트 분석을 공유하고 이벤트의 개념과 이벤트 사용법을 소개합니다.

이벤트

1. 이벤트란 무엇인가요

#🎜🎜 # 사용자가 HTML 페이지에서 버튼을 클릭하고 사용자 이름과 비밀번호를 입력하는 등의 프로그램 사용자 동작을 JS에 알립니다.

 <script>
        var button = document.getElementById('btn');
//        获取按钮元素
        button.onclick = function () {
//        事件绑定
            console.log('你已点了我');
        }
    </script>

로그인 후 복사

2. ##🎜🎜 #JS 함수는 지정된 이벤트와 연결되며 바인딩된 함수는 이벤트의 핸들이 됩니다. 이벤트가 시작되면 바인딩된 함수가 호출됩니다.
#🎜 🎜#
HTML 요소의 이벤트 속성

은 실제 등록 이벤트 함수를 나타냅니다이 방법은 HTML 구조와 효과적으로 분리되지 않으며 동작

<body>
<button onclick="mylove()" id="btn">按钮</button>
<script>
    function mylove() {
        console.log('你已点了我');
    }
</script>
</body>

로그인 후 복사

DOM 객체의 이벤트 속성

THML 페이지 요소에서 문서 객체 찾기 # 🎜🎜# 이를 통해 DOM 객체 본문 속성을 반환합니다. 다양한 등록 이벤트 기능 구현

<body>
<button id="btn">按钮</button>
<script>
    var btn = document.getElementById('btn');
    btn.onclick = mylove;
    function mylove() {
        console.log('你已点了我');
    }
</script>
</body>

로그인 후 복사

이벤트 리스너

#🎜 🎜#addEventLisener() 메소드를 사용하여 이를 호출합니다. 이 메소드는 해당 요소가 페이지에 대한 이벤트를 등록할 때 등록된 이벤트 요소를 참조합니다. attachmentEent() 메소드를 사용할 때. 페이지에 대한 이벤트를 등록하려면 등록된 이벤트가 아닌 Window 개체를 참조합니다.

body>
<button id="btn">按钮</button>
<script>
    var btn = document.getElementById('btn');
    btn.attachEvent('onclick',function () {
        console.log('XXX');
    })
    function bind(element,eventName, functionName) {
        if (element.addEventListener) {
            element.addEventListener()
        }
    }
</script>

</body>

로그인 후 복사

#🎜🎜 #3. 등록된 이벤트 제거

removeEventListener () 메소드에서 이 메소드를 호출하여 요소 제거 이벤트 리스너

<script>
    var qyc =document.getElementById('qyc');
    /*qyc.addEventListener('click',function () {
        console.log(this);//this指当前绑定事件的元素
    });*/
    /*qyc.attachEvent('onclick',function () {
        console.log(this);//this指当前环境的全局对象（Window对象）
    });*/
    bind(qyc,'click',function () {
        console.log(this);//在不同的浏览器中，this会有不同的表示
    });
    function bind(element, eventName, functionName) {
        if (element.addEventListener) {
        } else {
            element.attachEvent('on' + eventName, function () {
                functionName.call(element)

            });
        }
    }//此为IE8之前的版本兼容的解决方案
</script>
</body>

로그인 후 복사

4를 나타냅니다. 이벤트 이벤트 객체 은 등록된 요소 제거를 나타냅니다. IE8 이전 버전의

브라우저는 RemoveEventListener() 메서드

<body>
<button id="qyc">按钮</button>
<script>
    var qyc = document.getElementById('qyc');
    function mylove() {
        console.log('XXX');
    }
    qyc.addEventListener('click',mylove);
    qyc.addEventListener('click',function () {
        console.log('YYY');
    });
    qyc.removeEventListener('click',mylove);
    function unbind(element,eventName,functionName) {
        if (element.removeEventListener) {
            element.removeEventListener(eventName, functionName);
        }else {
            element.detachEvent('on' + eventName, functionName);
        }
    }
</script>
</body>

로그인 후 복사

5 , 대상 가져오기

#🎜🎜를 지원하지 않습니다. #The Event 객체는 현재 이벤트를 트리거한 HTML 요소를 가져오기 위한 target 속성을 제공합니다The Event 객체는 현재 이벤트를 등록한 HTML 요소를 가져오기 위한 currentTarget 속성을 제공합니다#🎜🎜 #

<body>
<button id="qyc" onclick="mylove(event)">按钮</button>
<script>
    var qyc = document.getElementById('qyc');
    qyc.addEventListener('click',function (event) {
        console.log(event);
    });
    qyc.attachEvent('onclick',function () {
        console.log(window.event);
    });

    function bind(element,eventName, functipnName) {
        if (element.addEventListener){
            element.addEventListener(eventName,functipnName)
        } else {
          element.attachEvent('on' + eventName, function(){
             functipnName.call(element);
          });
        }
    }
</script>

로그인 후 복사

#🎜 🎜#6. 기본 동작 차단

기본값을 사용하는 대신

<style>
        ul {
           background-color: red;
        }
        #wl {
           background-color: blue;
        }
        a {
           background-color: yellow;
        }
    </style>
</head>
<body>
<ul id="yx">
    <li>单机游戏</li>
    <li id="wl"><a href="#">网络游戏</a></li>
    <li>手机游戏</li>
</ul>
<script>
    var yx = document.getElementById('yx');
    yx.addEventListener('click',function (event) {
        console.log(event.target);
//        target属性-获取绑定当前事件目标元素
        console.log(event.currentTarget);
//        currentTarget属性-获取绑定当前事件目标元素
        console.log(this);
    });
    yx.attachEvent('onclick',function (event) {
//    IE8以下浏览器提供srcElement属性为target目标元素
        var e = event || window.event;
        console.log(e.srcElement);
    });
</script>
</body>

로그인 후 복사

7 마우스를 가져옵니다. #pageX 및 pageY는 페이지를 기준으로 합니다.

clientX 및 clientY는 가시 영역을 나타냅니다.
screenX 및 screenY는 현재 화면을 나타냅니다.

<body>
<a href="#">链接</a>
<script>
    var aElement = document.getElementsByName('a');
    /*aElement.addEventListener('click',function(event){
        event.preventDefault();// 阻止默认行为
    });*/
    
    aElement.onclick = function (event) {
        event.preventDefault();
        return false;

    }
    aElement.attachEvent('onclick',function (event) {
        var e = event || window.event;
        e.returnValue = false;
    })
</script>
</body>

로그인 후 복사

#🎜 🎜#

8. 이벤트 흐름

<body>
<script>
    var html = document.documentElement;
    html.addEventListener('click',function(event){
        console.log(event.pageX, event.pageY);
        // 鼠标坐标值相对于当前HTML页面
        console.log(event.clientX, event.clientY);
        // 鼠标坐标值相对于当前可视区域
        console.log(event.screenX, event.screenY);
        // 鼠标坐标值相对于当前屏幕的

        // 鼠标坐标值只能获取，不能设置
    });

</script>
</body>

로그인 후 복사

9. 이벤트 위임

많은 수의 HTML 요소가 동일한 이벤트를 등록하고 이벤트 핸들 논리 보안은 동일하므로 페이지 속도가 감소하지만 이벤트 흐름에서는 이러한 HTML 요소가 상위 요소에 이벤트를 등록하는 것을 허용하지 않습니다. 🎜#JS DOM 이벤트 모델 분석#🎜🎜 #

javascript_javascript 기술의 DOM 이벤트 이해

#🎜 🎜#

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

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.