事件监听、事件委托

一、事件监听
1、可以根据事件监听实现捕获或冒泡现象
2、可以为同一个元素添加多次同样的事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		body{
     
			height: 1000px;
		}
	</style>
	<body>
	</body>
</html>
<script type="text/javascript">
	/*window.addEventListener("click",function(){
     
		alert( "window被点击了" );
	},true)
	document.addEventListener("click",function(){
     
		alert( "document被点击了" );
	},true)
	document.body.addEventListener("click",function(){
     
		alert( "body被点击了" );
	},true)*/
	
	//可以为同一个元素添加多次同样事件
	/*document.onclick = function(){
     
		alert(1);
	}
	document.onclick = function(){
     
		alert(2);
	}*/
	//document.onclick = null;//事件取消
	
	document.addEventListener("click",clickHandler);
	
	function clickHandler(){
     
		alert( "document被点击了111" );
	}
	
	//取消单击事件
	document.removeEventListener("click",clickHandler);
</script>

二、事件委托
委托 :让别人来完成

事件委托 : 当为多个同类的标签添加同一个事件时,为了提高程序的执行效率,可以将事件添加到这些标签的父级标签上,这里的父级可以是上一级,上上一级等

事件委托的好处 :
提高程序的执行效率
动态创建的元素添加事件时可以使用事件委托实现,防止事件添加时动态创建的元素查找不到

总结事件委托好处 :
减少了事件绑定浏览器重绘的次数,提高了程序的执行效率;
减少事件的冗余绑定,节约了事件资源。
可以解决动态添加的元素节点无法绑定事件的问题;

事件委托的实现 :
获取事件源 target || srcElement
明确事件源 可以根据标签名 类名 属性名明确

事件委托的实现 是 事件冒泡的机制,不能冒泡的事件也就不能实现委托

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div>
			<ul>
				<li>兄弟多个1</li>
				<li>兄弟多个2</li>
				<li class="a" f = "aa">兄弟多个3</li>
				<li f = "aa">兄弟多个4</li>
				<li f = "aa">兄弟多个5</li>
				<li class="a">兄弟多个6</li>
				<li>兄弟多个7</li>
				<li class="a">兄弟多个8</li>
				<p f = "aa">兄弟多个8</p>
				<p>兄弟多个8</p>
				<p>兄弟多个8</p>
			</ul>
		</div>
	</body>
</html>
<script type="text/javascript">
	//为多个li添加单击事件
	//传统方式:
	/*var list = document.getElementsByTagName("li");
	for( var i = 0 ; i < list.length ; i++ ){
     
		list[i].addEventListener("click",clickHandler);
	}
	function clickHandler(){
     
		alert();
	}*/
	//使用事件委托
	var oUl = document.querySelector("ul");
	oUl.onclick = function(e){
     
		var e = e || event;
		//获取事件源
		var target = e.target || e.srcElement;
		//明确事件源  根据标签名
		/*if( target.tagName.toLowerCase() == "li" ){
     
			//将当前操作的li的背景色改变
			target.style.backgroundColor = "orange";
		}*/
		
		//明确事件源  根据类名
		/*if( target.className == "a" ){
     
			//将当前操作的li的背景色改变
			target.style.backgroundColor = "orange";
		}*/
		
		//明确事件源  根据类名
		if( target.getAttribute("f") == "aa" ){
     
			//将当前操作的li的背景色改变
			target.style.backgroundColor = "orange";
		}
	}
</script>

三、兼容写法

//获取页面滚走的距离
var sTop = document.documentElement.scrollTop || document.body.scrollTop;

//事件对象创建  兼容
var e = e || event;

//键盘事件
var e = e || event;
var code = e.keyCode || e.which;

//冒泡事件
e.stopPropagation ? e.stopPropagation () : e.cancelBubble = true;

//事件委托
var e = e || event;
var target = e.target || e.srcElement;

你可能感兴趣的:(JavaScript,javascript)