Heim  >  Artikel  >  Web-Frontend  >  Es gibt verschiedene Möglichkeiten, Ereignisse zu Elementen in Javascript hinzuzufügen

Es gibt verschiedene Möglichkeiten, Ereignisse zu Elementen in Javascript hinzuzufügen

醉折花枝作酒筹
醉折花枝作酒筹Original
2021-06-11 18:00:393071Durchsuche

Javascript bietet drei Möglichkeiten, Ereignisse zu Elementen hinzuzufügen: 1. Bindung direkt im HTML-Tag; 2. Bindung nach Erhalt des entsprechenden Dom-Elements in js; 3. Verwendung von addEventListener in js, um die Bindung zu implementieren.

Es gibt verschiedene Möglichkeiten, Ereignisse zu Elementen in Javascript hinzuzufügen

Die Betriebsumgebung dieses Tutorials: Windows 7-System, JavaScript-Version 1.8.5, Dell G3-Computer.

1. Binden Sie das entsprechende dom-Element in js ein.

3. Verwenden Sie addEventListener(), um die Bindung zu implementieren :

<!-- 以下为给dom元素绑定js事件的三种方法 -->

    <!-- 1--html内直接绑定 -->
    <input type="button" id="btn0" onclick="alert(&#39;执行了html绑定的方法&#39;)" value="html中绑定"></input>
    <!-- 2--使用js绑定 -->
    <input type="button" id="btn1" value="js绑定">
    <!-- 3--使用addEventListener绑定 -->
    <input type="button" id="btn2" value="addEventListener绑定"></input>

    <script>
        //********js绑定事件的js代码*********
        let button1 = document.getElementById("btn1")
        button1.onclick = function() { console.log("执行了js绑定的事件") }
        //将覆盖之前绑定的onclick事件
        button1.onclick = function() { console.log("执行了js绑定的第二个事件") }


        //*********addEventListener绑定的js代码*********
        let button2 = document.getElementById("btn2")
        //使用addEventListener()可为一个元素绑定多个事件
        button2.addEventListener("mouseover", func1, false)
        button2.addEventListener("click", func2, false)
        button2.addEventListener("click", func3, false)
        function func1() {
            console.log(button2)
        }
        function func2() {
            console.log(Date())
        }
        function func3() {
            console.log("---------------")
        }
        //使用removeEventListener(event,function)移除事件
        // button2.removeEventListener("mouseover", func1)
    </script>

【Empfohlenes Lernen:

Javascript-Tutorial für Fortgeschrittene

Das obige ist der detaillierte Inhalt vonEs gibt verschiedene Möglichkeiten, Ereignisse zu Elementen in Javascript hinzuzufügen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn