Event analysis of DOM in javascript (with code)

What is the event? What's the use of events? This article will share with you the event analysis of DOM in JavaScript, and introduce the concept of events and the usage of events.

Event

##1. What is the event

Let JS know the user behavior of the program, such as the user clicking on HTML A certain button on the page and the user inputting the user name and password

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

2. Register eventThe JS function is associated with the specified event, and the bound function becomes the event's When the handle
event is fired, the bound function will be called

The event attribute of the HTML element

represents the actual registration event function

This method does not effectively separate the structure and behavior of HTML

<button>按钮</button>
<script>
    function mylove() {
        console.log(&#39;你已点了我&#39;);
    }
</script>

Event attributes of the DOM object

Locate the Document object in THML page element

and returns the DOM object body attribute, through which various registration event functions are implemented

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

Event listener

to addEvantLisener() method, calling this method means that the element adds an event listener

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

The above is the detailed content of Event analysis of DOM in javascript (with code). For more information, please follow other related articles on the PHP Chinese website!