onmouseover事件和onmouseout事件全面理解

2024-04-14 13:23:40

　　这两天接触了onmouseover事件和onmouseout事件，一直以为它们只是简单的分别实现鼠标指针移动到元素上时触发事件和在鼠标指针移出指定的对象时触发事件，但是突然发现这些只是对它们简单的描述，下面让我们一起看看它们终究还有神马奇怪的特性，是好还是坏呢？

　　首先实现一个盒子：

　　给这个盒子上绑定上onmouseover事件和onmouseout事件

　　发现它们不会发生什么问题，然后（嘿嘿，你懂得！）

　　让我们创建一个B元素，让它被嵌套在A元素中，作为A的子元素

　　我们依旧只给外层父元素A绑定onmouseover事件和onmouseout事件，你会发现发生什么了呢？对，没错！当鼠标移入移除A的子元素B的时候居然也发生了onmouseover事件和onmouseout事件！！Why？这不是我想要的！难道这时候B就不在是A的一部分了吗？当然不是，要不也不会在移入B元素时发生onmouseover事件。这样证明，B元素还是A不可分割的一部分啊。

　　那到底是怎么回事呢？终究还是事件冒泡搞得鬼？大家都知道常用的浏览器中有两种事件流：事件冒泡和事件捕获。让我们看一下事件冒泡的定义：事件按照从最特定的事件目标逐级向上传播到最不特定的事件目标(document对象)的顺序。所以说当鼠标移入移除A的子元素B的时候，B的onmouseover事件和onmouseout事件会触发，但是它自己没有这两个事件啊，就把这两个事件传递给了它的父元素A，A有这两个事件所以就发生了我们看到的情况。

　　有人会说那怎么避免呢，毕竟不是所有人都会是这种需求嘛，我们只要父级元素的事件触发就好，子级元素就让它静静的当个美男子就好了。

　　所以W3C在mouseover和mouseout事件中添加了relatedTarget属性：

　　•在mouseover事件中，它表示鼠标来自哪个元素
　　•在mouseout事件中，它指向鼠标去往的那个元素

　　而而Microsoft在mouseover和mouseout事件中添加了两个属性

　　•fromElement，在mouseover事件中表示鼠标来自哪个元素
　　•toElement，在mouseout事件中指向鼠标去往的那个元素

　　所以我们就有了如下代码的实现

document.getElementById('box1').onmouseover = function (e) {
if (!e) e = window.event;
var reltg = e.relatedTarget ? e.relatedTarget : e.fromElement;
while (reltg && reltg != this) reltg = reltg.parentNode;
if (reltg != this) {
// 这里可以编写 onmouseenter 事件的处理代码
alert('111');
}
}
document.getElementById('box1').onmouseout = function (e) {
if (!e) e = window.event;
var reltg = e.relatedTarget ? e.relatedTarget : e.toElement;
while (reltg && reltg != this) reltg = reltg.parentNode;
if (reltg != this) {
// 这里可以编写 onmouseleave 事件的处理代码
alert('2222');
}
}

以上所述是小编给大家介绍的onmouseover事件和onmouseout事件的全面了解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

onmouseover和onmouseout的一些问题思考

一个DIV层,当鼠标移进的时候会触发onmouseover,移出的时候会触发onmouseout. 很简单的逻辑,这也是我们想要的!但随之烦恼也就来了:onmouseover并不会只在移进时才触发,onmouseout也不会只在移出时才触发!鼠标在DIV里面移动时也会可能触发onmouseover或onmouseout. 在上图中,对于'A'来说:当鼠标进入'A'(路径'1′)时那么就会触发'A'的onmouseover事件:接着鼠标移动到'B'(路径'2′),此时'A'会触发onmouse
js 阻止子元素响应父元素的onmouseout事件具体实现

复制代码代码如下: $(".target-menu").mouseout(function(e){ evt = window.event || e; var obj = evt.toElement || evt.relatedTarget; var pa = this; if(pa.contains(obj)) return false; $(this).hide(); });
兼容ie和firefox的鼠标经过(onmouseover和onmouseout)实现--简短版

前段时间一直找这个的简短实现网上也有很多方法昨天发现了这种方法感觉是用代码最少的呵呵 ie下支持css的js ff等支持:hover 就这样了觉得好的就顶起来无标题文档 #b_g_date tr{ event:expression(onmouseover = function(){this.style.backgroundColor='#E3FFC9'},onmouseout = function(){this.style.backgroundColor='#FFFFFF'});
通过onmouseover选项卡实现img图片的变化

复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu
js下关于onmouseout、事件冒泡的问题经验小结

问题是这样的:一个div元素要触发onmouseout事件,同时这个div内部还有子元素,于是当鼠标移动到该div的子元素上时,onmouseout事件也被触发了.在要做浮动层效果的时候会经常遇到这个问题. 解决方法一: 使用jQuery,这个大家都会的: 复制代码代码如下: <div id="div1">触发显示浮动层</div> <div id="div2"> <ul> <li>1</li>
JS小功能(onmouseover实现选择月份)实例代码

效果: 代码: 复制代码代码如下: <head runat="server"> <title></title> <style type="text/css"> #backcolor { width: 400px; height: 400px; background: #FFFF00; tex
js ondocumentready onmouseover onclick onmouseout 样式

复制代码代码如下: <PUBLIC:ATTACH EVENT="ondocumentready" ONEVENT="doInit()" /> <PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="doMouseover()" /> <PUBLIC:ATTACH EVENT="onclick" ONEVENT="doClick()&q
onmouseover事件和onmouseout事件全面理解

