JavaScript中的mouseover與mouseenter，mouseout和mouseleave的區別

阿新 • • 發佈：2019-01-18

1、mouseover與mouseenter

mouseover事件：不論滑鼠指標穿過被選元素或其子元素，都會觸發 mouseover 事件。

mouseenter事件：只有在滑鼠指標穿過被選元素時，才會觸發 mouseenter 事件。

簡單寫個例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .over{
            background-color: #66d3ff;
            width:400px;
            float:left;
            padding: 10px 10px;
        }
        .enter{
            background-color: #66d3ff;
            width:400px;
            float:left;
            margin-left:30px;
            padding: 10px 10px;
        }
        h2{
            background-color: #fff;
            padding: 5px 5px;
        }
    </style>
</head>
<body>
<p>mouseover 事件:不論滑鼠指標穿過被選元素或其子元素，都會觸發 mouseover 事件。</p>
<p>mouseenter 事件:只有在滑鼠指標穿過被選元素時，才會觸發 mouseenter 事件。</p>
<div class="over">
    <h2>被觸發的 Mouseover 事件次數：<span></span></h2>
</div>
<div class="enter">
    <h2>被觸發的 Mouseenter 事件次數：<span></span></h2>
</div>
<script>
    var x = 0,y = 0;
    var div1 = document.getElementsByClassName("over")[0];
    div1.addEventListener("mouseover",function(){
        var span = this.getElementsByTagName("span")[0];
        span.innerText = (x +=1);
    },false);

    var div2 = document.getElementsByClassName("enter")[0];
    div2.addEventListener("mouseenter",function(){
        var span = this.getElementsByTagName("span")[0];
        span.innerText = (y +=1);
    },false);
</script>
</body>
</html>

效果:

2、mouseout與mouseleave

mouseout事件：不論滑鼠指標離開被選元素還是任何子元素，都會觸發 mouseout 事件。

mouseleave事件：只有在滑鼠指標離開被選元素時，才會觸發 mouseleave 事件。

簡單寫個例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .over{
            background-color: #66d3ff;
            width:400px;
            float:left;
            padding: 10px 10px;
        }
        .enter{
            background-color: #66d3ff;
            width:400px;
            float:left;
            margin-left:30px;
            padding: 10px 10px;
        }
        h2{
            background-color: #fff;
            padding: 5px 5px;
        }
    </style>
</head>
<body>
<p> mouseout事件：不論滑鼠指標離開被選元素還是任何子元素，都會觸發 mouseout 事件。</p>
<p> mouseleave事件：只有在滑鼠指標離開被選元素時，才會觸發 mouseleave 事件。</p>
<div class="over">
    <h2>被觸發的 mouseout 事件次數：<span></span></h2>
</div>
<div class="enter">
    <h2>被觸發的 mouseleave 事件次數：<span></span></h2>
</div>
<script>
    var x = 0,y = 0;
    var div1 = document.getElementsByClassName("over")[0];
    div1.addEventListener("mouseout",function(){
        var span = this.getElementsByTagName("span")[0];
        span.innerText = (x +=1);
    },false);

    var div2 = document.getElementsByClassName("enter")[0];
    div2.addEventListener("mouseleave",function(){
        var span = this.getElementsByTagName("span")[0];
        span.innerText = (y +=1);
    },false);
</script>
</body>
</html>

效果：

JavaScript中的mouseover與mouseenter，mouseout和mouseleave的區別

1、mouseover與mouseenter mouseover事件：不論滑鼠指標穿過被選元素或其子元素，都會觸發 mouseover 事件。 mouseenter事件：

JavaScript中innerHTML與innerText，createTextNode的區別

innerHTML和innerText 它們都會把元素內內容替換掉，區別在於： innerHTML 會把替換內容裡的 HTML 標記解釋執行。 innerText 會把替換內容裡的 HTML 標記原樣輸出而不執行。例如有如下程式碼： var content = "<b>這是對innerHT

mouseover與mouseenter、mouseout與mouseleave

mouseenter 和 mouseleave 不支援冒泡 mouseover 和 mouseout 支援冒泡 mouseover與mouseenter 不論滑鼠指標穿過被選元素或其子元素，都會觸發 mouseover 事件。只有在滑鼠指標從元素外穿入被選元素

js中let與var，以及const的區別

**！**let /var定義變數 1，let 不具有變數提升,具有塊級作用域，不允許重複定義 let定義的變數是塊級的變數。使用 let 宣告的變數，在宣告前無法使用，否則將會導致錯誤；如果未在 let 語句中初始化您的變數，則將自動為其分配 JavaScript 值 undefined。

JavaScript中apply與call的用法意義及區別

