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>
然后在