事件函数列表 blur() 元素失去焦点 focus() 元素获得焦点 click() 鼠标单击 mouseover() 鼠标进入（进入子元素也触发） mouseout() 鼠标离开（离开子元素也触发）...mouseenter() 鼠标进入（进入子元素不触发） mouseleave() 鼠标离开（离开子元素不触发） hover() 同时为mouseenter和mouseleave事件指定处理函数 ready...mouseout() 鼠标离开（离开子元素也触发） 上面看了mouseover() 是鼠标进入的事件，那么下面来看看这个事件离开的事件。 ? ?...hover() 同时为mouseenter和mouseleave事件指定处理函数 这个hover()方法其实就是mouseenter()和mouseleave()的合并方法，如下： ? ?...当鼠标进入和移出的时候，都会触发hover()事件。
mouseout：鼠标在元素上移开时触发 mouseout 事件。 mouseleave：鼠标在元素上移开时触发 mouseleave 事件。...mouseup 和 mousedown 没什么好解释的，主要说一下 mouseover 和 mouseenter ； mouseout 和 mouseleave 的区别。...其实如果是一个单独的元素，也并看不出什么问题，而且我们也常用 mouseover 和 mouseout 组合。...mouseover 和 mouseout 鼠标划入子元素，再次划入父元素时即再次触发，如果该元素包含子元素，鼠标在上面划动时即会触发多次。...打印结果如下图， mouseover 和 mouseout 在包含子元素的情况下会多次触发，mouseover 即使不包含子元素也会不断触发，mouseenter 在鼠标划入时触发一次，mouseleave
focus 事件都是不冒泡的，因获取和失去焦点本身就是针对这个元素的。...B mousemove B Multiple mousemove events 重新移动到A mouseout B mouseleave B mouseover A mousemove A...Multiple mousemove events 移出元素A mouseout A mouseleave A 如果是下图所示 ?...可以看到 mouseover/mouseout 事件只触发一次，mouseenter/mouseleave 事件触发了三次 然后再看下 click 元素 |Event Type|Notes| |--|-...不冒泡 ❌•mousemove•mouseout•mouseover•mouseup mouseenter/mouseleave 看这个单词也是跟 focusin/focusout 一样专注于变化，因此这两个不冒泡的事件和
mouseout：鼠标在元素上移开时触发 mouseout 事件。mouseleave：鼠标在元素上移开时触发 mouseleave 事件。...mouseover的冒泡事件就用mouseenter)mouseenter/mouseover共同点:当二者都没有子元素时,二者的行为是一致的,但是二者内部都包含子元素时,行为就不同了.总结就是：mouseover和mouseenter...离开时，却是 mouseout 先触发，mouseleave后触发鼠标事件执行顺序下来看下面代码 dsafsa ...',()=>console.log('mouseleave')) test.addEventListener('mouseout',()=>console.log('mouseout')) ...按下中键5：左键与中键同时被按下6：中键与右键同时被按下7：三个键同时被按下参考文章：JS鼠标事件（非常详细） http://c.biancheng.net/view/5944.htmlmouseover和mouseenter
兼容性很好 $("img").mouseover(function(){ $(this).css("opacity","0.6"); }); $("img").mouseout...但ie下2不行，1，3两段在ie上 是一样的 ），这个例子最重要的是让我看到了$(document)和document的区别。
.hover() 将两个时间函数绑定到匹配元素上，分别当鼠标指针进入和离开元素时被被执行。 ....mouseleave( handler(eventObject) ) handler(eventObject) 每次事件触发时会执行的函数。 ....mouseout( handler(eventObject) ) handler(eventObject) 每次事件触发时会执行的函数。 ....mouseout( [eventData ], handler(eventObject) ) eventData 一个对象，它包含的数据键值对映射将被传递给事件处理程序。...用法： $("p").mouseout(function(){ ("p").css("background-color","#E9E9E4"); }); .mouseover
主要实现鼠标移到主菜单，另一个div显示子菜单，采用mouseenter和mouseleave结合,不要使用mouseout,因为mouseout在大div中有子元素，在子元素也会触发mouseout..." :key="index" @click="go(item)" @mouseenter="handelMouseEnter(index)" @mouseleave...div ref="submenuWrap" class="submenuWrap" v-show="isShow" style="" @mouseenter="handelSubMouseEnter" @mouseleave
3.mouseleave 当鼠标指针离开元素时，会发生 mouseleave 事件。该事件大多数时候会与mouseenter 事件一起使用。...与 mouseout 事件不同，只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。如果鼠标指针离开任何子元素，同样会触发 mouseout 事件。...mousemove事件处理函数会被传递一个变量——事件对象，其.clientX 和 .clientY 属性代表鼠标的坐标 5.mouseout 当鼠标指针从元素上移开时，发生 mouseout 事件。...注释：与 mouseleave 事件不同，不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。...基本的用法就这些，现在我用click举一个例子给大家介绍一下，这些方法是怎么实现和调用的。
("background-color","yellow"); 3 },function(){ 4 $("p").css("background-color","pink"); 5 }); 定义和用法...方法触发 mouseenter 和 mouseleave 事件。 注意: 如果只指定一个函数，则 mouseenter 和 mouseleave 都执行它。...outFunction) 调用: $( selector ).hover( handlerIn, handlerOut ) 等同以下方式： $( selector ).mouseover( handlerIn ).mouseout...( handlerOut ); 注意：如果只规定了一个函数，则它将会在 mouseover 和 mouseout 事件上运行。...调用: $(selector).hover(handlerInOut) 等同于： $( selector ).on( "mouseover mouseout", handlerInOut ); 发布者：
在IE的全系列中都实现了mouseenter和mouseleave事件，但是在早期的w3c浏览器中却没有实现这两个事件。...先比较mouseenter和mouseover的异同点，当从元素外围进入元素内部时同时触发mouseover和mouseenter事件，但是在元素内部， 鼠标进入元素子节点时会继续触发mouseover...mouseleave亦然。 用mouseover来模拟mouseenter的关键在于利用事件的relatedTarget判定鼠标是否在元素内部移动，这也涉及到dom元素contain（） 的实现。...{ el: el, type: 'mouseleave', fn: fn...} : { el: el, type: 'mouseout', fn: function
mouseleave() 当鼠标指针离开元素时，会发生 mouseleave 事件。...mouseenter() 当鼠标指针穿过元素时，会发生 mouseenter 事件，该事件大多数时候会与 mouseleave 事件一起使用。...mouseover() 当鼠标指针位于元素上方时，会发生 mouseover 事件，该事件大多数时候会与 mouseout 事件一起使用。...mouseout() 当鼠标指针从元素上移开时，发生 mouseout 事件，该事件大多数时候会与 mouseover 事件一起使用 mouseup() 当在元素上放松鼠标按钮时，会发生 mouseup
但是在这之前，我们来重新看一下MouseEnter与MouseLeave以及对应的MouseOver与MouseOut的原生DOM事件。...需要注意的是MouseEnter/MouseLeave是在捕获阶段执行事件处理函数的，而不能在冒泡阶段过程中进行，而MouseOver/MouseOut是可以在捕获阶段和冒泡阶段选择一个阶段来执行事件处理函数的...避免重复触发: MouseOver和MouseOut事件在鼠标悬停在元素内部时会重复触发，当鼠标从一个元素移动到其子元素时，MouseOut事件会在父元素触发一次，然后在子元素触发一次，MouseOut...简化交互逻辑: MouseEnter和MouseLeave事件的特性使得处理鼠标移入和移出的交互逻辑变得更直观和简化，我们可以仅关注元素本身的进入和离开，而不需要处理父元素或子元素的事件，这种简化有助于提高代码的可读性和可维护性...MouseOver和MouseOut事件就是更好的选择，MouseEnter/MouseLeave能提供更大的灵活性和控制力，让我们能够创建复杂的交互效果，并更好地处理用户与元素的交互，当然应用的复杂性也会相应提高
事件与特效 事件 方法 描述 执行时机 click( ) 触发或将函数绑定到指定元素的click事件 单击鼠标时 mouseover( ) 触发或将函数绑定到指定元素的mouseover事件 鼠标指针移过时 mouseout...( ) 触发或将函数绑定到指定元素的mouseout事件 鼠标指针移出时 mouseenter( ) 触发或将函数绑定到指定元素的mouseenter事件 鼠标指针进入时 mouseleave( ) 触发或将函数绑定到指定元素的...mouseleave事件 鼠标指针离开时 举例 $(".nav-ul a").mouseover(function(){ $(this).css("background-color","#f01e28..."); }); $(".nav-ul a").mouseout(function(){ $(this).css("background-color","#ff2832"); }); 方法 描述...#00ff00");}, function(){$("body").css("background","#0000ff");} ) //toggle()方法不带参数，与show( )和hide
/jquery-1.10.1.min.js"> /* mouseover/mouseout事件...mouseover(function () { console.log("father被移入了"); }); $(".father").mouseout...console.log("father被移出了"); }); */ /* mouseenter/mouseleave...mouseenter(function () { console.log("father被移入了"); }); $(".father").mouseleave
鼠标事件 1.ready（）页面载入事件：载入文档节点 2 click（）熟悉的单击事件 3 dbclick（）双击事件 4 mousedown() /mouseup() 鼠标按下和松开事件... 5 mouseover（）/mouseout() 鼠标移入和移出事件 6 mouseenter（）/mouseleave() 鼠标移入移出事件 //mouseover()/mouseout...()和mouseenter（）/mouseleave()的区别 首先来了解一下事件冒泡和捕获 事件冒泡：内部事件先触发，然后在触发外部事件 事件捕获：外部事件先被触发，然后在触发内部元素... mouseover（）/mouseout() ：鼠标移入“所选元素以及后代都会触发” mouseenter（）/mouseleave()：鼠标移入“所选元素”才会触发，如果鼠标移入所选元素的后代时...event.which将event.keyCode 和 event.charCode标准化了。推荐用event.which来监视键盘输入。
鼠标事件是指用户在移动鼠标光标或者点击任意鼠标键时触发的事件,jQuery中封装了基本上所有的鼠标事件包括点击,双击,移动等鼠标事件,下面我们就来看下这些事件的语法和用法 鼠标事件是在用户移动鼠标光标或者使用任意鼠标键点击时触发的...mousedown(function()); 4、mouseup事件：松开鼠标时触发 $('p').mouseup(function()); 5、mouseover事件：鼠标从一个元素移入另一个元素时触发 mouseout...事件：鼠标移出元素时触发 $('p').mouseover(function()); $('p').mouseout(function()); 6、mouseenter事件：鼠标移入元素时触发...mouseleave事件：鼠标移出元素时触发 $('p').mouseenter(function()); $('p').mouseleave(function()); 7、hover事件 $('p
上一篇讲到jQuery中的事件，深入学习了加载DOM和事件绑定的相关知识，这篇主要深入讨论jQuery事件中的合成事件、事件冒泡和事件移除等内容。 ...*这里要注意的一点是，jQuery的hover()方法准确来说是替代jQUery中的bind("mouseenter")和bind("mouseleave")，而不是替代bind("mouseover"...)和bind("mouseout")，那么这两对绑定函数，其实是两对事件是什么区别呢？...mouseout与mouseleave 不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。 只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。 ...简单的说，mouseover和mouseout会引起触发的区域更大，mouseenter和mouseleave只能针对绑定的元素来触发。
事件函数列表 blur() 元素失去焦点 focus() 元素获得焦点 click() 鼠标单击 mouseover() 鼠标进入（进入子元素也触发） mouseout() 鼠标离开（离开子元素也触发）...mouseenter() 鼠标进入（进入子元素不触发） mouseleave() 鼠标离开（离开子元素不触发） hover() 同时为mouseenter和mouseleave事件指定处理函数 ready
mouseout 当鼠标移出元素时，以及当鼠标进入子元素时。 mouseleave 当鼠标移出一个元素时，mouseleave。类似于mouseout但不冒泡。...mousedown、mousemove和mouseup可以结合使用来跟踪拖放事件。 小心使用mousemove，因为它在鼠标移动时多次触发。我们需要应用节流，这是我们在分析滚动时会详细讨论的东西。...clientX / clientY 无论是否滚动，鼠标指针相对于浏览器窗口的x和y坐标。 ctrlKey 如果在事件触发时按下ctrl键，则ctrlKey为真。...movementX / movementY movementX / movementY鼠标指针相对于最后一个mousemove事件的位置的x和y坐标。...screenX / screenY 屏幕坐标中鼠标指针的x和y坐标。 shiftKey 如果在触发事件时按下shift键，则shiftKey为true。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频
