事件绑定

HTML中为button绑定事件的方式有三种。

例如如下标签：

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

1、使用jQuery进行绑定

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

});

 

2、使用原生js绑定

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

}, false);

 

3、直接在button标签中使用onclick绑定

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

而后在<script>标签中定义btnAtion的方法

 

<script>
        function btnAction()
        { }

</script>

 

比较：

一、使用jquery绑定，代码简洁，使用方便，事件绑定方式为追加绑定，即绑定多少个方法就执行多少个方法。

在单一绑定的条件下，因为jQuery底层其实也是js实现，因此速度区别并不大。至少“绑定”这个环节并不会成为

速度的瓶颈，除非页面上绑定事件的元素超过上万个，不然响应速度就没必要纠结了，只作个事件绑定仍是很快的。

因此在作负载等要求不那么严格的“小程序”，从维护的角度上，建议用jQuery绑定，简单清楚，最容易维护。

 

二、使用原生js，代码量稍大，事件绑定方式为复写绑定，即绑定多个只保留最后一个绑定的方法。

原生js，这是真正的熟练者的工具，若是能写明白更好。

 

三、使用onclick标签绑定，代码量不大，可是html前端和js前端混在一块儿，不易于维护。

原则上HTML代码只能体现网页的结构，具体的行为应该使用JavaScript代码进行绑定。

若是在HTML中用onclick事件混杂js，会致使html前端和js前端的工做混在了一块儿，难以分离工做任务，

进而难以维护。这种作法临时调试能够，但若是正式成品中不该该出现，

因此不建议使用onclick标签方式进行绑定事件。

 

补：在使用jquery绑定时，建议使用：

$(document).on('click', 'li', function(){

    console.log(this)

})

当页面动态加载一个元素时，该方法效果更佳