原生js的事件绑定有以下几种方法:
1.通过HTML属性处理函数的绑定
用法:
<button οnclick="a()">按钮</button>
<script>
function a(){
console.log("我要变成大佬");
};
</script>
2.通过JavaScript对象属性来绑定
用法:
<script>
var btn = document.getElementById('btn');
btn.onclick = function(){//匿名函数
console.log("我要变成大佬");
};
</script>
但是这种方法的缺陷就是只能对一个元素的一个事件进行绑定,而且会出现覆盖的效果,只会执行最后面绑定的事件。
3.通过addEventListener(type,fn,false)方法绑定
参数:
type:事件类型,如单击事件:“click”
fn:方法或方法名
false:事件处理阶段控制。false:事件冒泡阶段,true:事件捕获阶段
用法:
<script>
document.getElementById('btn').addEventListener("click",function(){
console.log("越来越帅");
},false);//false表示默认事件冒泡阶段
</script>
解绑:通过removeEventListener(type,fnName,false)
参数:
type:事件类型
fnName:(注意)只能是方法名
false:同上
用法:
<script>
function a(){
console.log("越来越帅");
};
document.getElementById('btn').addEventListener("click",a,false);
document.getElementById('btn').removeEventListener("click",a,false);
</script>
这种方法有兼容性问题
支持情况:火狐 谷歌 ie11支持 ie8不支持
4.通过attachEvent(“on”+type,fn)方法绑定
参数:
type:事件类型,如单击事件:“click”
fn:方法或方法名
用法:
<script>
document.getElementById('btn').attachEvent("on"+"click",function(){
console.log("越来越帅");
});
</script>
解绑:通过detachEvent(“on”+type,fnName)
参数:
type:on+事件类型
fnName:(注意)只能是方法名
用法:
<script>
function a(){
console.log("越来越帅");
};
document.getElementById('btn').attachEvent(''on"+"click",a);
document.getElementById('btn').detachEvent("ob"+"click",a);
</script>
这种方法也有兼容性问题
支持情况:火狐 谷歌 ie11不支持 ie8支持
附加:第3种和第4种的对比
相同点:
- 都能为元素绑定事件
不同点:
- 命名: addEventListener(); attachEvent()
- 参数:addEventListener(“方法类型”,方法名,false)。 attachEvent(“on+方法类型”,函数名)
- 兼容性:addEventListener() 火狐 谷歌 ie11支持 ie8不支持。 attachEvent() 谷歌火狐不支持,ie8支持 ie11 不支持
- this:addEventListener(); 当前要绑定对象。attachEvent(): 当前windows对象
- 事件参数类型:addEventListener();中没有”on“,attachEvent();中是”on+”事件类型
事件绑定和解绑的兼容代码:
<script>
//绑定事件兼容代码:
//element:要绑定元素
//type:事件类型
//fn:方法或者方法名
function addEventListener(element, type, fn) {
if (element.addEventListener) {
element.addEventListener(type, fn, false);
} else if (element.attachEvent) {
element.attachEvent("on" + type, fn);
} else {
element["on" + type] = fn;
}
}
//解绑事件兼容代码:
//element:要绑定元素
//type:事件类型
//fn:方法名
function removeEventListener(element, type, fnName) {
if (element.removeEventListener) //google 火狐 ie11
{
element.removeEventListener(type, fnName, false);
} else if (element.detachEvent) //ie8
{
element.detachEvent("on" + type, fnName);
} else {
element["on" + type] = null;
}
}
</script>
如有不清楚的欢迎留言或者私信我。
觉得写的不错的,也可以关注我,我会一直发一些有关前端的学习笔记。