在做mouseenter与mouseleave的兼容时,我们需要用到事件对象的relatedTarget属性 function getRelatedTarget(e) { var t = e.relatedTarget if (t) { return t } return e.fromElement === e.target ? e.toElement : e.fromElement; } String("mouseenter,mouseleave").replace(/\w+/g,

原文:http://www.quirksmode.org/js/events_mouse.html#relatedtarget W3C在mouseover和mouseout事件中添加了relatedTarget属性.在mouseover事件中,它表示鼠标来自哪个元素,在mouseout事件中,它指向鼠标去往的那个元素. 而Microsoft添加了两个属性: fromElement在mouseover事件中表示鼠标来自哪个元素. toElement在mouseout事件中指向鼠标去往的那个元素.

在发生mouseover和mouseout事件时,还会涉及更多的元素.这两个事件都会涉及把鼠标指针从一个元素的边界之内移到另一个元素边界之内.对mouseover事件而言,事件的主目标是获得光标的元素,而相关元素就是那个失去光标的元素.类似地,对mouseout事件而言,事件的主目标是失去光标的元素,而相关元素则是获得光标的元素. DOM通过event对象的relatedTarget属性提供了相关元素的信息.这个属性只对于mouseover和mouseout事件才包含值:对于其他事件,这个属性的

在标准DOM中,mouseover和mouseout所发生的元素可以通过event.target来访问,相关元素通过event.relatedTarget属性来访问.event.relatedTarget属性在mouseover中相当于IE浏览器的event.fromElement属性,在mouseout中相当于IE浏览器的event.toElement,jQuery对其进行了封装,使之能兼容各种浏览器. function getRelatedTarget (event) { if (event

1.事件相关概念 事件类型:一个用来说明发生什么类型事件的字符串 事件目标:是发生的事件或与之相关的对象. 事件处理程序(事件监听程序):是处理货响应事件的函数. 事件对象:是与特定事件相关并且包含有关该事件详细信息的对象. 事件传播:是浏览器决定哪个对象触发其事件处理程序的过程. 事件捕获:在容器元素上注册的特定处理程序有机会再事件传播打破真实目标之前拦截它. 阻止标签默认事件的发生   2.Window事件 focus,blur不冒泡.focusin,focusout冒泡. load当文档和

正文 作者打字速度实在不咋地,源码部分就用图片代替了,都是截图,本文讲解的Zepto版本是1.2.0,在该版本中的event模块与1.1.6基本一致.此文的fastclick理解上在看过博客园各个大神的文章后对我确实有很大的帮助,当然,我的某些观点可能不是很准确甚至有错误,欢迎讨论,白天基本在线. zepto的event 可以结合上一篇JavaScript事件详解-原生事件基础(一)综合考虑 源码暂且不表,github里还有中文网站都能下到最新版的zepto.整个event模块不长,274行,我

简单的鼠标移动事件: 进入 mouseenter:不冒泡 mouseover: 冒泡 不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件 只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件 移出 mouseleave: 不冒泡 mouseout:冒泡 不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件 只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件 我们通过一个案例观察下问题: 给一个嵌套的层级绑定mouseout事件

× 目录 [1]类型 [2]顺序 [3]坐标位置[4]修改键[5]相关元素[6]鼠标按键[7]滚轮事件[8]移动设备 前面的话 鼠标事件是web开发中最常用的一类事件,毕竟鼠标是最主要的定位设备.本文将详细介绍鼠标事件的内容 类型 鼠标事件共10类,包括click.contextmenu.dblclick.mousedown.mouseup.mousemove.mouseover.mouseout.mouseenter和mouseleave click 当用户按下并释放鼠标按键或其他方式“激活”

关于js编程, 主要是, 绝大部分是用 jquery. 但是, js原生的一些方法和属性也是要掌握的, 这个只是在 遇到的时候, 记一下就好了, 如: event的relatedTarget属性: 主要就是针对 mouseout和 mouseover而言的, 返回跟这个事件 相关的 dom元素, mouseout会返回被 进入的dom元素, mouseover会返回被 离开的元素: $("p").mouseover(function(e){ alert(e.relatedTarget.

Bootstrap模态弹出窗有三种方式: 1.href触发模态弹出窗元素: <a class="btn btn-primary" data-toggle="modal" href="#mymodal-link" id="href-btn">通过链接href属性触发</a> <!-- 模态弹出窗内容 --> <div class="modal fade" tabind

导入JavaScript插件: 一次性导入:Bootstrap提供了一个单一的文件,这个文件包含了Bootstrap的所有JavaScript插件,即bootstrap.js <!—导入jQuery版本库,因为Bootstrap的JavaScript插件依赖于jQuery --> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <!—- 一次性导入所有Bo

总结了一下关于使用onmouseover以及onmouseout会出现的bug 首先简单的布局: <div id="box"> <div>这是一个内容</div> </div> 简单写了一下样式,效果如下: js代码如下: var oBox = document.getElementById("box"); oBox.onmouseover = function(){ alert("移入"); }

一.表单事件: input事件当<input>.<textarea>的值发生变化时触发.此外,打开contenteditable属性的元素,只要值发生变化,也会触发input事件.input事件的一个特点,就是会连续触发,比如用户每次按下一次按键,就会触发一次input事件. select事件当在<input>.<textarea>中选中文本时触发. Change事件当<input>.<select>.<textarea>

依然第十三章 事件 1.页面上的所有元素都支持鼠标事件,除了mouseenter和mouseleave,所有鼠标事件都会冒泡. 2.修改键:shift.ctrl.alt.meta.四个属性表示修改键的状态:shiftKey等. 3.event对象的relatedTarget属性提供了相关元素的信息.只对mouseover和mouseout事件才包含值. 4.对"事件处理程序过多"问题的解决方案就是事件委托.事件委托利用时间冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件.最适

鼠标事件 事件种类 鼠标事件指与鼠标相关的事件,主要有以下一些. (1)click事件 click事件当用户在Element节点.document节点.window对象上,单击鼠标(或者按下回车键)时触发.“鼠标单击”定义为,用户在同一个位置完成一次mousedown动作和mouseup动作.它们的触发顺序是:mousedown首先触发,mouseup接着触发,click最后触发. 下面是一个设置click事件监听函数的例子. div.addEventListener("click",

什么是EventUti----封装好的事件对象 在JavaScript中,DOM0级.DOM2级与旧版本IE(8-)为对象添加事件的方法不同 为了以跨浏览器的方式处理事件,需要编写一段“通用代码”,即跨浏览器的事件处理程序 习惯上,这个方法属于一个名为EventUtil的对象 编写并使用该对象后,可保证处理事件的代码能在大多数浏览器下一致的运行 var EventUtil={ addHandler:function(element,type,handler){ //添加事件 if(element

$(function(){ $('#questionnaire').on('hidden.bs.modal',function(){ //清除缓存方法 }); }); 事件 Bootstrap 的模态框类提供了一些事件用于监听并执行你自己的代码. All modal events are fired at the modal itself (i.e. at the ). 事件类型 描述 show.bs.modal show 方法调用之后立即触发该事件.如果是通过点击某个作为触发器的元素,则此元素

选项 有一些选项可以用来定制模态窗口(Modal Window)的外观和感观,它们是通过 data 属性或 JavaScript 来传递的.下表列出了这些选项: 选项名称 类型/默认值 Data 属性名称 描述 backdrop boolean 或 string 'static'默认值:true data-backdrop 指定一个静态的背景,当用户点击模态框外部时不会关闭模态框. keyboard boolean默认值:true data-keyboard 当按下 escape 键时关闭模态框

JavaSciprt事件中有两个很重要的特性:事件冒泡以及目标元素. 事件冒泡: 当一个元素上的事件被触发的时候,比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发.这 一过程被称为事件冒泡:这个事件从原始元素开始一直冒泡到DOM树的最上层. 目标元素: 任何一个事件的目标元素都是最开始的那个元素,在我们的这个例子中也就是按钮,并且它在我们的元素对象中以属性的形 式出现.使用事件代理的话我们可以把事件处理器添加到一个元素上,等待一个事件从它的子级元素里冒泡上来,并且可以很方

zepto的event 可以结合上一篇JavaScript事件详解-原生事件基础(一)综合考虑源码暂且不表,github里还有中文网站都能下到最新版的zepto.整个event模块不长,274行,我们可以看到,整个event模块,事件绑定核心就是on和off,还有一个trigger用来触发,类观察者模式,可以先看看汤姆大叔的深入理解JavaScript系列(32):设计模式之观察者模式,其余皆为实现的处理函数.首先来个demo: $("#btn").on("click&quo