HTML中為button綁定事件的方式有三種。
例如以下標籤:
<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問捕獲事件模型,與冒泡事件模型執行順序相反,如:
<p id="test_p"> <button type="button" value ="测试事件顺序" name="测试事件顺序" id="test_button">测试事件顺序</button></p> document.getElementById('test_p').addEventListener('click', function () { console.log('p'); },true) document.getElementById('test_button').addEventListener('click', function(){ console.log('test1'); },false);
這個例子的事件模型是捕獲模型,會先執行p的事件再執行button的事件,這裡有個需要注意的地方:決定事件模型的是父元素綁定事件時傳的第三個參數,如上例中button綁定事件時傳的第三個參數是不起作用的,除非它又包含了子元素。
三、直接在button標籤中使用onclick綁定
#<button type="submit" id="btn_submit" onclick="btnAction()"> submit </button>
然後在