计算器应用的事件监听与处理-优快云博客

本文链接：https://blog.youkuaiyun.com/java_zhaoyanli/article/details/50959407

<!DOCTYPE HTML>
<html>
	<head>
		<title>取消与利用冒泡</title>
		<meta charset="utf-8"/>
		<link rel="stylesheet" href="css/3.css"/>
		<script>
			function calc(e){
				if(e.target.nodeName=="BUTTON"){
					if(e.target.innerHTML=="C"){//如果e.target是C
						sc.innerHTML="";//就清除sc的内容
					}else if(e.target.innerHTML=="="){
						//否则 如果e.target是=
						//将sc的内容放入eval中计算，将结果再放回sc中
						try{
							sc.innerHTML=eval(sc.innerHTML);
						}catch(err){
							sc.innerHTML=err.message;
						}
					}else{//否则
						//将e.target的内容追加到sc的内容中
						sc.innerHTML+=e.target.innerHTML;
					}
				}
			}
			window.οnlοad=function(){
				//为keys绑定click事件处理函数为calc
				keys.addEventListener("click",calc);
			}
		</script>
	</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>
	</body>
</html>