DOM event binding

1. Event binding

DOM Many events are provided for developers to bind , In response to various operations , Enrich page interaction .

Want to trigger an event , You have to give it first DOM Node binding events , Provide event handlers .

2. Directly in HTML Provide events on

This way is to directly inline events in html In the code

<style> .box {
       width: 100px; height: 100px; background: green; } </style>

    <div class="box" onclick="alert(' I'm click events ')"></div>

Code in html Generate a green area in , Clicking this area will generate a page reminder , The picture is as follows

By setting HTML Of onclick attribute , You can bind click events , You can write simple JavaScript Code .

But we can see that this method has limitations , Write a lot of JavaScript The code must be unreasonable .

In the past, there was relatively little interaction between web pages , Will be in body Label binding onload event , That is, what you do after the page is loaded .

3. Set event handler properties

Set the binding event through the event handler property , You need to get DOM node .
The code is as follows

<style> .btn {
       border: 1px solid #4caf50; font-size: 22px; padding: 8px 12px; color: #4caf50; outline: none; } .btn:active {
       background: #eee; } </style>
      
      <button class="btn">
         I am a clickable button 
      </button>
      
      <script> var btn = document.querySelector('.btn'); btn.onclick = function() {
       var text = btn.innerText; btn.innerText = text.replace(' I am a clickable button ', ' I knew you had ordered it when I saw it '); }; </script>

Before clicking this button, the result is

After clicking finish, it's like this

adopt onclick You can set the click event of the button .

If events need to be cleared , You can reset the property to null.

This way of binding events is still commonly used , But the disadvantage is that the same event has no other auxiliary conditions , Only one event handler can be bound .

4. Summary

Both of these methods can be bound DOM event , But only one event handler can be bound .