<head>
<style>
#big{
width: 250px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<!-- 此为HTML内联方式---写点击事件(淘汰了) 与html混合编写 -->
<!-- <div id="bianda" onclick="fn()">单击变00001</div> -->
<!-- 此为DOM0级脚本方式---写点击事件（html与js分开写） -->
<!-- <div id="bian">单击变00002</div> -->
<!-- 此为DOM2级模型方式---写点击事件（html与js分开写） -->
<!-- <div id="b">单击变00003</div> -->
<!-- 鼠标事件总结：（9种事件） -->
<!-- 001鼠标单击、 002双击、 003点击未弹起、 004点击后弹起了、
005鼠标移入元素上面时触发、006鼠标移出元素上面时触发、007鼠标
在元素上移动时 008鼠标事件之---在鼠标光标从元素外部首次移动至元素范围内触发（它不参与冒泡） 009鼠标事件之---在位于元素范围内的鼠标光标移动到元素范围外之后触（它发不参与冒泡） -->
<!-- 步骤：先style里给个色块方便操作 -->
<div id="big">鼠标事件大全</div>
</body>
<script>
此为HTML内联方式（淘汰了） 注：onclick为点击的意思
var bianda = document.getElementById('bianda');
function fn(){
console.log(88888888);
}
此为DOM0级脚本方式 注：onclick为点击的意思
var bian = document.getElementById('bian');
bian.onclick=function(){
console.log(2222222);
}
此为DOM2级模型方式 （可以添加冒泡和捕获--还未学习）注：click为点击的意思。DOM2不加on了。
b.addEventListener('click',function(){
console.log(42240000);
})
001鼠标事件之---以上三种为鼠标单击事件
002鼠标事件之---鼠标双击变大
big.ondblclick = function(){
console.log('鼠标双击变大');
}
003鼠标事件之---鼠标点击未弹起
big.onmousedown = function(){
console.log('鼠标点击未弹起');
}
004鼠标事件之---鼠标点击后弹起了
big.onmouseup = function(){
console.log('鼠标点击后弹起了');
}
005鼠标事件之---鼠标移入元素上面时触发
big.onmouseover = function(){
console.log('鼠标移入元素上面时触发');
}
006鼠标事件之---鼠标移出元素时触发
big.onmouseout = function(){
console.log('鼠标移出元素时触发');
}
007鼠标事件之---鼠标在元素上移动时
big.onmousemove = function(){
console.log('鼠标在元素上移动时');
}
008鼠标事件之---在鼠标光标从元素外部首次移动至元素范围内触发、它不参与冒泡
big.onmouseenter = function(){
console.log('在鼠标光标从元素外部首次移动至元素范围内触发，不参与冒泡而且在光标移动到后代元素上是不会触发的);
}
009鼠标事件之---在位于元素范围内的鼠标光标移动到元素范围外之后触，它发不参与冒泡
big.mouseleave = function(){
console.log('在位于元素范围内的鼠标光标移动到元素范围外之后触 发，这个事件不参与冒泡，而且在光标移动到后代元素上不会触发')
}
事件类型
JavaScript可以处理的事件类型为：鼠标事件、键盘事件、HTML事件。
注意 ==》 所有的事件处理函数都会都有两个部分组成，on + 事件名称，例如click事件的事件
处理函数就是：onclick。在这里，我们主要谈论脚本模型的方式来构建事件，违反分离原则的内联模式，我们忽略掉。
