Js基础（二）
1、鼠标事件（总共七个事件）
点击事件 onclik 单击
<div id="box"></div>
<script>
var oBox = documnet.getElementById("box");
oBox.onclick = function(){
alert('Hello Word!')
}
</script>ondblclick 双击
var oBox = document.getElementById('box');
oBox.ondblclik = function () {
console.log('鼠标双击！');
}鼠标移入、移出事件
onmouseenter 鼠标移入（触发事件）
onmouseleave 鼠标移出（触发事件）
<!--JQ现在封装的都是这两种方法 -->
<body>
<div id='box'></div>
</body>
<script>
var oBox = document.getElemnetById('box');
oBox.onmouseenter = function () {
console.log('鼠标移入！');
}
oBox.onmouseleave = function () {
console.log('鼠标移出！');
}
</script>onmouseover 鼠标移入
onmouseout 鼠标移出
<!-- 会冒泡 -->
<body>
<div id='box'></div>
</body>
<script>
var oBox = document.getElemnetById('box');
oBox.onmouseover = function () {
console.log('鼠标移入！');
}
oBox.onmuseout = function () {
console.log('鼠标移出！');
}
</script>onmousedown 鼠标按下不抬起
onmousemove 鼠标移动
onmouseup 鼠标抬起
扫描二维码关注公众号，回复：
6063679 查看本文章
var oBox = document.getElementById('box');
oBox.onmusedown = function() {
console.log('鼠标按下！');
}
oBox.onmousemove = function () {
console.log('鼠标移动！');
}
oBox.onmouseup = function () {
console.log('鼠标抬起！');
}2、表单事件
onfocus 获取焦点
<body>
<form action="" method="get" id="ip_1">
用户名：<input type="text" >
<input type="submit" value="重置">
</form>
</body>
<script>
var oIp = document.getElementById('ip_1');
oIp.onfocus = function(){
console.log('获取焦点了');
}
oBox.onfocus()
</script>
onblur 失去焦点
var oBox = document.getElementById('box');
oBox.onblur = function(){
console.log('失去焦点了！');
}onchange 用户改变表单内容（修改表单里面的内容后失去焦点就表明内容已经改变）
触发在失去焦点事件之前
var oBox = document.getElementById('box');
oBox.onchange = function(){
console.log('内容已经修改！');
}onreset 重置按钮被点击时触发：
注意：需要给from表单设置该事件
var oBox = document.getElementById('box');
oBox.onreset = function(){
consloe.log('重置按钮被点击！');
}onsubmit 提交按钮被点击触发
var oBox = document.getElementById('box');
oBox.onsubmit = function(){
console.log('提交按钮被点击');
}3、键盘事件
onkeydown 键盘按下且放开时触发（常用）
onkeypress 键盘按下没有松开时触发
document.onkeydown = function(){
console.log('键盘按下');
}onkeyup 键盘抬起触发事件
oBox.onkeyup = function(){
console.log('楠楠最帅！');
}4、系统事件
window.onload 当页面加载完毕时触发
window.onresize 浏览器窗口改变事件（窗口改变大小时触发事件）比较重要
window.onresize = function(){
console.log('窗口改变！');
}**不常用系统事件
onselect 文本被选定时触发
onerror 当加载文档或者图像出现错误时触发