Event 對象

Event 對象代表事件的狀態，比如事件在其中發生的元素、鍵盤按鍵的狀態、鼠標的位置、鼠標按鈕的狀態。

事件通常與函數結合使用，函數不會在事件發生前被執行！

事件句柄　(Event Handlers)

HTML 4.0 的新特性之一是能夠使 HTML 事件觸發瀏覽器中的行爲，比如當用戶點擊某個 HTML 元素時啓動一段 JavaScript。下面是一個屬性列表，可將之插入 HTML 標籤以定義事件的行爲。

提示

寫在非script標籤裏面的JavaScript代碼，如:onclick="fn()"。會自動進行 eval 轉化，裏面的任何字符都會當成代碼來執行，如onclick='return false'。
寫在script標籤裏的代碼，如:onclick=someCode。
一般情況下，爲函數。
下面事件屬性所有語法皆爲script標籤的用法。

鼠標事件

1. onclick

在元素被點擊時發生

HTML標籤支持

除了 ：<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, 和 <title>以外，
都支持。

瀏覽器支持

google	IE	firefox	safari	opera
true	true	true	true	true

語法

ElementObject.onclick=function

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <title>zsh</title>
    </head>
    <body>
        <div id="div" name="My div" style='height:500px;'></div>
    </body>
    <script>
    div.οnclick=function(){
        alert("圖像加載出錯，請重新刷新頁面。");
    }
    </script>
</html>

2. oncontextmenu

在元素中用戶右擊鼠標時觸發並打開上下文菜單

瀏覽器支持

google	IE	firefox	safari	opera
true	true	true	true	true

注意

所有瀏覽器都支持 oncontextmenu 事件， contextmenu 元素只有 Firefox 瀏覽器支持。

語法

ElementObject.oncontextmenu=function

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>zsh</title>
</head>
<body>
    <input id="div" name="My div"/>
</body>
<script>
    div.oncontextmenu = function(){
        return false;
    }
</script>
</html>

3. ondblclick

在對象被雙擊時發生

HTML標籤支持

除了 ：<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, 和 <title>以外，
都支持。

瀏覽器支持

google	IE	firefox	safari	opera
true	true	true	true	true

語法

ElementObject.ondblclick=function

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>zsh</title>
</head>
<body>
    <input id="div" name="My div"/>
</body>
<script>
    div.ondblclick = function(){
        alert(1);
    }
</script>
</html>

4. onmousedown

在鼠標按鍵被按下時發生

提示：

與 onmousedown 事件相關連得事件發生次序（鼠標左側/中間按鈕）：
* onmousedown
* onmouseup
* onclick

與 onmousedown 事件相關連得事件發生次序 (鼠標右側按鈕):
* onmousedown
* onmouseup
* oncontextmenu

HTML標籤支持

除了 ：<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, 和 <title>以外，
都支持。

瀏覽器支持

google	IE	firefox	safari	opera
true	true	true	true	true

語法

ElementObject.onmousedown=function

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>zsh</title>
</head>
<body>
    <input id="div" name="My div"/>
</body>
<script>
    div.onmousedown = function(){
        alert(1);
    }
</script>
</html>

5. onmouseenter

鼠標指針移動到元素上時觸發

提示：

該事件通常與 onmouseleave 事件一同使用, 在鼠標指針移出元素上時觸發。
onmouseenter 事件類似於 onmouseover 事件。唯一的區別是 onmouseenter 事件不支持冒泡。

HTML標籤支持

除了 ：<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, 和 <title>以外，
都支持。

瀏覽器支持

google	IE	firefox	safari	opera
30.0	5.5	true	6.1	11.5

語法

ElementObject.onmouseenter=function

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>zsh</title>
</head>
<body>
<div id='div'>
    <input name="My div"/>
</div>
</body>
<script>
    div.onmouseenter = function(){
        console.log(1);
    }
</script>
</html>

6. onmouseleave

鼠標移除元素時觸發

提示：

該事件通常與 onmouseenter 事件一起使用，該事件在鼠標移動到元素上時觸發。
onmouseleave 事件類似於 onmouseout 事件。唯一的區別是 onmouseleave 事件不支持冒泡。

HTML標籤支持

除了 ：<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, 和 <title>以外，
都支持。

瀏覽器支持

google	IE	firefox	safari	opera
30.0	5.5	true	6.1	11.5

語法

ElementObject.onmouseleave=function

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>zsh</title>
</head>
<body>
<div id='div' style="height:12px;border:1px solid red;">
    <input name="My div"/>
</div>

<div id='DD'  style="height:12px;margin-top:50px;border:1px solid red;">
    <input name="My div"/>
