摘要：HTML代码 <!DOCTYPE html><html><head><meta charset="UTF-8"><title>JavaScript核心篇事件</title><style>div {height: 400px;width: 600px;margin: 0 auto;fon
HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript核心篇事件</title>
<style>
div {height: 400px;width: 600px;margin: 0 auto;font-size: 16px;}
table,table tr th,table tr td { border:1px solid #000;}
table {border-collapse: collapse;}
table tr{height: 30px;line-height: 30px;text-align: center;}
</style>
</head>
<body>
<script type="text/javascript">
function changecolor(x) {
x.style.background="pink"
}
function changecolorr(y) {
y.style.background="#fff"
}
</script>
<div>
<table>
<thead>
<tr onmouseover="changecolor(this)" onmouseout="changecolorr(this)">
<th colspan="3">JavaScript核心篇事件知识点</th>
</tr>
</thead>
<tbody>
<tr onmouseover="changecolor(this)" onmouseout="changecolorr(this)">
<td>序号</td>
<td>属性</td>
<td>描述</td>
</tr>
<tr onmouseover="changecolor(this)" onmouseout="changecolorr(this)">
<td>1</td>
<td>onfocus</td>
<td>元素获得焦点</td>
</tr>
<tr onmouseover="changecolor(this)" onmouseout="changecolorr(this)">
<td>2</td>
<td>onblur</td>
<td>元素失去焦点</td>
</tr>
<tr onmouseover="changecolor(this)" onmouseout="changecolorr(this)">
<td>3</td>
<td>onchange</td>
<td>域的内容被改变</td>
</tr>
<tr onmouseover="changecolor(this)" onmouseout="changecolorr(this)">
<td>4</td>
<td>onclick</td>
<td style="width:350px;">当用户点击某个对象时调用的时间句柄</td>
</tr>
<tr onmouseover="changecolor(this)" onmouseout="changecolorr(this)">
<td>5</td>
<td>ondblclick</td>
<td>当用户双击某个对象时调用的事件句柄</td>
</tr>
<tr onmouseover="changecolor(this)" onmouseout="changecolorr(this)">
<td>6</td>
<td>onkeydown</td>
<td>某个键盘按键被按下</td>
</tr>
<tr onmouseover="changecolor(this)" onmouseout="changecolorr(this)">
<td>7</td>
<td>onkeypress</td>
<td>某个键盘按键被被按下并松开</td>
</tr>
<tr onmouseover="changecolor(this)" onmouseout="changecolorr(this)">
<td>8</td>
<td>onkeyup</td>
<td>某个键盘按键松开</td>
</tr>
<tr onmouseover="changecolor(this)" onmouseout="changecolorr(this)">
<td>9</td>
<td>onload</td>
<td>一张页面或衣服图像完加载</td>
</tr>
<tr onmouseover="changecolor(this)" onmouseout="changecolorr(this)">
<td>10</td>
<td>onmousedown</td>
<td>鼠标按钮被按下</td>
</tr>
<tr onmouseover="changecolor(this)" onmouseout="changecolorr(this)">
<td>11</td>
<td>onmousemove</td>
<td>鼠标被移动</td>
</tr>
<tr onmouseover="changecolor(this)" onmouseout="changecolorr(this)">
<td>12</td>
<td>onmouseout</td>
<td>鼠标从某元素移开</td>
</tr>
<tr onmouseover="changecolor(this)" onmouseout="changecolorr(this)">
<td>13</td>
<td>onmouseover</td>
<td>鼠标移到某元素之上</td>
</tr>
<tr onmouseover="changecolor(this)" onmouseout="changecolorr(this)">
<td>14</td>
<td>onmouseup</td>
<td>鼠标按键被松开</td>
</tr>
<tr onmouseover="changecolor(this)" onmouseout="changecolorr(this)">
<td>15</td>
<td>onsubmit</td>
<td>确认按钮被点击</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
批改老师：天蓬老师批改时间：2018-12-27 15:47:50
老师总结：如果仅仅是实现鼠标悬停变色, 使用js事件, 不如使用css中的hover伪类啦,你说呢?
