事件类型-基本类型

事件类型-基本类型,第1张

一、UI事件(不一定与用户 *** 作有关的事件)

load 当页面完全加载后的在window上触发
图片也可以触发load事件
resize 当窗口大小变化时在window上触发
(除火狐外其他浏览器会在浏览器窗口变化1像素时就触发事件,而火狐是在用户停止调整窗口大小时才发。不建议在此事件中加入大计算量代码,因为可能频繁执行,导致浏览器速度变慢。另外窗口最大最小化也会触发事件)
scroll 当用户滚动滚动条的元素中的内容时,在该元素上面触发

二、鼠标事件

1、事件类型
click-----单击
dblclick-----双击
contextmenu-----右键菜单
mouseover-----移入
mouseout-----移出
mouseenter-----移入
mouseleave-----移出
mousedown-----按下
mouseup-----抬起
mousemove-----移动
2、坐标位置
screenX 在屏幕中的x坐标
screenY 在屏幕中的y坐标
相对于body
clientX 表示事件发生时鼠标指针在视口中的水平坐标(不包含滚动距离)
clientY 表示事件发生时鼠标指针在视口中的垂直距离(不包含滚动距离)
pageX 在页面中的x坐标(包含滚动距离)
pageY 在页面中的y坐标(包含滚动距离)
获取点击目标的坐标(有兼容性)
offsetX、offsetY

键盘事件

keydown 当用户按下键盘上的任意键时触发,按住不动将重复触发
keyup 当用户释放键盘上的键时触发

event.keyCode 键码

keypress 当用户按下键盘上的字符键时触发,按住不动将重复触发

event.charCode 键码
ASCII编码形式展示
需通过String.fromCharCode()方法转换
IE9以下不支持)

非字符键:shiftkey、altkey、ctrlkey

表单事件

focus:元素获得焦点时触发
blur:元素失去焦点时触发
submit():提交表单
change:当input、textarea元素value值改变且失去焦点时、select元素选项改变时触发
input:当input、textarea元素value值 改变同步触发事件,select元素选项改变时触发 (有兼容问题,IE: onpropertychange, 非IE: oninput)

阻止冒泡

1、stoppropagation() 非IE
2、canceIBubble=true IE

阻止默认

1、preventDefault() 非IE
2、returnValue=true IE

DOM事件绑定 1、DOM0级事件

①所有的浏览器都支持
②事件只能注册一次,后面的会覆盖旧的
③注册:

在html上添加:
<div onclick="alert('hello')"></div> 
this指向自身
匿名函数:
d.onclick=function({}  
this指向自身
普通对象:
onclick="ok()" 
相当于动态调用
this指向window
没有事件参数e的传递
DOM2级事件 IE
attachEvent(event,function)
event要加on
detachEvent(event,function)
非IE
addEventL istener(event,function,userCapture)
event不能加句柄on
userCapture指定捕获还是冒泡 true:捕获;false:冒泡;
removeEventL istener(event,function)

欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/web/1320365.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2022-06-11
下一篇2022-06-11

发表评论

登录后才能评论

评论列表(0条)

    保存