• home > webfront > ECMAS > javascript >

    JS基础:鼠标事件mouseenter/mouseover以与变量赋值及比较的异同

    Author:[email protected] Date:

    mouseover和mouseenter的异同体现,​事件的触发时机。基本类型 (primitive values) 与引用类型 (reference values) 赋值与比较,需要注意的地方是对于JS对象,因为是引用地址,不同变量实际引用的是统一个值

    鼠标事件:

    mouseenter/mouseover

    • mouseover(鼠标覆盖):当鼠标移入元素或其子元素都会触发事件,所以有一个重复触发,冒泡过程。对应的移除事件是mouseout

    • mouseenter(鼠标进入):当鼠标移入元素本身(不包含元素的子元素)会触发事件,也就是不会冒泡,对应的移除事件是mouseleave

    mouseenter/mouseover区别点:

    mouseenter不会冒泡,简单的说,它不会被它本身的子元素的状态影响到.

    mouseover就会被它的子元素影响到,在触发子元素的时候,mouseover会冒泡触发它的父元素.(想要阻止mouseover的冒泡事件就用mouseenter)

    mouseenter/mouseover共同点:

    当二者都没有子元素时,二者的行为是一致的,但是二者内部都包含子元素时,行为就不同了.

    总结就是:

    mouseover和mouseenter的异同体现在两个方面:

    • 是否支持冒泡

    • 事件的触发时机

    可见mouseover事件因其具有冒泡的性质,在子元素内移动的时候,频繁被触发,如果我们不希望如此,可以使用mouseenter事件代替之,但是早期只有ie浏览器支持该事件。

    结合其对称事件, mouseleave, mouseenter DOM事件的行为方式与CSS  :hover 伪类非常相似

    变量赋值

    基本类型变量赋值

    var a = "apple";
    var b = a;
    a = "banana";

    此时,a 值为banana  b值为apple

    引用类型变量赋值

    var a = {name: "apple"};
    var b = a;
    a.name = "banana";
    b.name//banana

    此时,a.name 值为 banana;   b.name 值为banana

    变量取值引用类型的值

    var a = {name: "apple"};
    var b = a.name;
    b= "banana";
    a.name//apple

    这个要从ECMAScript的变量值类型说起~

    类型共有两种:

    • 基本类型 (primitive values) - 包括Undefined, Null, Boolean, Number和String五种基本数据类型

    • 引用类型 (reference values) - 保存在内存中的对象们,不能直接操作,只能通过保存在变量中的地址引用对其进行操作

    现在回来看第一个例子例1.1

    "apple"是String类型,属于基本类型,这时值是这样储存的:

    这时a的值被copy了一份赋给了b:

    所以,从此a和b井水不犯河水,各自怎么修改都不会影响对方了~

    再来看第二个例子例1.2

    {name: "apple"}是一个Object,属于引用类型,赋值前后值是这样存储的:

    所以当a.name = "banana";时,修改的是大家共同指向的内存中的object的属性值,所以b.name的值也就跟着变了。

    例1.3中

    var a = {name: "apple"};
    var b = a;
    a = {name: "banana"};
    // {name: "banana"} 是内存中的一个新的Object了,
    // a变量存储的地址也是指向这个新的Object的了,所以和b又无关了
    b.name //还是"apple"

    例1.4中

    var a = {count: 2};
    var b = a.count;
    // a.count是Number类型,所以值被copy给b,
    // 从此再怎么修改与b无关了
    a.count = 3;
    b //还是2

    小总结,变量赋值时总是会copy一份的,如果是基本类型,copy的就是实际的值,如果是引用类型,copy的是指向Object的地址值,所以指向的还是同一个Object。


    变量比较

    对于基本类型,比较的就是实际的值,而对于引用类型(Array也是一种Object),比较的是地址值,虽然两个数组内容是一样的,但它们在内存中是两个Object,地址是不一样,所以比较的结果是false。


    参考文章:

    mouseover和mouseenter的区别 https://www.cnblogs.com/psxiao/p/11543333.html



    转载本站文章《JS基础:鼠标事件mouseenter/mouseover以与变量赋值及比较的异同》,
    请注明出处:https://www.zhoulujun.cn/html/webfront/ECMAScript/js/2016_0106_384.html