NEWS

新闻资讯

当前位置首页 > 新闻资讯 > 正文

Javascript事件对象(Event)详解

作者:小菁 时间:2021-04-26

基于事件的响应,让页面和用户之间产生交互行为是JavaScript的一大特征。

JavaScript事件是:浏览器、文档(document)窗口中的发生的特定的交互瞬间;而JavaScript和HTML之间的交互行为就是通过事件来触发的。

比如,当下面的事件发生的时候,就产生了一个JavaScript事件。

  • 当用户单击鼠标时

  • 当网页已加载时

  • 当图像被加载时

  • 当鼠标移动到元素上时

  • 当输入字段更改时

  • 提交HTML表单时

  • 当用户敲击一个键时

HTML DOM事件允许JavaScript在HTML文档中的元素上注册不同的事件处理程序。

事件处理程序:事件处理程序:我们用户在页面中进行的点击这个动作,鼠标移动的动作,网页页面加载完成的动作等,都可以称之为事件名称,即:click、mousemove、load等都是事件的名称。响应某个事件的函数则称为事件处理程序,或者叫做事件侦听器。

事件通常与函数结合使用,并且在事件发生之前(例如当用户单击按钮时),不会执行该函数。

比如:

window.onload=function(){
    //code
}
window.onscroll=function(){
    console.log(document.documentElement.scrollTop);
}
window.onresize=function(){
    oDiv.style.left=(oBody.clientWidth-oDiv.offsetWidth)/2+"px";
}
item.onmouseover = function(){
    //code
}
item.onmouseout = function(){
    //code
}
oBtn.onclick=function(){
    //code
}

event事件太多,罗列了一些常用的:

鼠标事件

onclick    点击

ondblclick   双击

onmousedown   鼠标按钮被按下

onmouseenter   当鼠标指针移动到元素上时触发

onmouseleave   当鼠标指针移出元素时触发

onmousemove   鼠标移动

onmouseover     鼠标移到某元素之上

onmouseout      鼠标从某元素移开

onmouseup       鼠标按键被松开

对象事件

onload           一张页面或一幅图像完成加载

onresize        窗口或框架被重新调整大小

onscroll        滚动条滚动时发生的事件

onunload     用户退出页面。 ( <body> 和 <frameset>)

onpageshow    该事件在用户每次访问页面时触发

onpagehide     该事件在用户离开当前网页跳转到另外一个页面时触发

表单事件

onblur     元素失去焦点时触发

onchange    该事件在表单元素的内容改变时触发( <input>, <select>, 和 <textarea>)

onfocus    元素获取焦点时触发

onselect   用户选取文本时触发 ( <input> 和 <textarea>)

onsubmit   表单提交时触发

键盘事件

onkeydown   某个键盘按键被按下。

onkeypress   某个键盘按键被按下并松开。

onkeyup       某个键盘按键被松开。

拖动事件

ondrag      该事件在元素正在拖动时触发

ondragend   该事件在用户完成元素的拖动时触发

ondragenter    该事件在拖动的元素进入放置目标时触发

ondragleave    该事件在拖动元素离开放置目标时触发

ondragover     该事件在拖动元素在放置目标上时触发

ondragstart     该事件在用户开始拖动元素时触发

ondrop            该事件在拖动元素放置在目标区域时触发

动画事件

animationend    该事件在 CSS 动画结束播放时触发

animationiteration    该事件在 CSS 动画重复播放时触发

animationstart      该事件在 CSS 动画开始播放时触发

过渡事件

transitionend    该事件在 CSS 完成过渡后触发。

其他事件

ononline    该事件在浏览器开始在线工作时触发。

onoffline    该事件在浏览器开始离线工作时触发。

ontoggle    该事件在用户打开或关闭 <details> 元素时触发

onwheel    该事件在鼠标滚轮在元素上下滚动时触发

事件对象常用的方法

preventDefault()   通知浏览器不要执行与事件关联的默认动作。比如超链接的默认跳转。

stopPropagation()    不再派发事件。比如冒泡

目标事件对象

方法

addEventListener()    允许在目标事件中注册监听事件(IE8 = attachEvent())

removeEventListener()   

鼠标键盘事件对象

属性

clientX   返回当事件被触发时,鼠标指针相对于可视区的水平坐标。

clientY   返回当事件被触发时,鼠标指针相对于可视区的垂直坐标。

charCode   返回onkeypress事件触发键值的字母代码。

keyCode  返回onkeypress事件触发的键的值的字符代码,或者 onkeydown 或 onkeyup 事件的键的代码。

screenX   返回事件发生时鼠标指针相对于屏幕的水平坐标

screenY   返回事件发生时鼠标指针相对于屏幕的垂直坐标。

菁瑞优智H5前端培训

其实事件一直都是存在的(不管有没有绑定或监听),它只是没有事件处理程序而已!!!