js取消默认事件和事件绑定

1.默认事件:
浏览器本事具备的一些功能,如鼠标右键菜单,a标签跳转页面。
如果要阻止这些默认行为,可以用return false;
w3c中定义了ev.preventDefault();这个不兼容IE11以下。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			document.οncοntextmenu=function (ev){
				return false;//阻止右键菜单的动作
				//ev.preventDefault()
			};
		</script>
	</head>
	<body>
		<!--return false;阻止了a标签的href跳转动作-->
		<a href="https://www.baidu.com" οnclick="return false;">百度一下</a>
	</body>
</html>

举个栗子,文本框中只能键盘输入数字和删除键:
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			window.οnlοad=function (){
				var oTxt=document.getElementById('txt');
				oTxt.οnkeydοwn=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.οnlοad=function (){
				var oBtn1=document.getElementById('btn1');
				var oBtn2=document.getElementById('btn2');
				oBtn1.οnclick=function (){
					alert('普通事件1');
				};
				oBtn1.οnclick=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的第三个参数之前的博客有提到, 点击打开链接


  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值