这两天接触了onmouseover事件和onmouseout事件,一直以为它们只是简单的分别实现鼠标指针移动到元素上时触发事件和在鼠标指针移出指定的对象时触发事件,但是突然发现这些只是对它们简单的描述,下面让我们一起看看它们终究还有神马奇怪的特性,是好还是坏呢? 首先实现一个盒子: 给这个盒子上绑定上onmouseover事件和onmouseout事件发现它们不会发生什么问题,然后(嘿嘿,你懂得!) 让我们创建一个B元素,让它被嵌套在A元素中,作为A的子元素我们依旧只给外层父元素A绑定onm
react合成事件与原生事件的相关理解

1. 原生事件原生事件就是js的原生事件,如通过document.addEventListener来设置的监听事件. 在react中即使有自己的一套事件机制(见下面合成事件),但有时候的业务场景我们仍然需要使用原生事件.比如我们封装一个Modal弹窗组件,需要在点击非弹窗区域时关掉弹窗,此时我们只能针对document进行原生点击事件监听. 由于原生事件需要绑定在真实DOM上,所以一般是在componentDidMount阶段或者组件/元素的ref的函数执行阶段进行绑定操作,并且注意要在com
深入理解JS的事件绑定、事件流模型

一.JS事件 (一)JS事件分类 1.鼠标事件: click/dbclick/mouseover/mouseout 2.HTML事件: onload/onunload/onsubmit/onresize/onchange/onfoucs/onscroll 3.键盘事件: keydown:键盘按下时触发 keypress:键盘按下并抬起的瞬间触发. keyup:键盘抬起触发 [注意事项] ①执行顺序:keydown keypress keyup ②keypress只能捕获数字,字母,符号键,
js中的事件委托或是事件代理使用详解

起因: 1.这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的: 2.其实我一直都没弄明白,写这个一是为了备忘,二是给其他的知其然不知其所以然的小伙伴们以参考: 概述: 那什么叫事件委托呢?它还有一个名字叫事件代理,JavaScript高级程序设计上讲:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件.那这是什么意思呢?网上的各位大牛们讲事件委托基本上都用了同一个例子,就是取快递来解释这个现象,我仔细揣摩了一下,这个例子还真是恰当,我就不去想别的例子来解释了
JavaScript焦点事件、鼠标事件和滚轮事件使用详解

焦点事件一般利用这些事件与document.hasFocus()方法和document.activeElement属性配合.主要有: blur:元素失去焦点,不会冒泡: DOMFocusIn:同HTML事件focus,于DOM3遭废弃,选用focusin: DOMFocusOut:同HTML事件blur,于DOM3遭废弃,选用focusout: focus:元素获得焦点,不回冒泡: focusin:获得焦点,与HTML事件focus等价,但会冒泡: focusout:失去焦点,与HTML事件b
JS 事件绑定、事件监听、事件委托详细介绍

在JavaScript的学习中,我们经常会遇到JavaScript的事件机制,例如,事件绑定.事件监听.事件委托(事件代理)等.这些名词是什么意思呢,有什么作用呢? 事件绑定要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定事件处理函数.所谓事件处理函数,就是处理用户操作的函数,不同的操作对应不同的名称. 在JavaScript中,有三种常用的绑定事件的方法: 在DOM元素中直接绑定: 在JavaScript代码中绑定: 绑定事件监听函数. 在DOM中直接绑定事件
javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结

抽空学习了下javascript和jquery的事件设计,收获颇大,总结此贴,和大家分享. (一)事件绑定的几种方式 javascript给DOM绑定事件处理函数总的来说有2种方式:在html文档中绑定.在js代码中绑定.下面的方式1.方式2属于在html中绑定事件,方式3.方式4和方式5属于在js代码中绑定事件,其中方法5是最推荐的做法. 方式1: HTML的DOM元素支持onclick.onblur等以on开头属性,我们可以直接在这些属性值中编写javascript代码.当点击div的时候,
浅析js中事件冒泡与事件捕获

目录 01-事件冒泡 1.1-事件冒泡介绍 1.2-事件冒泡利用(事件委托) 1.3-事件冒泡影响与阻止事件冒泡 02-事件捕获 1.1-事件捕获介绍 1.2-事件三个阶段 01-事件冒泡 1.1-事件冒泡介绍本小节知识点:介绍什么是事件冒泡事件冒泡:如果一个元素的事件被触发,那么他的所有父级元素的同名事件也会被依次触发元素->父元素->body->html->document->window 事件冒泡一直存在,只不过以前我们没有给父级元素加同名事件 <!DO
JavaScript 事件流、事件处理程序及事件对象总结

JS与HTML之间的交互通过事件实现.事件就是文档或浏览器窗口中发生的一些特定的交互瞬间.可以使用监听器(或处理程序)来预定事件,以便事件发生时执行相应的代码.这种在传统软件工程中被称为观察员模式,支持页面的行为与页面的外观之间的松散耦合.本文将介绍JS事件相关的基础知识. 一.事件流事件流描述的是从页面中接受事件的顺序. 事件冒泡事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的结点(文档).以下面HTML页面为例,如果你点击了页面中的按钮,那么"
jquery事件与绑定事件

1.首先,我们来看一下经常使用的添加事件的方式: <input type="button" id="btn" value="click me!" onclick="shao();" /> <script type="text/javascript"> function shao() { alert("msg is showing!"); } </script

onmouseover事件和onmouseout事件全面理解

相关推荐

随机推荐