天天看点

失去焦点时点击其他元素怎么让焦点事件先执行、_前端开发-JavaScript中的事件(Event)及事件处理总结...

JavaScript是基于事件驱动的编程模型,当网页页面发生某种形式的交互操作或者变化时就会产生事件。举个简单的例子:用户在网页页面点击鼠标按键就会产生一个点击事件。鼠标移动则会产生鼠标移动的事件。因此事件对于JavaScript客户端脚本语言至关重要,在JavaScript编程模型中事件是实现一切前端交互操作的基础与依据。事件的学习、理解与使用成为JavaScript编程学习的重点与难点。本文主要介绍部分常用事件及事件处理。

失去焦点时点击其他元素怎么让焦点事件先执行、_前端开发-JavaScript中的事件(Event)及事件处理总结...

event事件

1、事件的类型与事件处理

在面向对象程序设计语言中,事件是依附于对象的。不同的对象具有不同类型的事件类型及事件处理的方法。JavaScript中一个事件主要由事件对象、事件类型与事件处理三部分所组成。JavaScript常用事件类型主要包括键盘事件、鼠标与滚轮事件、页面事件、表单事件、设备事件等。在页面运行过程中,JavaScript通过事件类型,检测发生的事件,并对事件进行处理。事件处理程序响应事件、处理时间需要按照一定的顺序执行,事件顺序主要包括事件捕获与时间冒泡两种类型。其中事件捕获从HTML最外层开始处理事件,直到底层元素事件的处理完成。事件冒泡则与事件捕获相反,从子元素开始响应事件。在默认情况下消息响应都是从子元素开始的。

失去焦点时点击其他元素怎么让焦点事件先执行、_前端开发-JavaScript中的事件(Event)及事件处理总结...

冒泡处理实例

冒泡处理实例如上图,div元素嵌套,将两个div分为父元素与子元素,同样定义onclick单击事件,首先响应的是内层子元素。

2、事件的绑定

除直接在对HTML元素直接定义事件属性之外,还可以通过事件绑定形式实现事件的注册、绑定与监听。通过调用DOM文档对象模型提供的addEventListener()方法实现为网页页面元素添加事件,该函数的原型描述如下:

addEventListenser(type,listener [,options ])type:事件类型listener:事件处理函数名称options: bool类型,事件处理方式,捕获、冒泡
           

通过对DOM对象进行事件绑定就可以响应制定的消息,但需注意,页面元素能够响应的事件类型。事件绑定实例描述如下:

失去焦点时点击其他元素怎么让焦点事件先执行、_前端开发-JavaScript中的事件(Event)及事件处理总结...

事件监听与处理

事件绑定实例如上图所示,我们给id为test的div元素绑定了click事件,并用myfun函数对事件进行处理。其中事件类型是需要编写者注意的问题,这些事件类型是定义好的,我们只需要选择即可,例如鼠标事件的定义如下表所示:

失去焦点时点击其他元素怎么让焦点事件先执行、_前端开发-JavaScript中的事件(Event)及事件处理总结...

鼠标事件类型

除以上事件绑定之外,还可以通过以下简单形式绑定事件,如上例题事件可通过一下语句定义:

失去焦点时点击其他元素怎么让焦点事件先执行、_前端开发-JavaScript中的事件(Event)及事件处理总结...

事件绑定的简单形式

3、事件的解除

通常情况下事件的绑定执行之后是不会移除事件的,但如果需要解除事件的绑定,则可以通过removeEventListener()方法或者对绑定事件的DOM对象对应时间名赋值为null实现事件的解除。实际案例如下所示:

失去焦点时点击其他元素怎么让焦点事件先执行、_前端开发-JavaScript中的事件(Event)及事件处理总结...

事件移除操作

4、event对象

event对象是JavaScript语言中重要的对象之一,用于存储记录交互响应实现相关基本信息,event对象主要存储信息包括事件类型、事件对应的按键信息及事件发生相关坐标信息等。event对象是其他各类事件的父类,其他事件对象均为该类的子类。event对象会在事件调用过程中以隐藏的形式进行参数的传递。event事件使用描述如下图:

失去焦点时点击其他元素怎么让焦点事件先执行、_前端开发-JavaScript中的事件(Event)及事件处理总结...

event事件使用实例

以上给出了JavaScript中的事件基本概念及案例分析,如有问题可在评论区讨论。本头条号长期关注编程资讯分享;编程课程、素材、代码分享及编程培训。如果您对以上方面有兴趣或代码错误、建议与意见,可以联系作者,共同探讨。期待大家关注!相关文章链接如下:

前端开发-JavaScript初学者练习题及参考答案

前端开发-CSS3动画实现焦点(图文轮播)图效果

前端开发-JavaScript DOM动态生成文本框

前端设计-教你如何快速绘制HTML5动画

前端设计-响应式页面开发基础

前端设计-Ajax技术及实例展示