call和apply大概的用法差不多，簡單的看下例子： <input type="text" id="myText" value="input text"> <script> function Obj(){this.value="物件！"

js 的prototype 屬性和用法，外加proto JavaScript中proto與prototype的關係

var ob = { };//超級簡單的空物件 alert(JSON.stringify(ob.prototype));// undefined 能夠引用prototype的東西絕對是函式，絕對是函式，絕對是函式，prototype是屬於函式的一個屬性，prototype是屬於函式的一個屬性，prototy

javascript中mouseover和mouseout事件詳解

與 mouseenter 事件不同，不論滑鼠指標穿過被選元素或其子元素，都會觸發 mouseover 事件。只有在滑鼠指標穿過被選元素時，才會觸發 mouseenter 事件。與 mouseout 事件不同，只有在滑鼠指標離開被選元素時，才會觸發

JavaScript中mouseover和mouseout多次觸發解決辦法

問題描述我希望當滑鼠移動到id1上的時候，id2顯示，當滑鼠離開id1的時候，id2顯示。問題如下： 1.當滑鼠從id1上移動到id2上的時候，id由有顯示變為不顯示，然後變為顯示 2.當滑鼠從id2上移動到id1上的時候， id2有顯示變為不顯示，然後變為顯示我希望的是當滑鼠在id1或者id2

mouseover，mouseenter，mouseout，mouseleave的區別

事件 sel mouseout 指針 seo post log class 鼠標指針 mouseover ：不論鼠標指針穿過被選元素或其子元素，都會觸發 mouseover 事件。 mouseout ：不論鼠標指針離開被選元素還是任何子元素，都會觸發 mouseout 事件

python中的幾個高階問題詳解（init，裝飾器執行步驟，@staticmethod和@classmethod區別，單例模式，魔法方法，object繼承與不繼承區別）

第一個問題，init 在定義一個類時，什麼時候用__init__函式，什麼時候不用，用不用有什麼區別？首先__init__是為了初始化用的，但是初始化的時候不一定要用這個，直接定義也是可以的，比如 class A(object): test_a = '123' 而我們用__

JavaScript中【陣列的合併】和【物件的合併 (淺克隆，深克隆)】

1. 數組合並 1.1 陣列concat()方法 //concat() //陣列的拼接方法，返回拼接後的新陣列 var arr1 = [1,2,3]; var arr2 = [5,6,7]; var res = a

javaScript中字串與整型，浮點型之間的轉換

var a=3; var b='213'; a=parseInt(b); var c=0.5; var d='0.98'; d=parsetFloat(c); var e='ff'; var f=999; e=''+f; 參考url： http://www.intern

JavaScript中的&&與&與，||或|或詳解

在我們先前的使用過程中，我們很多時候都是遇到的是把他們放在if（）等判斷語句中，直接判斷結果是否為真或者假。比如if（true&&false）判斷為假，當然我們用的時候是各種表示式。關於&&，&，||，|先進行一下說明 &am

從問題入手，深入瞭解JavaScript中原型與原型鏈

# 從問題入手，深入瞭解JavaScript中原型與原型鏈 ## 前言開篇之前，我想提出3個問題： 1. **新建一個不新增任何屬性的物件為何能呼叫toString方法?** 2. **如何讓擁有相同建構函式的不同物件都具備相同的行為?** 3. **instanceof關鍵字判斷物件型別的依據是什麼?

javascript中不易分清的slice,splice和split三個函數

也會 www d參數 keyword str pac 說明截取 tab 1.slice（數組）用法：array.slice(start,end) 解釋：該方法是對數組進行部分截取，並返回一個數組副本；參數start是截取的開始數組索引，end參數等於你要取的最後一個字符

javaScript中的數據類型和命名規則

mbo ble 連接 ron define not nan 註意實的有7種數據類型： undefined（未定義） null（空）, boolean（布爾型） string（字符串） symbol(符號), number（數字） object（對象）命名規則 Var

JavaScript中變量、作用域和內存問題（JavaScript高級程序設計第4章）

外部對象的引用 pan object 揮手 fun 可用內存限制 argument 一、變量（1）ECMAScript變量肯能包含兩種不同的數據類型的值：基本類型值和引用類型值。基本類型值指的是簡單的數據段，引用類型值指那些可能由多個值構成的對象。（2）基本數據類型

js中decodeURI()和encodeURI()區別，decodeURIComponent和encodeURIComponent區別

nbsp sch www 問題 encode 替換副本字符替換序列 decodeURI()定義和用法:decodeURI()函數可對encodeURI()函數編碼過的URI進行解碼.語法:decodeURI(URIstring)參數描述:URIstring必需,一個字

JavaScript中的兩個“0” -0和+0

Coding spl comment nal inf exp lai 數值 other JavaScript中的兩個“0”（翻譯）本文翻譯自JavaScript’s two zeros JavaScript has two zeros: ?0 and +0. Th

javascript中變量重新賦值和引用重新賦值問題

重新復制 asc 代碼執行問題數據類型更改 [0 遇到 javascript中經常會遇到這樣的問題： var a=3; var b=a; a=5; ; //結果為5; ; //結果為3；而在下面的代碼中情況卻發生了變化： var a=1,b=2,c=3

JavaScript中的mouseover與mouseenter，mouseout和mouseleave的區別

相關推薦