Introduction to several methods of binding click events to in HTML

There are three ways to bind events to buttons in HTML.

For example, the following tags:

<button type="submit" id="btn_submit"> submit </button>

1. Use jquery for binding

$('#btn_submit').click(function(){
});

2. Use native js binding, (Note: Internet Explorer 8 and earlier IE versions do not support the addEventListener() method, and Opera 7.0 and Opera earlier versions do not support it either. This type of The browser version needs to use the attachEvent() method to add events)

document.getElementById("#btn_submit").addEventListener(‘click’, function(){
}, false);

Supplement: The third step of addEventListener This parameter is used to determine the event model. When both the parent element and the child element are bound to the event, this parameter determines which event is triggered first. False is the bubbling event model: that is, the event bound to the child element responds first, and the event bound to the parent element responds first. After responding to a certain event, true asks the capture event model, which is opposite to the execution order of the bubbling event model, such as:

<p id="test_p">   
<button type="button" value ="测试事件顺序" name="测试事件顺序" id="test_button">测试事件顺序</button></p>
document.getElementById(&#39;test_p&#39;).addEventListener(&#39;click&#39;, function () {        
console.log(&#39;p&#39;);    
},true)    
document.getElementById(&#39;test_button&#39;).addEventListener(&#39;click&#39;, function(){        
console.log(&#39;test1&#39;);    
},false);

The event model in this example is a capture model, and it will be executed first Execute p's event and then execute button's event. There is something to note here: what determines the event model is the third parameter passed when the parent element binds the event, such as the third parameter passed when the button binds the event in the above example. has no effect unless it contains child elements.

3. Use onclick binding directly in the button tag

<button type="submit" id="btn_submit" onclick="btnAction()"> submit </button>

Then define btnAtion in the 3f1c4e4b6b16bbbd69b2ee476dc4f83a tag Method

<script>        
function btnAction()        { }
</script>

Comparison:

1. Use jquery binding, The code is concise and easy to use. The event binding method is append binding, that is, as many methods as bound are executed.

#Under the condition of single binding, since the bottom layer of jQuery is actually implemented in js, the speed difference is not big. At least the "binding" link will not become a

speed bottleneck, unless it is bound on the page The event has more than tens of thousands of elements, otherwise there is no need to worry about the response speed. Just doing an event binding is still very fast.

So is doing "small programs" with less strict requirements such as load, from a maintenance perspective , it is recommended to use jQuery binding, which is simple, clear and easiest to maintain.

#2. Compared with jquery, the amount of code is slightly larger when using native js, but it allows people to further understand the details of event binding. For those who are familiar with native js It is worth recommending to developers.

3. Using onclick tag binding, the amount of code is not large, but the html front-end and js front-end are mixed together, which is not easy to maintain.

#In principle, HTML code can only reflect the structure of a web page, and specific behaviors should be bound using javascript code.

If you use onclick events to mix js in HTML, it will cause the work of the html front-end and the js front-end to be mixed Together, it is difficult to separate work tasks, which makes it difficult to maintain. This approach is fine for temporary debugging, but if it should not appear in the official finished product,

So it is not recommended to use the onclick tag method to bind events.

The above is the detailed content of Introduction to several methods of binding click events to in HTML. For more information, please follow other related articles on the PHP Chinese website!