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, nor do Opera 7.0 and Opera earlier versions. These browser versions need to use the attachEvent() method to add events)
document.getElementById("#btn_submit").addEventListener(‘click’, function(){
}, false);Supplement: The third parameter of addEventListener 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 indicates the bubbling event model: that is, the event bound to the child element. Respond first, then respond to the event bound to the parent element. True asks the capture event model, which is the opposite execution order of the bubbling event model, such as:
<div id="test_div">
<button type="button" value ="测试事件顺序" name="测试事件顺序" id="test_button">测试事件顺序</button>
</div>
document.getElementById('test_div').addEventListener('click', function () {
console.log('div');
},true)
document.getElementById('test_button').addEventListener('click', function(){
console.log('test1');
},false);If you don’t understand the event model, you can check the link: What are the main differences between JavaScript event capture and event bubbling principles between IE and DOM - dtdxrk - Blog Park
3. Use onclick binding directly in the button tag
<button type="submit" id="btn_submit" οnclick="btnAction()"> submit </button>Then define the btnAction method in the <script> tag
<script>
function btnAction()
{ // 执行操作 }
</script>Compare
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 there are more than tens of thousands of elements bound to events on the page, there is no need to worry about the response speed. Just doing an event binding is still very fast.
Therefore, when doing "small programs" with less stringent load requirements, from a maintenance perspective, it is recommended to use jQuery binding, which is simple, clear, and easiest to maintain.
2. Using native js, the amount of code is slightly larger, and the event binding method is copy binding, that is, multiple methods are bound and only the last binding is retained.
Native js, this is a tool for real proficient people. It would be better if you can write it clearly.
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 in HTML to mix js, it will cause the work of the html front-end and the js front-end to be mixed together, making it difficult to separate work tasks, and thus difficult to maintain. This approach is fine for temporary debugging, but it should not appear in the official finished product, so it is not recommended to use the onclick tag method to bind events.