Home >Web Front-end >JS Tutorial >jQuery: Detailed explanation of the difference between .click and onclick

jQuery: Detailed explanation of the difference between .click and onclick

黄舟
黄舟Original
2017-06-27 10:01:381570browse

onclick is the binding event. Click itself is a method whose function is to trigger the onclick event. As long as the click() method of the element is executed, there is For example, you can take a look at the

Html code

<script type="text/javascript"> 
$(function(){ 
$("#btn4").click(function(){ 
$("#btn3").click(); 
}); 
}); 
function change(){ 
alert("onclick"); 
} 
</script> 

<button id="btn3" onclick="change()">dd</button> 
<button id="btn4">ee</button>

Differences:

1.onclick is a binding event that tells the browser what to do when the mouse clicks

Click itself is a method that triggers the onclick event. As long as the click() method of the element is executed, the onclick event will be triggered. As shown in the appeal code, when the 'ee' button is clicked, the onclick event of 'dd' will be triggered (normally, the onclick event of 'dd' must be triggered by pressing the 'dd' button). The reason is Because

$("#btn4").click(function(){
$("#btn3").click();
});

When the 'ee' button is clicked, the click() method of 'dd' is called internally in the code, thus triggering the onclick event of 'dd'.

2. The main function of the click() method is to trigger the onclick event of the element that calls the click method. In addition, if the following code is defined in the click method

$("#btn3").click(function(){
alert("*****");
});

The function code in the click method will be executed after the onclick event is executed. At this time, the click method plays the role of appending events. The example is as follows

Html code

<script type="text/javascript"> 
$(function(){ 
$("#btn3").click(function(){ 
alert("aa"); 
}); 
}); 
function change(){ 
alert("bb"); 
} 
</script> 
<button id="btn3" onclick="change()">dd</button>

The pop-up order of the pop-up box is first 'bb', then 'aa'.

The above is the detailed content of jQuery: Detailed explanation of the difference between .click and onclick. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn