zoukankan      html  css  js  c++  java
  • mouseover 和mouseenter的区别;冒泡与捕获的区别;冒泡与捕获的如何阻止

    一、 mouseover 和mouseenter的区别

    mouseover: 只要鼠标指针移入事件所绑定的元素或其子元素,都会触发该事件
    mouseenter: 只有鼠标指针移入事件所绑定的元素时,才会触发该事件

    换句话说就是,如果一个元素没有子元素,那么该元素绑定mouseover或者mouseenter两种事件效果没有区别,鼠标每次移入元素时都只会触发一次事件;如果绑定了mouseover事件的元素存在子元素,那么,每次移入该元素时都会触发一次事件(包括从外部移入和从子元素移入),移入子元素时也会触发一次事件。

    一个是鼠标自动在绑定的元素或者子元素就可以触发,一个是必须移动在绑定的元素才能触发

    1、mouseover和mouseout会有事件冒泡,也就是说鼠标移入、移出当前元素的子元素或父元素时都会触发该事件。
    2、mouseenter和mouseleave 事件不会冒泡,依旧是说鼠标移入、移出时,单签元素的子元素或父元素不会触发该事件。


    二、事件传播的机制(冒泡和捕获), 使用代码来验证, 事件冒泡和事件捕获的区别

    事件捕获(event capturing):当鼠标点击或者触发dom事件时,浏览器会从根节点开始由外到内进行事件传播,即点击了子元素,如果父元素通过事件捕获方式注册了对应的事件的话,会先触发父元素绑定的事件。
    事件冒泡(dubbed bubbling):与事件捕获恰恰相反,事件冒泡顺序是由内到外进行事件传播,直到根节点

    事件冒泡: 多个元素嵌套,有层次关系,这些元素都注册了相同的事件,如果里面的元素的事件触发了, 外面的元素事件自动触发。由内向外。
    事件捕获: 多个元素嵌套,有层次关系,这些元素都注册了相同的事件,如果里面的元素的事件触发了, 外面的元素事件自动触发。由外向内。
    addEventListener("没有on的事件类型","事件处理函数","控制事件阶段") 事件控制阶段中 :false:冒泡阶段 true:捕获阶段
    e.eventPhase 判断事件阶段(冒泡和捕获不能同时出现)

    三、阻止事件的默认行为, 事件冒泡和事件捕获可以阻止吗? 怎么阻止?
    阻止事件的传播:
    • 在W3c中,使用stopPropagation()方法
    • 在IE下设置cancelBubble = true;
    在捕获的过程中stopPropagation();后,后面的冒泡过程也不会发生了~


    阻止事件的默认行为,例如click <a>后的跳转~
    • 在W3c中,使用preventDefault()方法;
    • 在IE下设置window.event.returnValue = false;

    1.setInterval的 this指向
    setInterval的 this指向 是window
    2. 怎么设置自定义属性
    自定义属性:element.setAttributet("属性 ") 设置属性
    3.怎么阻止事件冒泡阻止事件冒泡: e.stopPropagation(); 谷歌火狐阻止事件冒泡的方法
    e.cancelBubble = true; IE8及以前版本浏览器阻止冒泡的方法

  • 相关阅读:
    随便瞎说
    第六次作业
    第五次作业
    第四次作业
    第二次作业
    第一周java心得
    Ext.Net学习笔记之动态加载TabPanel
    Ext.net学习笔记之ViewPort布局
    MyEclipse连接mySql数据库笔记
    配置服务器
  • 原文地址:https://www.cnblogs.com/zycs/p/12683947.html
Copyright © 2011-2022 走看看