js取消默認事件和事件綁定

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的第三個參數之前的博客有提到,點擊打開鏈接


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章