今天仔細看了一下addEventListener() attachEvent()寫篇博客記憶一下。
html代碼很簡單一句話：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="button" value="按鈕" id="btn">
</body>
</html>js語法分別是 :
element.addEventListener(event, function, useCapture) //FF
attachEvent(event,function) //IE
<script type="text/javascript">
window.onload =function () {
var oBtn =document.getElementById('btn');
//chrome
oBtn.addEventListener("click", function(){
alert('你好！')
}, false)
}
</script><pre name="code" class="javascript"><script type="text/javascript">
window.onload =function () {
var oBtn =document.getElementById('btn');
//IE
oBtn.attachEvent("onclick", function(){
alert('你好！');
})
}
</script>| 區別點 | addEventListener() | attachEvent() |
|---|---|---|
| 參數 | 3 | 2 |
| 事件 | click不需要“on” | onclick需要加“on” |
| 適應 | FF | IE |
個人感覺兩者差不多！就是element.addEventListener()多一個useCapture參數。該參數默認爲false
如果想看false和true 具體表現出來的效果，戳我！
爲了讓這個事件兼容 我寫了以下方法
//compatible writing
function addEvent(ele,eve,fn){
if(ele.attachEvent){
ele.attachEvent('on'+eve,fn);
}else{
ele.addEventListener(eve,fn,false);
}
}
addEvent(oBtn,'click',function(){
alert('你好！');
})當然，網上有許多其他寫法 比如這個比較全 。我這個寫法 純屬加深自己的記憶，獻醜了！
還有一個if else if的寫法
var x = document.getElementById("btn");
if (x.addEventListener){
x.addEventListener("click", myFunction);
}else if (x.attachEvent)
{
x.attachEvent("onclick", myFunction);
}
function myFunction()
{
alert("你好！");
}