html--绑定事件方式

 例如以下标签：

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

一、使用jquery进行绑定

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

});

二、使用原生js绑定，（注意：Internet Explorer 8 及更早IE版本不支持 addEventListener() 方法，Opera 7.0 及 Opera 更早版本也不支持。 这类浏览器版本要使用 attachEvent() 方法来添加事件）

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

补充：addEventListener的第三个参数是用于决定事件模型的，当父元素和子元素都绑定了事件时，这个参数决定先触发哪个事件，false为冒泡事件模型：即子元素绑定的事件先响应，父元素绑定的事件后相应，true问捕获事件模型，与冒泡事件模型执行顺序相反，如：

<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);

这个例子的事件模型是捕获模型，会先执行div的事件再执行button的事件，这里有个需要注意的地方：决定事件模型的是父元素绑定事件时传的第三个参数，如上例中button绑定事件时传的第三个参数是不起作用的，除非它又包含了子元素。

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

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

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

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

四、在JavaScript代码中绑定

在JavaScript代码中（即<script>标签内）绑定事件可以使JavaScript代码与HTML标签分离，文档结构清晰，便于管理和开发。
在JavaScript代码中绑定事件的语法为：
elementObject.onXXX=function(){
    // 事件处理代码
}

其中：
elementObject 为DOM对象，即DOM元素。
onXXX 为事件名称。
例如，为 id="demo" 的按钮绑定一个事件，显示它的 type 属性：
<input  id="demo"  type="button"  value="点击我，显示 type 属性" />
<script type="text/javascript">
document.getElementById("demo").οnclick=function(){
    alert(this.getAttribute("type"));  //  this 指当前发生事件的HTML元素，这里是<div>标签
}
</script>

五、绑定事件监听函数

绑定事件的另一种方法是用 addEventListener() 或 attachEvent() 来绑定事件监听函数。
function addEvent(obj,type,handle){
    try{  // Chrome、FireFox、Opera、Safari、IE9.0及其以上版本
        obj.addEventListener(type,handle,false);
    }catch(e){
        try{  // IE8.0及其以下版本
            obj.attachEvent('on' + type,handle);
        }catch(e){  // 早期浏览器
            obj['on' + type] = handle;
        }
    }
}