1.默認事件:
瀏覽器本事具備的一些功能,如鼠標右鍵菜單,a標籤跳轉頁面。
如果要阻止這些默認行爲,可以用return false;
w3c中定義了ev.preventDefault();這個不兼容IE11以下。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
document.oncontextmenu=function (ev){
return false;//阻止右鍵菜單的動作
//ev.preventDefault()
};
</script>
</head>
<body>
<!--return false;阻止了a標籤的href跳轉動作-->
<a href="https://www.baidu.com" onclick="return false;">百度一下</a>
</body>
</html>
舉個栗子,文本框中只能鍵盤輸入數字和刪除鍵:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload=function (){
var oTxt=document.getElementById('txt');
oTxt.onkeydown=function (ev){
// keyCode:8,48-57,96-105,
var iEvent=ev||event;
if(!(iEvent.keyCode==8||(iEvent.keyCode>=48&&iEvent.keyCode<=57)||
(iEvent.keyCode>=96&&iEvent.keyCode<=105))){
return false;//除去上面的按鍵碼以外,取消其表單默認可以輸入動作
}
};
};
</script>
</head>
<body>
<input type="text" id="txt"/>
</body>
</html>
2.事件綁定
在項目中,很多時候要用到兩個onload、onscroll等事件,但瀏覽器只會執行最後一個,這時我們就要用到綁定事件。下面代碼可以看到普通事件跟綁定事件的區別:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload=function (){
var oBtn1=document.getElementById('btn1');
var oBtn2=document.getElementById('btn2');
oBtn1.onclick=function (){
alert('普通事件1');
};
oBtn1.onclick=function (){
alert('普通事件2');
};
// 可以看到普通事件只執行了第二個
oBtn2.addEventListener('click',function (){
alert('綁定事件1');
},false);
oBtn2.addEventListener('click',function (){
alert('綁定事件2');
},false);
// 綁定事件先執行第一個,接着執行第二個,IE中用oBtn2.attachEvent()添加綁定事件
};
</script>
</head>
<body>
<input type="button" id="btn1" value="按鈕1" />
<input type="button" id="btn2" value="按鈕2" />
</body>
</html>
給綁定事件做了兼容性處理,代碼如下:
function addEv(obj,type,fn){
if(obj.attachEvent){
obj.attachEvent('on'+type,fn);
}else{
obj.addEventListener(type,fn,false);
}
}
IE中會先執行綁定事件2,然後再執行綁定事件1
addEventListener的第三個參數之前的博客有提到,點擊打開鏈接