(day05—07)利用冒泡( 事件委托 / 事件代理 ):优化减少事件监听对象的个数

<!DOCTYPE HTML>
<html>
	<head>
		<title>取消与利用冒泡</title>
		<meta charset="utf-8"/>
	</head>
	<body>
		<div id="keys">
			<button>1</button>
			<button>2</button>
			<button>3</button>
			<button>4</button><br>
			<button>C</button>
			<button>+</button>
			<button>-</button>
			<button>=</button>
		</div>
		<textarea id="sc" style="resize:none;width:200px; height:50px;" readonly></textarea>
    <script>
		//利用冒泡:优化——尽量减少事件监听的个数

		//id全局变量,可省略查找
		keys.onclick=function(e){
			//var btn=this;不能再用this,因为事件绑定在父元素div上,this指的是父元素。
			// e.target会始终保存着最初触发事件的目标元素,且不随冒泡而改变
			var btn=e.target;
			//
			if(btn.nodeName==="BUTTON"){
				alert(`${btn.innerHTML}滚!`)
			}
		}		
	</script>
	</body>
</html>
上一篇:day05-3 初步了解数据类型


下一篇:day05 模块学习