<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="btn0">
<button id="btn1">单击</button>
<button id="btn2">双击</button>
<button id="btn3">鼠标按下</button>
<button id="btn4">鼠标松开</button>
<div id="btn5"></div>
<div id="btn6"></div>
<div id="btn7"></div>
<div id="btn8"></div>
<div id="btn9"></div>
</div>
<script>
// click单击事件
var btn1 = document.getElementById('btn1');
btn1.onclick = function () {
console.log('单击了按钮');
}
// dblclick双击事件
var btn2 = document.getElementById('btn2');
btn2.ondblclick = function () {
console.log('双击了按钮');
}
// mousedown鼠标按下事件
var btn3 = document.getElementById('btn3');
btn3.onmousedown = function () {
console.log('鼠标按下了按钮1');
}
var btn3 = document.getElementById('btn3');
btn3.onmouseup = function () {
console.log('鼠标松开了按钮1');
}
// mouseup鼠标松开事件
var btn4 = document.getElementById('btn4');
btn4.onmouseup = function () {
console.log('鼠标松开了按钮2');
}
// mousemove 鼠标在元素节点内移动
var btn5 = document.getElementById('btn5');
btn5.style.cssText = 'height:200px;width:200px;background:red;'
btn5.onmousemove = function () {
console.log('鼠标持续移动');
}
// mouseenter\mouseleave -- mouseover\mouseout区别参考下个文件./demo2.html
// mouseenter 鼠标进入元素
var btn6 = document.getElementById('btn6');
btn6.style.cssText = 'height:200px;width:200px;background:green;'
btn6.onmouseenter = function () {
console.log('鼠标进入了');
}
// mouseleave 鼠标离开元素
var btn7 = document.getElementById('btn7');
btn7.style.cssText = 'height:200px;width:200px;background:blue;'
btn7.onmouseleave = function () {
console.log('鼠标离开了');
}
// mouseover 鼠标进入元素
var btn8 = document.getElementById('btn8');
btn8.style.cssText = 'height:200px;width:200px;background:#111;'
btn8.onmouseover = function () {
console.log('鼠标进入了');
}
// mouseout 鼠标离开元素
var btn9 = document.getElementById('btn9');
btn9.style.cssText = 'height:200px;width:200px;background:#999;'
btn9.onmouseout = function () {
console.log('鼠标离开了');
}
// wheel鼠标滚动
var btn0 = document.getElementById('btn0')
btn0.onwheel = function () {
console.log('鼠标轮滚动了');
}
</script>
</body>
</html>
javascript.zip （62个子文件） 
javascript 
.DS_Store 6KB 02_输出方式 
index.html 350B 24_表单事件 change.html 597B form.html 853B select.html 560B input.html 1KB 20_事件处理程序 HTML事件.html 492B DOM2级.html 1KB DOM0级.html 642B 16_DOM index.html 725B 10_循环语句 while语句.html 1KB for实操.html 1KB for语句.html 1KB 05_JavaScript注释与输出 注释与输出.html 1KB 13_数组 indexOf.html 1KB concat.html 967B array.html 935B shift.html 2KB array遍历.html 996B join.html 1KB isarray.html 827B revease.html 1KB push\pop.html 1KB 22_Event事件对象 index.html 2KB 26_定时器 setTimeout().html 2KB setInterval().html 1KB 04_JavaScript引入 引入网络文件.html 277B hello.js 48B 嵌入式.html 306B 引用本地.html 249B 06_数据类型 index.html 1KB 11_跳出语句 break和continue语句.html 1KB 09_条件语句 switch语句.html 2KB if-else语句.html 2KB if语句.html 996B 三元运算符.html 535B 12_字符串 字符串属性 index.html 2KB 字符串方法 substring.html 2KB indexOf.html 2KB split.html 971B charAt.html 2KB 03_变量 index.html 506B 21_鼠标事件 demo2.html 2KB demo1.html 3KB 18_Element对象 element获取元素位置.html 3KB element.html 2KB 17_Document对象 document.create创建元素.html 1KB document.get获取元素.html 2KB 19_css操作 index.html 708B 23_键盘事件 index.html 1KB 25_事件代理 index.html 1KB 15_对象 Date.html 2KB Math.html 1KB index.html 2KB 14_函数 function.html 2KB 07_typeof判断数据类型 demo01.html 753B 28_节流 index.html 979B 27_防抖 index.html 1KB 08_运算符 4布尔运算符 demo01.html 1KB 1算术运算符 demo01.html 1KB 3比较运算符 demo01.html 919B 2赋值运算符 demo01.html 1KB资源评论
