<!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—07)利用冒泡( 事件委托 / 事件代理 ):优化减少事件监听对象的个数
猜你喜欢
转载自blog.csdn.net/qq_43459224/article/details/90083450
今日推荐
周排行