JS事件
HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。
对事件做出反应
我们可以在事件发生时执行 JavaScript，比如当用户在 HTML 元素上点击时。
如需在用户点击某个元素时执行代码，请向一个 HTML 事件属性添加
HTML 事件的例子：
- 当用户点击鼠标时
- 当网页已加载时
- 当图像已加载时
- 当鼠标移动到元素上时
- 当输入字段被改变时
- 当提交 HTML 表单时
- 当用户触发按键时
onload 和 onunload 事件
onload 和 onunload 事件会在用户进入或离开页面时被触发。
onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
onload 和 onunload 事件可用于处理 cookie。
onchange 事件
onchange 事件常结合对输入字段的验证来使用。
onmouseover 和 onmouseout 事件
onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。
onmousedown、onmouseup 以及 onclick 事件
onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。
实例：当鼠标划过每一个标签，下面部分切换到对应的内容
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tabbar</title>
<link rel="stylesheet" href="css/index.css">
<script src="js/index.js"></script>
</head>
<body>
<div id="main">
<div id="tab-bar">
<ul>
<li class="selected">公告</li>
<li>规则</li>
<li>论坛</li>
<li>安全</li>
<li>公益</li>
</ul>
</div>
<div id="content">
<div class="content-list" style="display: block">
<ul>
<li><a href="#">数据七夕:金牛爱送玫瑰</a></li>
<li><a href="#">阿里打造"互联网监管"</a></li>
<li><a href="#">10万家店60万新品</a></li>
<li><a href="#">全球最大网上时装周</a></li>
</ul>
</div>
<div class="content-list" style="display: none">
<ul>
<li><a href="#">“全额返现”要管控啦</a></li>
<li><a href="#">淘宝新规发布汇总(7月)</a></li>
<li><a href="#">炒信规则调整意见反馈</a></li>
<li><a href="#">质量相关规则近期变更</a></li>
</ul>
</div>
<div class="content-list" style="display: none">
<ul>
<li><a href="#">阿里建商家全链路服务</a></li>
<li><a href="#">个性化的消费时代来临</a></li>
<li><a href="#">跨境贸易是中小企业机</a></li>
<li><a href="#">美妆行业虚假信息管控</a></li>
</ul>
</div>
<div class="content-list" style="display: none">
<ul>
<li><a href="#">接次文件，毁了一家店</a></li>
<li><a href="#">账号安全神器阿里钱盾</a></li>
<li><a href="#">新版阿里110上线了</a></li>
<li><a href="#">卖家学违禁避免被处罚</a></li>
</ul>
</div>
<div class="content-list" style="display: none">
<ul>
<li><a href="#">为了公益high起来</a></li>
<li><a href="#">魔豆妈妈在线申请</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
css
a {
text-decoration: none;
color: #000000;
font-size: 14px;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
#main {
margin: 30px;
width: 497px;
height:120px;
border: #dddddd 1px solid;
}
#main #tab-bar {
width: 100%;
height: 30px;
line-height: 30px;
background-color: #e8e8e8;
overflow: hidden;
text-align: center;
}
#main #tab-bar ul {
width: 500px;
}
#main #tab-bar ul li {
width: 99px;
height: 29px;
float: left;
padding: 0 1px;
margin-left: -1px;
border-bottom: 1px solid #dddddd;
}
#main #tab-bar ul .selected {
height: 30px;
border-left: 1px solid #dddddd;
border-right: 1px solid #dddddd;
border-bottom: none;
padding: 0;
color: #ff0000;
background-color: white;
}
#main #content .content-list {
padding: 30px 40px;
}
#main #content .content-list ul li{
list-style: none;
}
#main #content .content-list ul li a{
float: left;
width: 200px;
margin: 0;
text-align: center;
}
js
function $(id) {
return typeof id === 'string' ? document.getElementById(id) : id;
}
window.onload = function () {
var menus = $('tab-bar').getElementsByTagName('li');
console.log(menus);
var selectedMenu = menus[0];
var contents = $('content').getElementsByClassName('content-list');
console.log(contents);
var selectedContent = contents[0];
if(menus.length !== contents.length) return;
for(var i in menus) {
var menu = menus[i];
console.log(menu);
menu.id = i;
menu.onmouseover = function () {
selectedMenu.className = 'none';
selectedContent.style.display = 'none';
this.className = 'selected';
contents[this.id].style.display = 'block';
selectedMenu = this;
selectedContent = contents[this.id];
}
}
};