js的事件、事件模型和对象

最近因为查js里的addeventLIstener监听事件的事件队列，不是很懂。

了解过，可能是忘了，昨天看了来巩固一波总结一下；

一、首先给说一下什么是事件

事件简单来说就是当页面元素自动发生改变，或者用户手动触动页面元素发生改变的叫事件；

事件处理函数：当前事件触发时自动调用的函数；

创建事件的三种方式

第一个是在html标签里创建，标签里面添加：

<div onclick="dudu()" id="dede"></div>

然后在js里给函数名添加事件处理函数；

缺点是：元素和事件分离不便于维护

第二种是常用得赋值方式

在js中获取页面元素得标签，将其添加事件和处理函数。

var dudu=document.getelementbyid("dede")//获取页面元素。

dudu.onchange=function(){//当事件发生时会调用事件处理函数}。

缺点是：因为处理函数是以赋值方式进行得，所以一个事件只能绑定一个处理函数。

但是，后绑定得处理函数会覆盖之前的，在这里我们就要使用第三种方式了。

addeventlistenter//中文---增加事件监听得东西。

在页面元素中添加一个事件监听之后，这个监听对象自动将事件名和其处理函数就自动添加到事件队列里，

我们元素执行事件得时候就会遍历事件队列 找到符合条件得处理函数执行(只能理解到这儿了...)；

事件讲完了 我们来说说 事件模型。

事件模型--代表我们触发事件到事件执行玩中间发生的一系列事情；

后面我们的dom将事件周期分为了三个阶段，分别是

捕获：这个阶段我们会由外向内依次记录各个父元素上的处理函数

目标触发：优先触发目标元素的事件和处理函数；

（挺简单的一个目标元素，我一直在思考用什么专业术语将其说出来；我脑子当时

只能想到这是我要点击的我改动的。可是这么说不严谨，什么点击，什么改动，最后我觉得

其实我想的说法是，我即将需要触发的元素，就是目标元素）

冒泡阶段：这个阶段就是从我们目标触发开始，又内向外依次触发我们捕获阶段记录的事件处理函数，一直冒到

我们dom树的顶层，

（为什么冒泡这么恐怖，自己触发就触发，你还把父元素带着也触发呢，可能是因为你是父元素的一份子

那句老话不是说的好吗：打在儿身，痛在父心，可能这就是冒泡的真谛吧）；

值得注意的就是捕获刚好和冒泡相反的：

大家必须有处理函数

一个是从DOM树的最上层开始触发一直到捕获到事件源.

一个是DOM的触发层向父元素一直到dom树的最外层

冒泡完了就是事件对象了

刚听事件对象的时候我一脸懵逼；

咋的了 没听说过啊，然后我一搜原来就是事件函数里的那个event.

下面就来介绍一下事件对象：以下是函数对象包含的东西--真的多

在介绍一下事件对象：--

事件对象：当我们触发事件的时候，事件的本质就是执行事件的时候触发一个函数

该函数的形参就会接受我们当前的对象（了解的不是很清楚，反正差不多就是这样）--

浏览器自动创建的，保存着我们事件的所有信息，还有可以操作当前事件的api。

啥时候用事件对象呢：既然他保存着咱的信息，还有操作的api，那么就用呗：

取消冒泡：形参.stoppropagation()(形参可以改的)//propagation=”传递，蔓延“

取消默认行为：形参.preventDefault()//--防止默认行为：

有些元素是自带默认效果：比如button就自带提交效果

超链接跳转效果等等等等。。。

然后就是利用冒泡了

因为监听队列的原因，监听的对象越多，我们遍历找到对应的函数就慢；

所以咱们如果有多个子元素需要调用共同的函数只需要在父元素上绑定一次

所有的子元素就都可以调用了=>参考捕获冒泡，这个咋了解就成

最后就是HTML5新出的拖拽API:因为可能和一切浏览器快捷键发生冲突，我们先阻止默认行为

然后在使用

当事件发生时：可以实施确定我们鼠标的坐标

e.screenX,e.screenY 相当于屏幕左上角

e.clienX e.clientY 相当于document的左上角

e.offsetX e.offsetY 相当于当前事件的方向

这个问题还是很大的-- 昨天就复习这么多 明天在写--

js的事件、事件模型和对象

原文：https://www.cnblogs.com/hausername/p/11102804.html