继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

事件,事件对象, 事件传播,mouseover和mouseenter区别

欧米雪儿lyy
关注TA
已关注
手记 33
粉丝 64
获赞 315

事件:元素天生具备的行为,当我们去操作元素的时候,元素的相关事件就会被触发

pc端:

click:点击事件,dbclick:双击

keydown:键盘按下;keypress:键盘长按(600ms);keyup:键盘抬起,

scroll:滚动,load:页面资源文件加载完成,error:加载失败,resize:窗口大小,

focus:获取焦点,blur:失去焦点,

mouseove:r鼠标划入,mouseout:鼠标划出;mouseenter:鼠标进入, mouseleave:目标离开,mousemove,mousedown:鼠标按下,mouseup:抬起,mousewheel:鼠标滚轮滚动

移动端:

手指事件:
click事件也能在移动端使用,但是有300秒延迟触发事件,
因为在这个时间段是否触发了第二次事件,如果触发了click没触发,dbclick触发了,
移动端的click是单机事件不是点击事件

单手指操作事件:
touchstart:手指按到屏幕上
toucumove:手指在屏幕上移动
touchend:手指离开屏幕;
touchcancel:手指操作取消;

多手指操作事件:
gesturestart:多手指按下
gesturechange:多手指改变位置
gestureend:多手指离开

移动端键盘
keyup,keydown,keypress等键盘事件,大部分手机都不兼容,
如果需要监听表单内容的改变,我们需要使用input事件;

新版es标准增加(兼容性不好)
dragstrat:拖拽开始
drag:拖拽中
dragend:结束

事件触发执行函数,不但函数执行,还给函数传递了一个实参,接受当前点击行为触发执行的时候,我们浏览器传递的这个实参称之为事件对象;

函数执行,传递的这个实参,(e)我们叫做事件对象;

事件对象:
标准浏览器:mouseEvent; ie浏览器:PointerEvent
e = e || window.event
target = target || srcElement
'preventDefault' in e ?e.preventDefault() :returnValue = false
stopPropagation in e ? e.stopPropagation() : cancelBubble = true

clientX,clientY:当前鼠标距离屏幕的距离;兼容所有浏览器
pageX,pageY:当前鼠标距离body浏览器第一屏的x,y坐标,分页的x,y距离;
clientX + 浏览器的scrollTop
(document.documentElement.scrollTop || document.body.scrollTop)

e.preventDefault() 阻止当前元素的默认行为,元素天生自带的行为;
input的默认行为,当在文本框输入内容的时候,内容填入文本框中,
a的默认行为跳转行为;

e.stopPropagation () 阻止冒泡;

document.body.onclick = function (e) {
//兼容ie6-8兼容模式,自定义兼容模式
if (typeof e == 'undefined') {
e = window.event;
e.target = e.srcElement
e.pageY = e.clientY+ (document.documentElement.scrollTop || document.body.scrollTop)
e.pageX = e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft)
e.preventDefault = function () {
e.returnValue = false
}
e.stopPropagation = function () {
e.cancelBubble = true
}
}
e.target;
e.stopPropagation()
}

键盘事件对象
keyboardEvent
e.keycode = e.keycode || e.which
keycode:键盘code
which:当前按键的键盘码

常用的键盘码:
空格键:32
enter:13
backpace:8
delete:46;

事件传播
捕获,目标,冒泡
三种阶段
1.先捕获,从window 到目标元素,2,触发目标元素事件,3向上冒泡,只要绑定事件都会触发,没有绑定事件不会触发;

这种方式是DOM0级事件,这种行为的绑定方法,事件只会在冒泡的时候才会执行,和捕获没有任何关系;
在这三种阶段中,我们的冒泡使用比较多,捕获阶段基本不用;

冒泡传播
当前元素的某个事件行为被触发,起祖先元素的相关事件行为都会被触发,这种机制
e.stopproPropagation 阻止默认行为;

那些事件行为没有传播机制
onload,onerror,onscroll,focus,blur

change,key系列存在传播机制;鼠标事件也存在传播机制;

mouseover的两个特点:

1.存在事件冒泡传播;
2.从父元素进入子元素,触发子元素的over事件,父元素的over事件,传播机制;
3.从子元素进入父元素,触发父元素的over事件,因为又一次滑入父元素,所以触发了over事件;

mouseout:
1.进入子元素,父元素触发mouseout事件,
2.从子元素离开,利用传播机制,子元素和父元素都触发了mouseout事件;

mouseenter:
1.没有传播机制;默认阻止了冒泡传播机制;
2.从父元素进入子元素,触发子元素的mouseenter事件,不会触发父元素的事件,因为没有传播机制;
2.从子元素进入父元素中不会触发父元素事件,因为子元素进入父元素都是在父元素元素中欧,没有离开,一直在元素本身中;

mouseleave:
1.从父元素离开进入子元素,不会触发父元素的leave事件,
2,从子元素离开到父元素,会触发子元素的leave事件,我们始终没有离开父元素,所以父元素的leave事件不会触发;

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP