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()解除上面的捕获事件
共同學(xué)習(xí)，寫(xiě)下你的評(píng)論
評(píng)論加載中...
作者其他優(yōu)質(zhì)文章
100積分直接送
付費(fèi)專(zhuān)欄免費(fèi)學(xué)
大額優(yōu)惠券免費(fèi)領(lǐng)