您的位置:首页 > 技术中心 > 前端框架 >

简单总结JavaScript事件

时间:2022-05-20 12:01

本篇文章给大家带来了关于javascript的相关知识,其中主要介绍了关于事件的简单总结,事件就是文档或浏览器窗口中发生的一些特定的交互瞬间,下面一起来看一下,希望对大家有帮助。

【相关推荐:javascript视频教程、web前端】

事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。JavaScript与HTML之间的交互是通过事件 实现的。对于 Web 应用来说,有下面这些代表性的事件:单击事件、鼠标移入移出事件、键盘按下/弹 起事件等等。事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用监听器(或事件处理程序)来预订事件,以便事件发生时执行相应的代码。

这里简单的介绍以下几种常用的事件:文档加载事件,事件对象,事件冒泡,事件委派,事件绑定,事件传播,键盘事件。

文档加载事件(onload):onload事件会在整个页面加载完成之后触发。使用如图:

从性能方面考虑,写在页面的下边更好!将js代码写在页面的下面,就是为了保证执行代码的时候页面已经加载完毕。window.onload 在页面上只能出现一次,后面的代码会覆盖前面的代码。

事件对象:事件发生以后,会产生一个事件对象,作为参数传给监听函数。具体的表现就是我们在回调函数中传入一个event形参,这个形参的值是JS自动传入的。在这个事件对象中会包含这次事件的所有相关信息,包括是什么事件(鼠标/键盘),事件的触发者,事件的目标等。

在DOM对象上的某个事件被触发时,会产生一个事件对象Event,这个对象中包含着所有事件有关的信息。包括导致事件的元素、事件的类型以及其 他与特定事件相关的信息。DOM标准的浏览器会将一个event对象传入到事件的处理程序当中。无论事件处理程序是什么都会传入一个event对象。Event对象包含与创建它的特定事件有关的属性和方法。触发的事件类型不一样,可用的属性和方法也不一样。这里简单的说一下鼠标/键盘事件如图:

IE中的事件对象与访问 DOM 中的 event 对象不同,要访问 IE 中 的 event 对象有几种不同的方式,取决于指定事件 处理程序的方法。在IE中event对象作为window对象的属性存在的, 可以使用window.event来获取event对象在使用attachEvent()的情况下,也会在处理程序中 传递一个event对象,也可以按照前边的方式使用。这里通过一个案例来说明:当鼠标在box盒子上面的时候 ,下面p标签显示鼠标当前的坐标

效果图:

代码图:

事件冒泡(Bubble): 所谓冒泡指的就是事件的向上传导,当后代元素上的事件被触发时,其祖先元素的相同事件也会被触发。在开发中大部分情况冒泡都是有用的,如果不希望冒泡发生可以通过事件对象取消冒泡 event.cancelBubble=true。

效果图:

代码图:

事件的委派:指将事件统一绑定给元素共同的祖先元素,这样当后代元素上的事件触发时,会一直冒泡到祖先元素,从而通过祖先元素的响应函数来处理事件。事件委派是利用冒泡,通过委派可以减少事件绑定的次数,提高程序的性能。事件对象的属性target:返回触发此事件的元素(事件的目标节点)

案例:

效果图:

代码图:

事件绑定:我们可以通过两种常用的方式为一个元素绑定事件处理程序:通过HTML元素指定事件属性来绑定;通过DOM对象指定的属性来绑定。还有一种方式比较特殊我们称为设置事件监听器,元素对象:addEventListener()。前边两种方式都可以绑定事件处理程序,但是它们都有一个缺点就是都只能绑定一个程序,而不能为一个事件绑定多个程序。addEventListener(),通过这个方法也可以为元素绑定响应函数。使用addEventListener()可以同时为一个元素的相同事件绑定多个响应函数。这样当事件被触发时,响应函数将会按照函数的绑定顺序执行。这个方法不支持IE8及以下的浏览器,需要 使用attachEvent代替。attachEvent(),在IE8中可以使用attachEvent()来绑定事件 。这个方法也可以同时为一个事件绑定多个处理函数,不同的是它是后绑定先执行,执行顺序和addEventListener()相反。

事件传播:事件传播可以分为三个阶段:捕获阶段 - 在捕获阶段时从最外层的祖先元素,向目标元素进行事件的捕获,但是默认此时不会触发事件;目标阶段 - 事件捕获到目标元素,捕获结束开始在目标元素上触发事件;冒泡阶段 - 事件从目标元素向他的祖先元素传递,依次触发祖先元素上的事件。

键盘事件:onkeydown: 键盘被按下事件。如果一直按着某个键不松开,则会一直触发该事件,当onkeydown事件连续触发时,第一次和第二次之间的间隔时间稍微长一点,其他则会非常快。这是为了防止误操作的发生。onkeyup: 键盘被松开的事件。键盘事件一般都会绑定给一些可以获取焦点的对象或则是document……

【相关推荐:javascript视频教程、web前端】

以上就是简单总结JavaScript事件的详细内容,更多请关注gxlsystem.com其它相关文章!

本类排行

今日推荐

热门手游