Home > Article > Web Front-end > 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 eventChanges its background color when the mouse clicks on the squarewindow.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/nullUnbinding 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!