JS中事件绑定
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS中事件绑定相关的知识，希望对你有一定的参考价值。
事件绑定
事件绑定
IE方式
attactEvent(事件名称，函数)，绑定事件处理函数
derachEvent(事件名称，函数)，解除绑定
DOM方式
addEventListener(事件名称，函数，捕获)
removeEventListener(事件名称，函数，捕获)
绑定事件代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload=function()
{
var oBtn=document.getElementById('btn1');
oBtn.attachEvent('onclick',function()
{
alert('a')
});
oBtn.attachEvent('onclick',function()
{
alert('b')
});
}
</script>
</head>
<body>
<input id="btn1" type="button" value="按钮" />
</body>
</html>
以上代码使用了attactEvent(事件名称，函数)，绑定事件处理函数 注意(事件名称前面加on)
只能在IE里面用，在别的浏览器会报错
使用addEventListener(事件名称，函数，捕获)的代码 注意事件名称前面不加on
这个只能使用于火狐 chrome 和IE9浏览器 在IE7会报错
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload=function()
{
var oBtn=document.getElementById('btn1');
oBtn.addEventListener('click',function()
{
alert('a')
});
oBtn.addEventListener('click',function()
{
alert('b')
});
}
</script>
</head>
<body>
<input id="btn1" type="button" value="按钮" />
</body>
</html>
有2个方法绑定事件
分别是
IE方式
attactEvent(事件名称，函数)，绑定事件处理函数
DOM方式
addEventListener(事件名称，函数，捕获)
他们2个都只能使用于一种浏览器，
可以用if解决兼容问题
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload=function()
{
var oBtn=document.getElementById('btn1');
if(oBtn.attachEvent)
{
oBtn.attachEvent('onclick',function()
{
alert('a')
});
oBtn.attachEvent('onclick',function()
{
alert('b')
});
}else
{
oBtn.addEventListener('click',function()
{
alert('a')
});
oBtn.addEventListener('click',function()
{
alert('b')
});
}
}
</script>
</head>
<body>
<input id="btn1" type="button" value="按钮" />
</body>
</html>
如果以后用绑定很麻烦，可以把绑定写一个函数，以后我们用直接调用就可以了
function myAddevent(obj,ev,fn)
{
if(obj.attachEvent)
{
obj.attachEvent('on'+ev,fn)
}else
{
obj.addEventListener(ev,fn,false);
}
}
上面是编写好的绑定函数，我下面来调用
window.onload=function()
{
var oBtn=document.getElementById('btn1');
myAddevent(oBtn,'click',function()
{
alert('a')
})
myAddevent(oBtn,'click',function()
{
alert('b')
})
}
2事件捕获
a.setCapture()把网页所有事件全部集中到a里
a.releaseCapture()解除上面的捕获事件
以上是关于JS中事件绑定的主要内容，如果未能解决你的问题，请参考以下文章