JaveScript事件（被动行为）、绑定、案例：简易计算器
一、JS事件
1、onmouseenter 鼠标进入事件
2、onmouseleave鼠标离开事件（平面上的离开）
3、onmouseout鼠标离开事件（既包含平面上也包含了垂直方向上的离开）
4、onclick鼠标单击事件
二、JS事件绑定
1、简单的事件绑定
在行内元素中直接书写事件，通过函数调用来执行
function btnData()
{
alert(点击了);
}
<button onclick="btnData()">按钮</button>
(当点击按钮后 页面会弹出"点击了“提示框)
2、事件的动态绑定
先获取元素，再进行事件的添加
<button id="btn">按钮</button>
var btninfo=document.getElementById("btn")
btninfo.onclick=function()
{
alert("点击了");
}
3、特殊方式 即事件的监听
先获取元素，再进行动态监听事件 addEventListener(去掉on的事件类型，事件回调函数)
<button id="btn">按钮</button>
var btnlist=document.getElementById("btn")
btnlist.addEventListener("click",name);
function name()
{
alert("点击了");
}
三、简易计算器代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算器</title>
<style>
table{
border-collapse: collapse;
width: 400px;
margin: 0 auto;
border: 1px solid black;
}
.tdlist{
width: 100px;
height: 50px;
}
.tdlist input{
width: 100px;
height: 50px;
font-size: 2em;
}
.tr_first input{
width: 200px;
height: 50px;
font-size: 2em;
}
.text input{
width: 400px;
height: 100px;
font-size: 2.5em;
text-align: right;
}
</style>
</head>
<body>
<table>
<tr class="text"><td colspan="4"><label for="data"></label><input type="text" disabled id="data" value=""></td></tr>
<tr class="tr_first">
<td colspan="2"><input type="button" class="tdlist" value="AC"></td>
<td colspan="2"><input type="button" class="tdlist" value="DEL"></td>
</tr>
<tr class="tdlist"><td><input type="button" value="7" class="btn"></td>
<td><input type="button" value="8" class="btn"></td>
<td><input type="button" value="9" class="btn"></td>
<td><input type="button" value="*" class="btn"></td>
</tr>
<tr class="tdlist"><td><input type="button" value="4" class="btn"></td>
<td><input type="button" value="5" class="btn"></td>
<td><input type="button" value="6" class="btn"></td>
<td><input type="button" value="/" class="btn"></td>
</tr>
<tr class="tdlist"><td><input type="button" value="1" class="btn"></td>
<td><input type="button" value="2" class="btn"></td>
<td><input type="button" value="3" class="btn"></td>
<td><input type="button" value="-" class="btn"></td>
</tr>
<tr class="tdlist"><td><input type="button" value="0" class="btn"></td>
<td><input type="button" value="." class="btn"></td>
<td><input type="button" value="+" class="btn"></td>
<td><input type="button" value="=" class="btn"></td>
</tr>
</table>
<script>
//加载所有元素
window.onload=function() {
//获取所有按钮
var btn = document.getElementsByClassName("btn");
//获取显示屏
var txt = document.getElementById("data");
var res=[];
var count=0;
for (var i = 0; i < btn.length; i++) {
btn[i].onclick = function () {
if(!isNaN(this.value)||this.value==".")
{
if(txt.value.indexOf(".")!=-1)
{
if(this.value!=".")
{
txt.value+=this.value;
}
}
else{
txt.value+=this.value;
}
}
else
{
//存运算符
if(this.value=="+"||this.value=="-"||this.value=="*"||this.value=="/") {
res[res.length]=txt.value;
res[res.length]=this.value;
txt.value="";
count=0;
}
//计算结果
else if(this.value=="="){
res[res.length]=txt.value;
var result="";
for(var i=0;i<res.length;i++){
result+=res[i];
}
txt.value=eval(result);
res=[];
}
}
}
}
}
</script>
</body>
</html>