099_鼠标事件
1. onmouseover事件
1.1. onmouseover當鼠標移入某元素時觸發, 移入和移出其子元素時也會觸發。
1.2. 語法
1.2.1. html中:
<element onmouseover="SomeJavaScriptCode">1.2.2. JavaScript中:
object.onmouseover=function(){SomeJavaScriptCode};1.3. onmouseover屬性可以適用于所有html元素, 除了: <base>, <bdo>, <br>, <frame>, <frameset>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>和<title>。
2. onmouseenter事件
2.1. onmouseenter當鼠標移入某元素時觸發。
2.2. 該事件通常與onmouseleave事件一同使用, 在鼠標指針移出元素上時觸發。
2.3. onmouseenter事件類似于onmouseover事件。唯一的區別是onmouseenter事件不持子元素連帶觸發。
2.4. 語法
2.4.1. html中:
<element onmouseenter="myScript">2.4.2. JavaScript中:
object.onmouseenter=function(){myScript};2.5. onmouseenter屬性可以適用于所有html元素, 除了: <base>, <bdo>, <br>, <frame>, <frameset>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>和<title>。
3. onmouseout事件
3.1. onmouseout當鼠標移出某元素時觸發, 移入和移出其子元素時也會觸發。
3.2. 語法
3.2.1. html中:
<element onmouseout="SomeJavaScriptCode">3.2.2. JavaScript中:
object.onmouseout=function(){SomeJavaScriptCode};3.3. onmouseout屬性可以適用于所有html元素, 除了: <base>, <bdo>, <br>, <frame>, <frameset>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>和<title>。
4. onmouseleave事件
4.1. onmouseleave當鼠標移出某元素時觸發。
4.2. 該事件通常與onmouseenter事件一起使用, 該事件在鼠標移動到元素上時觸發。
4.3. onmouseleave事件類似于onmouseout事件。唯一的區別是onmouseleave事件不支持子元素連帶觸發。
4.4. 語法
4.4.1. html中:
<element onmouseleave="myScript">4.4.2. JavaScript中:
object.onmouseleave=function(){myScript};4.5. onmouseleave屬性可以適用于所有html元素, 除了: <base>, <bdo>, <br>, <frame>, <frameset>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>和<title>。
5. onmousemove事件
5.1. onmousemove鼠標在某元素上移動時觸發, 即使在其子元素上也會觸發。
5.2. 語法
5.2.1. html中:
<element onmousemove="SomeJavaScriptCode">5.2.2. JavaScript中:
object.onmousemove=function(){SomeJavaScriptCode};5.3. onmousemove屬性可以適用于所有html元素, 除了: <base>, <bdo>, <br>, <frame>, <frameset>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>和<title>。
6. 例子
6.1.?代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>mouseover、mouseenter、mousemove、mouseout和mouseleave</title><style type="text/css">*{margin: 0;padding: 0;}div {width: 500px;height: 500px;margin: 50px; background: pink;}p {width: 300px;height: 300px;background: red;}</style></head><body><div id="myDiv"><p></p></div><script type="text/javascript">function mymouseover(e){console.log('~~~mymouseover~~~');}function mymouseenter(e){console.log('###mymouseenter###');}function mymousemove(e){console.log('---mymousemove---');}function mymouseout(e){console.log('===mymouseout===');}function mymouseleave(e){console.log('$$$mymouseleave$$$');}var myDiv = document.getElementById('myDiv');myDiv.addEventListener('mouseover', mymouseover);myDiv.addEventListener('mouseenter', mymouseenter);myDiv.addEventListener('mousemove', mymousemove);myDiv.addEventListener('mouseout', mymouseout);myDiv.addEventListener('mouseleave', mymouseleave);</script></body> </html>6.2. 鼠標從空白處移入大div區域
6.3. 緊接著鼠標從大div區域移入小p區域?
6.4. 緊接著鼠標從小p區域移入大div區域?
6.5. 緊接著鼠標移出大div到空白處?
7. onclick事件
7.1. onclick事件會在元素被點擊時發生。
7.2. 語法
7.2.1. html中:
<element onclick="SomeJavaScriptCode">7.2.2. JavaScript中:
object.onclick=function(){SomeJavaScriptCode};7.3. onclick屬性可以適用于所有html元素, 除了: <base>, <bdo>, <br>, <frame>, <frameset>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>和<title>。
8. ondblclick事件
8.1. ondblclick事件會在對象被雙擊時發生。只有鼠標左鍵可以雙擊。
8.2. 語法
8.2.1. html中:
<element ondblclick="SomeJavaScriptCode">8.2.2. JavaScript中:
object.ondblclick=function(){SomeJavaScriptCode};8.3. ondblclick屬性可以適用于所有html元素, 除了: <base>, <bdo>, <br>, <frame>, <frameset>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>和<title>。
9. onmousedown事件
9.1. onmousedown事件會在鼠標按鍵被按下時發生。
9.2. 語法
9.2.1. html中:
<element onmousedown="SomeJavaScriptCode">9.2.2. JavaScript中:
object.onmousedown=function(){SomeJavaScriptCode};9.3. onmousedown屬性可以適用于所有html元素, 除了: <base>, <bdo>, <br>, <frame>, <frameset>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>和<title>。
9.4. 與onmouseup事件相關連得事件發生次序(鼠標左側按鈕):
- onmousedown
- onmouseup
- onclick
9.4. 與onmouseup事件相關連得事件發生次序(鼠標中間按鈕):
- onmousedown
- onmouseup
9.5. 與onmouseup事件相關連得事件發生次序(鼠標右側按鈕):
- onmousedown
- onmouseup
- oncontextmenu
10. onmouseup事件
10.1. onmouseup事件會在鼠標按鍵被松開時發生。
10.2. 語法
10.2.1. html中:
<element onmouseup="SomeJavaScriptCode">10.2.2. JavaScript中:
object.onmouseup=function(){SomeJavaScriptCode};10.3. onmouseup屬性可以適用于所有html元素, 除了: <base>, <bdo>, <br>, <frame>, <frameset>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>和<title>。
10.4. 與onmouseup事件相關連得事件發生次序(鼠標左側按鈕):
- onmousedown
- onmouseup
- onclick
10.4. 與onmouseup事件相關連得事件發生次序(鼠標中間按鈕):
- onmousedown
- onmouseup
10.5. 與onmouseup事件相關連得事件發生次序(鼠標右側按鈕):
- onmousedown
- onmouseup
- oncontextmenu
11. oncontextmenu事件
11.1. oncontextmenu事件在元素中用戶右擊鼠標時觸發并打開上下文菜單。
11.2. 語法
11.2.1. html中:
<elementoncontextmenu="SomeJavaScriptCode">11.2.2. JavaScript中:
object.oncontextmenu=function(){SomeJavaScriptCode};11.3. oncontextmenu屬性可以適用于所有html元素, 除了: <base>, <bdo>, <br>, <frame>, <frameset>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>和<title>。
12. 例子
12.1.?代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>click、dblclick、mousedown、mouseup和contextmenu</title><style type="text/css">div {width: 300px;height: 300px;background: pink;}</style></head><body><div id="myDiv"></div><script type="text/javascript">function myclick(e){console.log('~~~myclick~~~');}function mymousedown(e){console.log('###mymousedown###');}function mymouseup(e){console.log('---mymouseup---');}function mycontextmenu(e){console.log('===mycontextmenu===');}function mydblclick(e){console.log('$$$mydblclick$$$');}var myDiv = document.getElementById('myDiv');myDiv.addEventListener('click', myclick);myDiv.addEventListener('mousedown', mymousedown);myDiv.addEventListener('mouseup', mymouseup);myDiv.addEventListener('contextmenu', mycontextmenu);myDiv.addEventListener('dblclick', mydblclick);</script></body> </html>12.2. 鼠標左鍵
12.3. 鼠標中鍵?
?12.4. 鼠標右鍵
12.5. 鼠標左鍵雙擊?
總結
- 上一篇： windows怎样连接到linux桌面,
- 下一篇： MY-IKuai-2