Ereignisanalyse von DOM in Javascript (mit Code)-js-Tutorial-php.cn

Was ist die Veranstaltung? Was nützen Events? In diesem Artikel erfahren Sie mehr über die Ereignisanalyse von DOM in JavaScript und stellen das Konzept von Ereignissen und die Verwendung von Ereignissen vor.

Ereignis

1. Was ist ein Ereignis?

Teilen Sie JS das Benutzerverhalten des Programms mit, z wenn der Benutzer auf die HTML-A-Schaltfläche auf der Seite klickt und der Benutzer den Benutzernamen und das Passwort eingibt und andere Vorgänge ausführt

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

Nach dem Login kopieren

2. Die JS-Funktion wird mit dem angegebenen Ereignis verknüpft , und die gebundene Funktion wird zum Ereignis. Wenn das Handle -Ereignis ausgelöst wird, wird die gebundene Funktion aufgerufen

Das Ereignisattribut des HTML-Elements stellt die eigentliche Registrierungsereignisfunktion dar

Diese Methode trennt sich nicht effektiv von der HTML-Struktur und dem HTML-Verhalten

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

Nach dem Login kopieren

Das Ereignisattribut des DOM-ObjektsSuchen Sie das Document-Objekt im THML-Seitenelement

und geben Sie das DOM-Objektkörperattribut zurück, über das verschiedene Registrierungsereignisfunktionen implementiert werden

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

Nach dem Login kopieren

Ereignis-Listener Rufen Sie zur Methode addEventLisener() diese Methode auf, um anzugeben, dass das Element einen Ereignis-Listener hinzufügt

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>

Nach dem Login kopieren

This im Event-Listener verwendet die Methode addEventListener(). Beim Registrieren eines Ereignisses für eine Seite bezieht sich dies auf das registrierte Ereigniselement

Wenn die Methode attachmentEent() zum Registrieren eines Ereignisses für die Seite verwendet wird, bezieht sich dies zum Window-Objekt, nicht zum registrierten Ereignis

<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>

Nach dem Login kopieren

3. Entfernen Sie die Methode Register event

removeEventListener(), rufen Sie diese Methode auf, um den Ereignis-Listener zum Entfernen von Elementen

anzugeben

<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>

Nach dem Login kopieren

4. Ereignisobjekt

Browser, die das Entfernen registrierter Ereignisse vor IE8 anzeigen, unterstützen die Methode „removeEventListener()“ nicht

<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>

Nach dem Login kopieren

5. Holen Sie sich das Ziel

Das Ereignisereignisobjekt stellt das Zielattribut bereit und ruft das HTML-Element ab, das das aktuelle Ereignis ausgelöst hat.

Das Ereignisereignisobjekt stellt das Attribut currentTarget bereit und ruft das registrierte HTML-Element ab das aktuelle Ereignis

<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>

Nach dem Login kopieren

6. Verhindern Sie das Standardverhalten

Nein. Verwenden Sie die Standardeinstellung, aber

<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>

Nach dem Login kopieren

Holen Sie sich die Maus

pageX und pageY repräsentieren den sichtbaren Bereich

screenX relativ zur Seite und screenY repräsentieren

<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>

Nach dem Login kopieren

auf dem aktuellen Bildschirm 8. Ereignisfluss

<style>
        #q1 {
            width: 200px;
            height: 200px;
            background-color: red;
            padding: 50px;
        }
        #q2 {
            width: 100px;
            height: 100px;
            background-color: yellow;
            padding: 50px;
        }
        #q3 {
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
<div id="q1">
    <div id="q2">
        <div id="q3"></div>
    </div>
</div>
<script>
    var q1 = document.getElementById('q1');
    q1.addEventListener('click',function(){
        console.log('这是d1... ...');
    }, false);
    var q2 = document.getElementById('q2');
    q2.addEventListener('click',function(){
        console.log('这是d2... ...');
    }, false);
    var q3 = document.getElementById('q3');
    q3.addEventListener('click',function(event){
        console.log('这是q3... ...');
        event.stopPropagation();
    }, false);
</script>
</body>

Nach dem Login kopieren

9. Ereignisdelegation

Viele HTML-Elemente, die dasselbe Ereignis registrieren, und die Sicherheit der Ereignishandle-Logik sind gleich, führen dazu, dass die Seitengeschwindigkeit abnimmt, wenn das Ereignis auftritt flow erlaubt diesen HTML-Elementen nicht, Ereignisse mit dem übergeordneten Element zu registrieren

<body>
<div id="qh">
    <button id="qyc1">按钮</button>
    <button id="qyc2">按钮</button>
    <button id="qyc3">按钮</button>
</div>
<script>
    var qyc1 = document.getElementById('qyc1');
    qyc1.addEventListener('click',function(){
        console.log('这是个按钮');
    });
    var qyc2 = document.getElementById('qyc2');
    qyc2.addEventListener('click',function(){
        console.log('这是个按钮');
    });
    var qyc3 = document.getElementById('qyc3');
    qyc3.addEventListener('click',function(){
        console.log('这是个按钮');
    });
    var qh = document.getElementById('qh');
//    不把事件绑定给指定元素，绑定给共同父级和祖先元素
    qh.addEventListener('click',function (event) {
        var target = event.target;//触发事件目标元素
        if(targe.nodeName === 'BUTTON') {
           console.log('这是个按钮');
        }
    })
</script>
</body>

Nach dem Login kopieren

Verwandte Empfehlungen:

Analyse des DOM-Ereignismodells von JS

DOM-Ereignisse in Javascript verstehen_Javascript-Kenntnisse

Das obige ist der detaillierte Inhalt vonEreignisanalyse von DOM in Javascript (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!