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中事件綁定