JS浏览器事件模型的示例分析

　　介绍

小编给大家分享一下JS浏览器事件模型的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!

JavaScript的特点

1. JavaScript主要用来向HTML页面添加交互行为。 　　2. javascript可以直接嵌入到HTML页面,但写成单独的js文件有利于结构和行为的分离。 　　3.JavaScript具有跨平台特性,在绝大多数浏览器的支持下,可以在多种平台下运行。

什么是事件

我想你很可能听说过事件驱动,但是事件驱动到底是什么?为什么说浏览器是事件驱动的呢?

事件驱动通俗地来说就是什么都抽象为事件。

<李>

一次点击是一个事件

<李>

键盘按下是一个事件

<李>

一个网络请求成功是一个事件

<李>

页面加载是一个事件

<李>

页面报错是一个事件

浏览器依靠事件来驱动应用运行下去,如果没有了事件驱动,那么应用会直接从头到尾运行完,然后结束,事件驱动是浏览器的基石。

一个简单的例子

其实现实中的红绿灯就是一种事件,它告诉我们现在是红灯状态,绿灯状态,还是黄灯状态。我们需要根据这个事件自己去完成一些操作,比如红灯和黄灯我们需要等待,绿灯我们可以过马路。

下面我们来看一个最简单的浏览器端的事件:

html代码:

& lt; button> Change  color

js代码:

var  btn =, document.querySelector(& # 39;按钮# 39;); 　　 　　时间=btn.onclick 函数(),{ 　　console.log才能(& # 39;button 点击# 39;) 　　}

代码很简单,我们在按钮上注册了一个事件,这个事件的处理程序是一个我们定义的匿名函数。当用户点击了这个被注册了事件的按钮的时候,这个我们定义好的匿名函数就会被执行。

如何绑定事件

我们有三种方法可以绑定事件,分别是行内绑定,直接赋值,用addEventListener。

内联这个方法非常不推荐

html代码:

& lt; button  onclick=癶andleClick()“祝辞Press  me

然后在脚本标签内写:

function  handleClick (), { 　　console.log才能(& # 39;button 点击# 39;) 　　}

直接赋值

和我上面举的例子一样:

var  btn =, document.querySelector(& # 39;按钮# 39;); 　　 　　时间=btn.onclick 函数(),{ 　　console.log才能(& # 39;button 点击# 39;) 　　}

这种方法有两个缺点

不能添加多个同类型的处理程序

btn.onclick =,功能阳极; 　　btn.onclick =, functionB;

这样只有functionB有效,这可以通过addEventListener来解决。

不能控制在哪个阶段来执行,这个会在后面将事件捕获/冒泡的时候讲到。这个同样可以通过addEventListener来解决。

因此addEventListener横空出世,这个也是目前推荐的写法。

addEventListener

旧版本的addEventListener第三个参数是bool,新版版的第三个参数是对象,这样方便之后的扩展,承载更多的功能,我们来重点介绍一下它。

addEventListener可以给元素,文档、窗口,甚至XMLHttpRequest等绑定事件,当指定的事件发生的时候,绑定的回调函数就会被以某种机制进行执行,这种机制我们稍后就会讲到。

语法:

target.addEventListener(类型,侦听器[,选项]); 　　target.addEventListener(类型、,侦听器,useCapture]); 　　target.addEventListener(类型、,侦听器,useCapture,, wantsUntrusted ,]);,//,壁虎/Mozilla 只有

类型是你想要绑定的事件类型,常见的有点击,滚动,触摸、鼠标悬停等,旧版本的第三个参数是布尔值,表示是否是捕获阶段,默认是假,即默认为冒泡阶段。新版本是一个对象,其中有捕获(和上面功能一样),被动和一次。> <李>

反应SyntheticEvent

<李>

Vue和反应的优点分别是什么?两者的最核心差异对比是什么?

虽然我们很少时候会接触到原生的事件,但是了解一下事件对象,事件机制,事件代理等还是很有必要的,因为框架的事件系统至少在这方面还是一致的,这些内容我们接下来就会讲到。

事件对象

所有的事件处理函数在被浏览器执行的时候都会带上一个事件对象,举个例子:

JS浏览器事件模型的示例分析