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及以前版本浏览器阻止冒泡的方法

  • 相关阅读:
    推荐系统 蒋凡译 第一章 引言 读书笔记
    神经网络与深度学习 邱锡鹏 第5章 卷积神经网络 读书笔记
    神经网络与深度学习 邱锡鹏 第4章 前馈神经网络 读书笔记
    神经网络与深度学习 邱锡鹏 第3章 线性模型 读书笔记
    神经网络与深度学习 邱锡鹏 第2章 机器学习概述 读书笔记
    神经网络与深度学习 邱锡鹏 第1章 绪论 作业
    神经网络与深度学习 邱锡鹏 第1章 绪论 读书笔记
    算法笔记 上机训练实战指南 第13章 专题扩展 学习笔记
    算法笔记 第13章 专题扩展 学习笔记
    算法笔记 上机训练实战指南 第11章 提高篇(5)--动态规划专题 学习笔记
  • 原文地址:https://www.cnblogs.com/zycs/p/12683947.html
Copyright © 2011-2022 走看看