面试的时候,面试官问我关于事件绑定有几种方式的时候,由于自己对于事件监听不熟悉而且从来没有用过,所以当时这题答得并不好,后来也就没面试上,因此回去之后好好补习了一下关于js和jquery的事件绑定的方式,现总结如下:
js的事件绑定方法
- 在DOM元素后面直接写方法,如:
<a href="#" onclick="edit()">编辑</a>
- 在JavaScript代码`中绑定,如:
<button id="edit">编辑</button>
<script>
var btn=document.getElementById("
edit");
btn.onclick=function(){
alert("我是用js代码写的事件绑定");
}
</script>
3.绑定事件监听函数,如:
<button id="edit">编辑</button>
<script>
var btn=document.getElementById("
edit").addEventListener('click',edit);
</script>
以上3种便是js的所有的事件绑定的方法,那么下面就来说下这三种的优缺点了。
- 第一种直接在DOM元素上进行的绑定事件,不利于行为和结构相分离,耦合度太高,不建议在项目中使用。并且在遇到相同类型的事件时,只会去处理第一个事件,而忽略后续的事件。如:
‘`<button id="edit" onclick="editInfo()" onclick="editDel()">编辑</button>
<script type="text/javascript">
function editInfo(){
alert("我是事件绑定1");
}
function editDel(){
alert("我是事件绑定2");
}
</script>`’’
显示结果如下:
2.第二种在js代码中进行事件绑定,好处是将行为与结构分离开了,但是这个在处理相同类型的事件时,只会去寻找最后一个绑定事件,而忽略前面的所有绑定事件,如:
<button id="edit">编辑</button>
<script type="text/javascript">
var btn=document.getElementById("edit");
btn.onclick=function(){
alert("我是点击事件1");
}
btn.onclick=function(){
alert("我是点击事件2");
}
</script>
显示结果如下:
3.第三种利用事件监听进行的事件绑定,好处自然是可以绑定多个相同类型的事件,同时也将行为和结构很好的分离,降低了耦合度,如:
<button id="edit">编辑</button>
<script type="text/javascript">
var btn=document.getElementById("edit");
btn.addEventListener('click',editInfo);
btn.addEventListener('click',editDel);
function editInfo(){
alert("我是利用事件监听进行的事件绑定1");
}
function editDel(){
alert("我是利用事件监听进行的事件绑定2");
}
</script>
结果如下:
以上便是我对于js事件绑定的方法以及各种方法优缺点的理解,可能有所不足,还希望各位大神给我补充。原来还想写jquery的事件绑定以及优缺点来着,但是时间略晚,我决定去睡个美容觉,留明天继续整理啦,哈哈,晚安。