深入了解JavaScript的事件机制

这篇文章介绍的内容是深入了解JavaScript的事件机制,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下

什么是事件

首先用一个人来比喻吧,人都会睡觉,但是只有人感觉到困了才会去睡觉。
用程序的话来讲,人这个对象存在一个睡觉的方法,这个方法只有当精神疲劳这个事件触发的时候才会执行:

function sleep(){    do sleep}man.ontired=function(){    sleep();}

登录后复制

当然,有的人因为一堆工作还没完成,即使深夜12点很累还是得加班工作,这时候,人触发了精神疲劳这个事件之后可能会执行一个继续工作的方法(比如我QAQ。。。

man.ontired=function(){    work()}

登录后复制

所以事件这种东西是广泛存在于我们周围的,也就是一个触发点,就像一个开关一样,按下了灯就亮了,再按一下灯就灭了,这就是一个事件。

把事件放到web,准确地讲应该是浏览器里面,事件又是什么呢?

答案当然是用户所有对浏览器所做的行为的响应。比如最简单的点击啦、按键盘啦、移动鼠标啦、关闭网页啦、加载网页啦等等,只要浏览器能对用户行为作出响应的,都是web的事件,比如一个用户怒砸电脑,这个浏览器无法监听也无法响应,所以算不上web的事件。

所以,事件是浏览器对用户行为的一个响应

js是事件驱动的

而正是有这些事件的存在,程序员和用户方可以联系起来,程序员不知道用户对网页做了什么,但是程序员知道用户做了那些行为后应该给予怎么样的处理。你可以想象我们前端程序员个个都是地雷兵,在页面布满了大大小小的“事件地雷”,只要用户不踩上去,我们写的代码会老老实实躺在js文件里面永不触发。但一旦用户点击了拖拽了按键了踩了“事件地雷”,那么我们写的代码就像地雷一样“boom”的一声开始执行。就比如:

    document.body.onclick=function(){        alert('boom')    }

登录后复制

如果用户只是打开了网页,根本没有点击页面,那么这个”boom”永远不会弹出来。

因为js是事件驱动的。

事件驱动是什么?

上面那几个例子已经很好说明了什么是事件驱动。事件驱动就是,事件没发生,代码不执行,事件是触发代码执行的直接原因。

一般来讲,可能你有遇到,在一个点击事件里面写了一个小小或者大大的逻辑错误,js页面加载的时候并不会给你报错,它只是匆匆看了一眼onclick里面的内容,但不会去执行它,自然不会去发现里面的逻辑错误,除非你里面写了一个语法错误,js看了一眼发现,卧槽这里面的语句不通顺读不通啊,它才会提示错误。只有你点击事件触发的时候,js执行了下代码,然后发现里面的逻辑狗屁不通,然后才会报错。

通常我们都会写个window.onload,页面加载完成触发的事件,把要执行的代码放里面,这样资源加载好了js好操作。但是,页面还存在一个隐性的事件,就是read事件,js引擎阅读代码事件。如果读到了function 函数名(){…}活着var 函数名=function(){…}这样的结构,它会匆匆扫一眼,不执行里面的代码,然后继续读下去,其他的语句一旦遇到了,js就会去执行它。比如var 变量名或着函数名()这样。这个是read事件,其他事件也类似,只有当前浏览器对用户行为的响应时,js才会执行里面的代码。

其他语言的事件驱动

说到事件驱动,还有一个语言也是事件驱动的,那就是php(我所知道的。。。)。

php的事件驱动在于,它同样为服务器划分了事件,最简单的,一个请求进来,这是一个事件;服务器做出一个响应,这也是一个事件。然后后台服务器围绕这几个事件,一旦触发哪个就执行相关代码。

js的后台版node也是一样的

相关推荐:

js中的事件机制

JavaScript 事件机制

JS事件之事件流机制

以上就是深入了解JavaScript的事件机制的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2769665.html

(0)
上一篇 2025年3月8日 12:24:50
下一篇 2025年2月23日 02:58:37

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • yii2 加载css,js文件的方式

    这篇文章介绍的内容是yii2 加载css,js文件的方式,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 1. 视图页面直接加载 $css = registerCss($css,[‘type’=>’text/css’],…

    编程技术 2025年3月8日
    200
  • Django如何加载css和js文件以及静态图片

    这篇文章介绍的内容是关于Django如何加载css和js文件以及静态图片,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 一、首先我们应该创立一个文件夹名字为static 该文件夹用于用于保存和存储css,js和图片文件 我们…

    2025年3月8日 编程技术
    200
  • Vue.js如何在浏览器内实现模版渲染

    这篇文章介绍的内容是Vue.js如何在浏览器内实现模版渲染,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 渲染:获取后端的数据,按照一定的规则加载到写好的模板中,输出成在浏览器中显示的html.vue.js是在前端(即浏览器…

    编程技术 2025年3月8日
    200
  • 一些简单的Vue.js的指令总结

    这篇文章介绍的内容是一些简单的Vue.js的指令总结,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 html页面: {{message}} 登录后复制 页面中的数据就是data中的数据 模版指令:控制模块的内容 v-text…

    编程技术 2025年3月8日
    200
  • Echarts如何下载.js文件格式的中国地图

    这篇文章介绍的内容是关于Echarts如何下载.js文件格式的中国地图,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 早上用到echarts的中国地图map时,需要用到china.js文件,但echarts的官网地图js下载…

    2025年3月8日
    200
  • JavaScript如何实现前端缓存

    在前端浏览器中,有些数据(比如数据字典中的数据),可以在第一次请求的时候全部拿过来保存在js对象中,以后需要的时候就不用每次都去请求服务器了。对于那些大量使用数据字典来填充下拉框的页面,这种方法可以极大地减少对服务器的访问。这种方法特别适用…

    编程技术 2025年3月8日
    200
  • js如何获取本地图片显示到浏览器并上传至服务器

    这篇文章介绍的内容是关于浏览器显示本地图片的预览图,调用后端接口将图片上传至服务器,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 一、jsp页面 nbsp;html PUBLIC “-//W3C//DTD HTML 4.01…

    2025年3月8日 编程技术
    200
  • vue如何利用js等比压缩图片

    这篇文章介绍的内容是关于vue如何利用js等比压缩图片,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下最近做一个旅游项目 大家都知道旅游项目图片居多     1.在项目中由于图片尺寸过大  再加上给图片设置了宽高导致图片压缩严…

    2025年3月8日 编程技术
    200
  • 熟悉JS脚本在kettle数据处理的应用

    这篇文章介绍的内容是熟悉JS脚本在kettle数据处理的应用,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 解决方法:结合Generate Rows(数据生成)和Java Script Value(JS组件)及文本输入组件完…

    2025年3月8日 编程技术
    200
  • 浅谈JS的this调用对象

    这篇文章介绍的内容是关于浅谈JS的this调用对象,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 查一下资料得知js的this是指向调用的对象。 只有这一句话很难理解那来做个写个dome。 代码如下: nbsp;html&g…

    2025年3月8日
    200

发表回复

登录后才能评论