JavaScript的事件注册与捕获

1 事件注册?
就是让一个html元素节点对象可以响应键盘/鼠标/网页/表单等事件;

2 事件注册的三种方式
2-1. 直接在元素标签上添加事件句柄
onclick="console.log('aaa');" onclick="myfunction();"

2-2.在元素标签的DOM对象上添加事件句柄属性
语法：
DOM对象.事件类型=function () {
事件句柄函数的代码块
};
举例:
btn2.onclick=function () {
console.log("bbb");
};

3 使用监听（侦听）方式来添加或注销事件
W3C标准监听方式添加事件:
target.addEventListener(type, listener, useCapture);
参数介绍:
target：目标元素(事件的目标源)
type：事件的名称，不含“on”，比如“click”、“mouseover”
listener ：监听调用的函数
useCapture：是否使用捕获(事件冒泡)，一般用 false | true

W3C标准删除事件
target.removeEventListener(type,function,useCapture);

如果是低版本的IE8及以下版本（了解）
IE注册事件 target.attachEvent(type, listener);
target：目标元素(事件的目标源)
type：事件名称，含“on”，比如“onclick”、“onmouseover”
listener ：事件处理函数
IE注销事件 detachEvent(type,function)

简单示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="button" id="btn1" value="按钮1" onclick="console.log('aaa');" /><br /><br />
		<input type="button" id="btn2" value="按钮2" /><br /><br />
		<input type="button" id="btn3" value="按钮3" /><br /><br />
		<input type="button" id="btn4" value="IE8以下的事件按钮4" /><br /><br />
		<script type="text/javascript">
			//2 在元素标签的DOM对象上添加事件句柄属性
			var btn2=document.getElementById("btn2");
//			btn2.onclick=function () {
//				console.log("bbb");
//			};
			
			function clickMe() {
				console.log("bbb250");
			}
			
			///btn2.onclick=clickMe();   只能调用一次
			btn2.onclick=clickMe;
			
			
			
			//3 使用监听（侦听）方式来添加或注销事件
			var btn3=document.getElementById("btn3");
			btn3.addEventListener("click",function () {
				//监听函数1的内容
				console.log("cccc100");
			},false);
			
			btn3.addEventListener("mouseover",function () {
				//监听函数2的内容
				console.log("你来了");
			},false);
			
			
			
			
			//自定义函数
			function mouseOutFN () {
				//监听函数3的内容
				console.log("已走了");
			}
			
			//添加侦听是调用自定义函数
			btn3.addEventListener("mouseout",mouseOutFN,false);
			
			//移除由 addEventListener() 方法添加的事件句柄
			btn3.removeEventListener("mouseout",mouseOutFN,false);
			
			
			//了解（IE8以下的事件注册）
			var btn4=document.getElementById("btn4");
			btn4.attachEvent("onclick",function () {
				console.log("DDDD for IE8");
			});
		</script>
	</body>
</html>

兼容ie8及一下版本示例：

注：

target.attachEvent 判断次函数支持与否
alert(target.attachEvent);

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="button" id="btn" value="兼容所有浏览器的事件注册" />
		<script type="text/javascript">

           //btn.attachEvent 判断次函数支持与否
           //alert(btn.attachEvent);
           function addEventListenerALL(obj,type,fn) {
           	  if(obj.attachEvent)
           	  {
           	  	 //IE8及以下
           	  	 obj.attachEvent("on"+type,fn);
           	  }
           	  else
           	  {
           	  	 //IE9及以上，FF，Chrome等等
           	  	 obj.addEventListener(type,fn,false);
           	  }
           }
           
           function clickMe() {
           	  console.log("全部兼容!");
           };
           
           var btn=document.getElementById("btn");
           //调用做好兼容性的方法来注册事件
           addEventListenerALL(btn,"click",clickMe);
		</script>
	</body>
</html>

文章仅为本人学习过程的一个记录，仅供参考，如有问题，欢迎指出！

JavaScript的事件注册与捕获

猜你喜欢