How to bind and unbind events in JavaScript

This article will share about the binding and unbinding of JavaScript events. It has certain reference value and I hope it can be useful to everyone. Help

Events in JavaScript mean that when we click on an HTML element, a piece of JavaScript is started, thereby triggering the behavior of the browser. We often need to use event binding. Next, we will share several types with you in detail. Common event binding methods and how to unbind

Event binding

##onclick event

Refers to the object being triggered when the mouse is pressed, and an element can only be bound to one event

Changes its background color when the mouse clicks on the square

window.onload=function(){
var div=document.getElementsByTagName("div")[0];
div.onclick=function(){
div.style.backgroundColor="pink";
console.log(1);
}
}

Rendering

Before clicking

#After clicking

addEventListener(event, function, useCapture)

Add an event handler to the specified element. Multiple events can be added. This is not possible below IE9. Compatible

event: Specifies the event name, which exists in the form of a string

function: refers to the function executed when the event is triggered

useCapture: Boolean value, indicating whether the event is Executed in the capture or bubbling phase, where true indicates that the event handler is executed in the capture phase, false indicates that the event handler is executed in the bubbling phase, and false indicates the default value

window.onload=function(){
  var div=document.getElementsByTagName("div")[0];
    div.addEventListener('click',function(){
           div.style.backgroundColor="pink";
    },false);
}//用addEventListener绑定一个click事件，当点击时使背景颜色改变

Note: Be careful not to write on when writing events. Write click directly and write false in most cases

attachEvent(event, function)

An event can be bound to multiple handlers, and the same function can also be bound. Multiple times is unique to IE.

event: The type of event that needs to be bound. Note that it must start with on.

function: refers to the function executed when the event is triggered.

window.onload=function(){
var div=document.getElementsByTagName("div")[0];
 div.attachEvent('onclick',function(){
 div.style.backgroundColor="pink";
     });
 }

Note: The program must be run under the IE browser.

Unbinding the event

onclick =false/null

Unbinding the onclick event Unbind by setting its value to false or null

window.onload=function(){
   var div=document.getElementsByTagName("div")[0];
     div.onclick=function(){
            div.style.backgroundColor="pink";
     }
     div.onclick=null;

removeEventListener(event, function, useCapture)

is used to unbind the addEventListener event. Note that before unbinding When binding, you cannot write the function directly. You must write the function externally.

window.onload=function(){
  var div=document.getElementsByTagName("div")[0];
    div.addEventListener('click',demo,false);
    function demo(){
       div.style.backgroundColor="pink";
    }
    div.removeEventListener('click',demo,false);
}//用addEventListener绑定一个click事件，当点击时使背景颜色改变

detachEvent(event, function)

is used to detach the attachEvent event. Pay attention to the detachment before debinding. You cannot write function directly, you must write the function externally

window.onload=function(){
  var div=document.getElementsByTagName("div")[0];
    div.attachEvent('onclick',demo);
    function demo(){
       div.style.backgroundColor="pink";
    }
    div.detachEvent('onclick',demo);
    }

Summary: The above is the entire content of this article. I hope it will be helpful for everyone to learn the binding of events in JavaScript

##

The above is the detailed content of How to bind and unbind events in JavaScript. For more information, please follow other related articles on the PHP Chinese website!