JavaScript事件总结

事件
事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间
JavaScript 与 HTML 之间的交互是通过事件实现的。
对于 Web 应用来说,有下面这些代表性的事件:单击事件、鼠标移入移出事件、键盘按下/弹起事件等等
事件就是用户与浏览器的交互行为
onclick 鼠标点击某个对象
ondblclick 鼠标双击某个对象
onerror 当加载文档或图像时发生某个错误
onfocus 元素获得焦点
onblur 元素失去焦点
onkeydown 某个键盘的键被按下
onkeypress 某个键盘的键被按下或按住
onkeyup 某个键盘的键被松开
onload 某个页面或图像被完成加载
onmousedown 某个鼠标按键被按下
onmousemove 鼠标被移动
onmouseout 鼠标从某元素移开
onmouseover 鼠标被移到某元素之上
onmouseup 某个鼠标按键被松开
onreset 重置按钮被点击
onresize 窗口或框架被调整尺寸
onselect 文本被选定
onsubmit 提交按钮被点击
onunload 用户退出页面
浏览器在加载一个页面时,是按照自上而下的顺序加载的,读取到一行的时候就运行一行,如果将script标签写在上面,在执行代码时,页面还没有加载
onload事件会在整个页面加载完成之后触发,为window绑定一个onload事件,js代码要写在页面的下面,是为了保证执行代码的时候页面已经加载完毕
window.onload 在页面上只能出现一次,后面的代码会覆盖前面的代码
事件对象(Event)
鼠标 / 键盘属性
属性 描述
altKey 返回当事件被触发时,“ALT” 是否被按下。
button 返回当事件被触发时,哪个鼠标按钮被点击。
clientX 返回当事件被触发时,鼠标指针的水平坐标。
clientY 返回当事件被触发时,鼠标指针的垂直坐标。
ctrlKey 返回当事件被触发时,“CTRL” 键是否被按下。
metaKey 返回当事件被触发时,“meta” 键是否被按下。
relatedTarget 返回与事件的目标节点相关的节点。
screenX 返回当某个事件被触发时,鼠标指针的水平坐标。
screenY 返回当某个事件被触发时,鼠标指针的垂直坐标。
shiftKey 返回当事件被触发时,“SHIFT” 键是否被按下。
onmousemove
该事件将会在鼠标在元素中移动时被触发事件对象
当事件的响应函数被触发时,浏览器每次都会将一个事件对象作为实参传递传递进响应函数,在事件对象中封装了当前事件相关的一切信息,比如:鼠标的坐标 键盘那个按键被按下,鼠标滚轮滚动的方向
在IE8中,响应函数被触发时,浏览器不会传递事件对象,
在IE8及以下的浏览器中,是将事件对象作为window对象的属性保存的
clientX 可以获取鼠标指针的水平坐标
clientY 可以获取鼠标指针的垂直坐标
var X=event.clientX;
var Y=event.clientY;
事件的委派
指将事件统一绑定给元素共同的祖先元素,这样当后代元素上的事件触发时,会一直冒泡到祖先元素,从而通过祖先元素的响应函数来处理事件
事件委派是利用冒泡,通过委派可以减少事件绑定的次数,提高程序的性能
事件对象的属性target:返回触发此事件的元素(事件的目标节点)
键盘事件:
onkeydown: 键盘被按下事件
如果一直按着某个键不松开,则会一直触发该事件
当onkeydown事件连续触发时,第一次和第二次之间的间隔时间稍微长一点,其他则会非常快。这是为了防止误操作的发生
onkeyup: 键盘被松开的事件
键盘事件一般都会绑定给一些可以获取焦点的对象或则是document
可以通过keyCode来获取按键的编码,
通过它可以判断哪个键被按下
除了keyCode,事件对象中还提供了几个属性
altKey
ctrlKey
shiftKey
这三个属性分别是用来判断alt cltrl shift是否被按下的
如果被按下了则返回true,否则返回false

猜你喜欢

转载自blog.csdn.net/weixin_44560799/article/details/105841998