</div>
</body>
<script>

    var Ele = div.childNodes[1];
    var DDEle = DD.childNodes[1];

    div.onmouseleave = function(){
        var width = Ele.clientWidth;
        Ele.style.width = width + 1 + "px";
    }

    DD.onmouseout = function(){
        var width = DDEle.clientWidth;
        DDEle.style.width = width + 1 + "px";
    }

</script>
</html>

7. onmousemove

在鼠標指針移到指定的對象時發生

HTML標籤支持

除了 ：<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, 和 <title>以外，
都支持。

瀏覽器支持

google	IE	firefox	safari	opera
true	true	true	true	true

語法

ElementObject.onmousemove=function

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>zsh</title>
</head>
<body>
<div id='div' style="height:120px;border:1px solid red;"></div>
</body>
<script>
    var lastX = "";//保存上一個X的座標點 
    div.onmousemove = function(e){
        e = e || window.event;
        if(lastX){
            if(e.pageX>lastX){
                console.log("右移");
            }else if(e.pageX<lastX){
                console.log("左移");
            }
        }
        lastX = e.pageX;
    }
</script>
</html>

8. onmouseover

鼠標指針移動到指定的元素上時發生

提示：

該事件通常與 onmouseout 事件一起使用，該事件在鼠標移動到元素上時觸發。
onmouseover 事件類似於 onmouseenter 事件。唯一的區別是 onmouseover 事件支持冒泡。

HTML標籤支持

除了 ：<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, 和 <title>以外，
都支持。

瀏覽器支持

google	IE	firefox	safari	opera
true	true	true	true	true

語法

ElementObject.onmouseover=function

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>zsh</title>
</head>
<body>
<div id='div' style="height:120px;border:1px solid red;"></div>
</body>
<script>
    div.onmouseover = function(){
        console.log("你進入了我的範圍");
    }
    div.onmouseout = function(){
        console.log('你離開了我的範圍');
    }
</script>
</html>

9. onmouseout

在鼠標指針移出指定的對象時發生

提示：

該事件通常與 onmouseover 事件一起使用，該事件在鼠標移動到元素上時觸發。
onmouseout 事件類似於 onmouseleave 事件。唯一的區別是 onmouseout 事件支持冒泡。

HTML標籤支持

除了 ：<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, 和 <title>以外，
都支持。

瀏覽器支持

google	IE	firefox	safari	opera
true	true	true	true	true

語法

ElementObject.onmouseout=function

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>zsh</title>
</head>
<body>
<div id='div' style="height:120px;border:1px solid red;"></div>
</body>
<script>
    div.onmouseover = function(){
        console.log("你進入了我的範圍");
    }
    div.onmouseout = function(){
        console.log('你離開了我的範圍');
    }
</script>
</html>

10. onmouseup

在鼠標按鍵被鬆開時發生

提示：

與 onmousedown 事件相關連得事件發生次序（鼠標左側/中間按鈕）：
* onmousedown
* onmouseup
* onclick

與 onmousedown 事件相關連得事件發生次序 (鼠標右側按鈕):
* onmousedown
* onmouseup
* oncontextmenu

HTML標籤支持

除了 ：<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, 和 <title>以外，
都支持。

瀏覽器支持

google	IE	firefox	safari	opera
true	true	true	true	true

語法

ElementObject.onmouseup=function

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>zsh</title>
</head>
<body>
<div id='div' style="height:120px;border:1px solid red;"></div>
</body>
<script>
    div.onmousedown = function(){
        console.log("你點擊了鼠標");
    }
    div.onmouseup = function(){
        console.log("你鬆開了鼠標");
    }
</script>
</html>

文檔內容出自 W3cSchool和菜鳥教程，如需查看更詳細的有關內容請登錄 http://www.w3school.com.cn/ 和 http://www.runoob.com/

zzzzzzz周紹輝

發佈了44 篇原創文章 · 獲贊 12 · 訪問量 5萬+

私信關注

Event對象之鼠標事件

Event 對象

Event 對象

事件句柄 (Event Handlers)

提示

鼠標事件

1. onclick

HTML標籤支持

瀏覽器支持

語法

2. oncontextmenu

瀏覽器支持

注意

語法

3. ondblclick

HTML標籤支持

瀏覽器支持

語法

4. onmousedown

提示：

HTML標籤支持

瀏覽器支持

語法

5. onmouseenter

提示：

HTML標籤支持

瀏覽器支持

語法

6. onmouseleave

提示：

HTML標籤支持

瀏覽器支持

語法

7. onmousemove

HTML標籤支持

瀏覽器支持

語法

8. onmouseover

提示：

HTML標籤支持

瀏覽器支持

語法

9. onmouseout

提示：

HTML標籤支持

瀏覽器支持

語法

10. onmouseup

提示：

HTML標籤支持

瀏覽器支持

語法

事件句柄　(Event Handlers)