<head>
? ? <style>
? ? #big{
? ? ? ? width: 250px;
? ? ? ? height: 100px;
? ? ? ? background-color: blue;
? ? }
? ? </style>
</head>
<body>
? ? <!-- 此為HTML內(nèi)聯(lián)方式---寫點(diǎn)擊事件(淘汰了) 與html混合編寫 -->
? ? <!-- <div id="bianda" onclick="fn()">單擊變00001</div> -->
? ? <!-- 此為DOM0級(jí)腳本方式---寫點(diǎn)擊事件（html與js分開寫） -->
? ? <!-- <div id="bian">單擊變00002</div> -->
? ? <!-- 此為DOM2級(jí)模型方式---寫點(diǎn)擊事件（html與js分開寫） -->
? ? <!-- <div id="b">單擊變00003</div> -->
? <!-- 鼠標(biāo)事件總結(jié)：（9種事件） -->
? ? <!-- 001鼠標(biāo)單擊、 002雙擊、 003點(diǎn)擊未彈起、 004點(diǎn)擊后彈起了、
? ? ? ? 005鼠標(biāo)移入元素上面時(shí)觸發(fā)、006鼠標(biāo)移出元素上面時(shí)觸發(fā)、007鼠標(biāo)
在元素上移動(dòng)時(shí) 008鼠標(biāo)事件之---在鼠標(biāo)光標(biāo)從元素外部首次移動(dòng)至元素范圍內(nèi)觸發(fā)（它不參與冒泡） 009鼠標(biāo)事件之---在位于元素范圍內(nèi)的鼠標(biāo)光標(biāo)移動(dòng)到元素范圍外之后觸（它發(fā)不參與冒泡） -->
? ? <!-- 步驟：先style里給個(gè)色塊方便操作 -->
? ? <div id="big">鼠標(biāo)事件大全</div>
</body>
<script>
?此為HTML內(nèi)聯(lián)方式（淘汰了） 注：onclick為點(diǎn)擊的意思
?var bianda = document.getElementById('bianda');
?function fn(){
?console.log(88888888);
?}
?此為DOM0級(jí)腳本方式? 注：onclick為點(diǎn)擊的意思
?var bian = document.getElementById('bian');
?bian.onclick=function(){
? console.log(2222222);
?}
?此為DOM2級(jí)模型方式 （可以添加冒泡和捕獲--還未學(xué)習(xí)）注：click為點(diǎn)擊的意思。DOM2不加on了。
?b.addEventListener('click',function(){
? ? ?console.log(42240000);
})
?001鼠標(biāo)事件之---以上三種為鼠標(biāo)單擊事件
?002鼠標(biāo)事件之---鼠標(biāo)雙擊變大
?big.ondblclick = function(){
? ? ?console.log('鼠標(biāo)雙擊變大');
?}
?003鼠標(biāo)事件之---鼠標(biāo)點(diǎn)擊未彈起
?big.onmousedown = function(){
? ? ?console.log('鼠標(biāo)點(diǎn)擊未彈起');
?}
?004鼠標(biāo)事件之---鼠標(biāo)點(diǎn)擊后彈起了
?big.onmouseup = function(){
? ? ?console.log('鼠標(biāo)點(diǎn)擊后彈起了');
?}
?005鼠標(biāo)事件之---鼠標(biāo)移入元素上面時(shí)觸發(fā)
?big.onmouseover = function(){
? ? ?console.log('鼠標(biāo)移入元素上面時(shí)觸發(fā)');
?}
?006鼠標(biāo)事件之---鼠標(biāo)移出元素時(shí)觸發(fā)
?big.onmouseout = function(){
? ? ?console.log('鼠標(biāo)移出元素時(shí)觸發(fā)');
?}
?007鼠標(biāo)事件之---鼠標(biāo)在元素上移動(dòng)時(shí)
?big.onmousemove = function(){
? ? ?console.log('鼠標(biāo)在元素上移動(dòng)時(shí)');
?}
?008鼠標(biāo)事件之---在鼠標(biāo)光標(biāo)從元素外部首次移動(dòng)至元素范圍內(nèi)觸發(fā)、它不參與冒泡
big.onmouseenter = function(){
? ? console.log('在鼠標(biāo)光標(biāo)從元素外部首次移動(dòng)至元素范圍內(nèi)觸發(fā)，不參與冒泡而且在光標(biāo)移動(dòng)到后代元素上是不會(huì)觸發(fā)的);
?}
?009鼠標(biāo)事件之---在位于元素范圍內(nèi)的鼠標(biāo)光標(biāo)移動(dòng)到元素范圍外之后觸，它發(fā)不參與冒泡
?big.mouseleave = function(){
?console.log('在位于元素范圍內(nèi)的鼠標(biāo)光標(biāo)移動(dòng)到元素范圍外之后觸 發(fā)，這個(gè)事件不參與冒泡，而且在光標(biāo)移動(dòng)到后代元素上不會(huì)觸發(fā)')
?}
事件類型
? JavaScript可以處理的事件類型為：鼠標(biāo)事件、鍵盤事件、HTML事件。
注意 ==》 所有的事件處理函數(shù)都會(huì)都有兩個(gè)部分組成，on + 事件名稱，例如click事件的事件
?處理函數(shù)就是：onclick。在這里，我們主要談?wù)撃_本模型的方式來構(gòu)建事件，違反分離原則的內(nèi)聯(lián)模式，我們忽略掉。
