mouseover事件mouseenter事件
1、
mouseover:会在鼠标进入该元素或者该元素的子元素时触发
mouseenter:只在鼠标进入该元素时触发
mouseout:在鼠标移出该元素或则该元素的子元素时触发
mouseleave:只在鼠标离开该元素时触发
所以在整个过程中,mouseenter mouseleave只触发一次。over和out触发多次(每次进入和退出子元素都会触发)
var odiv = document.getElementById('outer');
odiv.addEventListener('mouseenter',enterHandler,false);
odiv.addEventListener('mouseover',overHandler,false);
odiv.addEventListener('mouseout',outHandler,false);
odiv.addEventListener('mouseleave',leaveHandler,false);
function enterHandler(){
console.log('触发enter事件');
}
function overHandler(){
console.log('触发over事件');
}
function outHandler(){
console.log('触发out事件');
}
function leaveHandler(){
console.log('触发leave事件');
}

mouseover事件mouseenter事件的更多相关文章
- jQuery里的mouseover与mouseenter事件类型区别
JQ里面有mouseover和mouseenter 2个事件类型干着差不多的活,用不好经常出现些小问题. 今天我解释一下原理: 事件类型翻译: mouseover 鼠标移上 mouseenter 鼠 ...
- setTimeout用于取消多次执行mouseover或者mouseenter事件,间接实现hover的悬停加载的效果.
Mouseenter在鼠标滑上去不会对其子元素也发生监听, Mouseover在鼠标滑上去会对其子元素发生监听. 所以对于事件的监听,我们要看需求,这里是对父元素的监听,不需要对子元素做监听.就用mo ...
- mouseover事件与mouseenter事件的区别
不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件.对应mouseout 只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件.对应mouseleave 被触发的 M ...
- 关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
轮播中大多会选择mouseover和mouseout 这个时候是没有任何问题的 但当遇到有css3动画的时候,会发现移入移出过快 动画还没加载完成就需要执行下一个动画,完了动画样式就错乱了. 这时候 ...
- 做二级菜单时候遇到的关于事件冒泡以及mouseover和mouseenter的不同
二级菜单作为最普通小组件,我遇到了坑. <style> .wrapper { height: 150px; border: 1px solid; width: 150px; } .wrap ...
- 一个例子说明mouseover事件与mouseenter事件的区别
<html> <head> <meta charset="UTF-8"> <title>haha</title> < ...
- mouseover和mouseenter两个事件的区别
mouseover(鼠标覆盖) mouseenter(鼠标进入) 二者的本质区别在于,mouseenter不会冒泡,简单的说,它不会被它本身的子元素的状态影响到.但是mouseover就会被它的子元素 ...
- 事件处理& 事件委托& 区别mouseover与mouseenter
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 第二十七课:滚轮事件,mouseenter与mouseleave事件的修复
滚轮事件 jQuery核心库没有对mousewheel事件的差异性进行处理,但作为一个常用的事件,本文讲解一下. mousewheel事件只有火狐浏览器不支持.mousewheel用于取得滚动距离的属 ...
随机推荐
- Select()使用否?
David Treadwell ,Windows Socket 的一位开发者,曾经在他的一篇名为"Developing Transport-Independent Applications ...
- 【TOMCAT启动异常】The BASEDIR environment variable is not defined correctly
<span style="font-size:18px;">The BASEDIR environment variable is not defined correc ...
- centos 6.5系统下安装ibus及设置开机自启动
先说一下系统环境:centos 6.5,然后我是以root身份执行的,没有权限的用户参见sudo用法 第1步:查找并安装ibus安装包,命令如下: 找到一行: ibus-pinyin.x86_64 : ...
- Paint the Grid Again ZOJ - 3780 拓扑
Paint the Grid Again Time Limit: 2000MS Memory Limit: 65536KB 64bit IO Format: %lld & %llu [ ...
- hdu3695 ac自动机入门
Computer Virus on Planet Pandora Time Limit: 6000/2000 MS (Java/Others) Memory Limit: 256000/1280 ...
- MMORPG战斗系统随笔(三)、AI系统简介
在设计一款游戏的时候,如果我们是玩家,是希望自己能够操作角色畅玩游戏的.在一款MMORPG游戏中,大部分的实际游戏角色,是需要玩家来操作的,通过在游戏大世界相互完成游戏中的任务等等来体验游戏.在大世界 ...
- Java中Math.round()函数
Math.round(11.5) = 12; Math.round(-11.5) = -11; Math.round()函数是求某个数的整数部分,且四舍五入.
- webpack 的使用1
进入指定文件夹 npm init 安装 npm install webapck --save-dev 根目录下新建hello.js 将文件打包到指定文件 Asset :打包成的文件名称 Chunk ...
- Jquery使用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Jquery使用mousee ...
- c# 接口实用
学习接口,还是记下来吧,不然以后忘记,这个东西也不是常用. interface Interface1 { } 接口中不能有字段, 只能声明方法.