`
davidxiaozhi
  • 浏览: 241467 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

JavaScript事件问题

阅读更多

当你进入一个dom A元素时(当前dom元素已绑定onmouseover事件)

是先进入当前dom A元素,在子元素,,在子子元素,依次类推 ,就像你从家外面回到卧室一样,先进单元楼道门,在进入自己的家门,然后卧室门  你会发现类似开门事件的onmouseover事件,只要你打开一扇门事件就会被触发 ,然后再向上依次冒泡传递给外层dom A元素,你已绑定的dom A元素得onmouseover的就会又被触发。



在这里使用onmouseover事件的朋友就该注意了(尤其是绑定的元素内部存在很多子元素时),如果你仅仅是处理隔行变色的话,那么就当我没说,如果进行数据处理如 自动翻译 等 就得小心了,你还会发现类似绑定在外层dom A元素上的  onmouseover事件会被多次重复调用。



依次类推当你离开卧室的时候的关门事件就像onmouseout

使用onmouseout事件的朋友们进行特殊处理数据时的就该注意了。


如果你事件onmouseout绑定到外层元素dom A 就像是单元门,内部元素的关门事件onmouseout会依次向上事件冒泡传递给外层dom A元素,调用绑定在外层dom A元素上的onmouseout事件,如果外层dom元素同时绑定了onmouseout 和onmouseover, 那么当你离子元素事件时onmouseout冒泡传递给外层dom元素时,调用已绑定onmouseout后。  同时由于你没有移出dom A  ,而鼠标进入了父辈元素或其他子元素,那么其他兄弟元素的或父辈元素的onmouseover又会再次被冒泡到外层dom A元素。


冒泡上利用者两个事件进行处理的效果很奇妙


可能Ie考虑到这一点了Ie推出了两个新方法mouseenter(类似onmouseover)和mouseleave(类似onmouseout)事件,这两个事件不会被冒泡

 

分享到:
评论

相关推荐

    JavaScript 事件处理 事件绑定 示例代码

    事件绑定 示例代码JavaScript 事件处理 事件绑定 示例代码JavaScript 事件处理 事件绑定 示例代码JavaScript 事件处理 事件绑定 示例代码JavaScript 事件处理 事件绑定 示例代码JavaScript 事件处理 事件绑定 示例...

    JavaScript事件机制详细研究

    JavaScript 事件机制详细研究 ...JavaScript 事件机制是非常复杂的,它需要了解事件机制的实现方式、原理和浏览器的兼容性问题。只有深入了解这些知识点,才能编写出高效、可靠的 JavaScript 代码。

    JavaScript 事件处理 常用事件(鼠标事件、键盘事件、表单事件)示例代码

    JavaScript 事件处理 常用事件(鼠标事件、键盘事件、表单事件)示例代码JavaScript 事件处理 常用事件(鼠标事件、键盘事件、表单事件)示例代码JavaScript 事件处理 常用事件(鼠标事件、键盘事件、表单事件)示例...

    JavaScript程序设计——事件处理实验报告.docx

    实验报告详细介绍了JavaScript事件处理的相关知识,这在Web开发中是非常关键的一部分,因为事件是用户与网页交互的主要方式。以下是对各个知识点的详细说明: 1. **JavaScript事件基本概念**: - **事件**:是用户...

    JavaScript 事件处理 二级菜单级联 示例代码

    JavaScript 事件处理 二级菜单级联 示例代码JavaScript 事件处理 二级菜单级联 示例代码JavaScript 事件处理 二级菜单级联 示例代码JavaScript 事件处理 二级菜单级联 示例代码JavaScript 事件处理 二级菜单级联 ...

    JavaScript 事件处理 下拉列表和可选项 示例代码

    JavaScript 事件处理 下拉列表和可选项 示例代码JavaScript 事件处理 下拉列表和可选项 示例代码JavaScript 事件处理 下拉列表和可选项 示例代码JavaScript 事件处理 下拉列表和可选项 示例代码JavaScript 事件处理 ...

    javascript事件详解

    JavaScript事件详解 JavaScript是一种基于浏览器的脚本语言,它的事件机制是实现动态交互的重要部分。在JavaScript中,事件是用户或浏览器对网页进行操作时触发的特定动作,比如点击按钮、鼠标移动等。本文将详细...

    JavaScript动态加载事件

    实现JavaScript 动态加载事件

    第6章 JavaScript中的事件与事件处理

    第6章 JavaScript中的事件与事件处理

    JavaScript程序设计课件:第 5 章 事件和事件处理.ppt

    例如:<html> <head> <title> Example: 窗口的 load 和 unload 事件 </title> <script language="JavaScript"> function lh() { alert(" 窗口执行了 load 事件 "); } function ulh() { alert(" 窗口执行了 unload ...

    javascript事件查询综合

    JavaScript事件查询是Web开发中的重要概念,它涉及到用户与网页交互时的各种响应处理。这篇文档“javascript事件查询综合”很可能是对JavaScript事件处理机制的详细阐述。在Web开发中,JavaScript事件模型允许开发者...

    javascript事件大集合

    JavaScript事件是Web开发中不可或缺的一部分,它允许我们与用户进行交互,响应用户的操作,并以此来更新页面内容。本文将深入探讨JavaScript事件的各个方面,帮助开发者更好地理解和应用这些关键概念。 一、事件...

    Javascript事件的定义.doc

    JavaScript事件是网页交互的核心,它定义了当特定动作发生时,浏览器如何响应。这些动作可以是用户的操作,如点击、滚动、键盘输入,或者是页面加载、数据改变等。JavaScript事件的处理方式有多种,包括事件处理属性...

    Javascript_事件处理

    Javascript_事件处理,讲解了JAVASCRIPT事件开发中注意的事项,步骤,有条理的讲解

    JAVASCRIPT事件与动态页面编程.pdf

    JAVASCRIPT事件与动态页面编程 本文概述了JAVASCRIPT事件、事件监视器和事件处理器,并通过一个示例程序详细介绍了如何使用JAVASCRIPT事件处理器进行动态页面编程。 JAVASCRIPT事件是指人机交互的结果,如鼠标移动...

    WEB页编程技巧──JavaScript事件的应用.pdf

    "WEB页编程技巧──JavaScript事件的应用.pdf" 本文档主要介绍了JavaScript事件在WEB页编程中的应用,包括JavaScript事件的概念、分类、事件处理器的使用、事件驱动编程等方面的知识点。 一、JavaScript事件概述 ...

    JavaScript之DOM事件(源代码)

    JavaScript之DOM事件(源代码)JavaScript之DOM事件(源代码)JavaScript之DOM事件(源代码)JavaScript之DOM事件(源代码)JavaScript之DOM事件(源代码)JavaScript之DOM事件(源代码)JavaScript之DOM事件(源...

    JavaScript 趣味案例-事件处理-dom操作表格 示例代码

    JavaScript 事件处理 示例代码 包含表格表单创建、样式设置、事件绑定(表格、表单、复选框)、事件处理 JavaScript 事件处理 示例代码 包含表格表单创建、样式设置、事件绑定(表格、表单、复选框)、事件处理...

    AJAX中不触发javascript事件

    标题中的“AJAX中不触发javascript事件”指的是在使用AJAX技术进行页面更新时,可能出现JavaScript事件不按预期触发的情况。这通常是由于AJAX请求更新页面部分时,不会触发表单提交、点击或其他依赖于页面刷新的...

Global site tag (gtag.js) - Google Analytics