JavaScript中几个重要的知识点（2） ---- DOM事件

dantezhao 发布于2019-08-20 17:33 / 507人阅读

摘要：使用来移除事件，参数必须与要移除的事件处理函数地址指针相同。在低版本浏览器中，绑定级事件的方法为中的级事件的事件处理程序都是在冒泡阶段执行的。

JavaScript中几个最重要的大知识点

面向对象

DOM事件

异步交互ajax

事件

事件就是文档和浏览器的瞬间交互行为

1.事件类型

点击: click

滚轮: scroll

滑动: move

进入: enter

加载: load

2.事件机制

事件的监听(事件的绑定)

通过on+事件名这种类型绑定的事件都叫做DOM0级事件

DOM0级事件，同一个元素的同一个事件监听，绑定的触发运行函数，不能重复绑定，有且只能绑定一回，下一次绑定的会将上一次的给覆盖掉

事件设为null，移除事件的监听

监听事件，不仅是浏览器的一种机制，也是浏览器赋予DOM文档元素的属性，即事件的监听是时刻存在的，但是事件触发时候运行的处理函数，是我们自己定义的

事件的触发：触发事件时候运行绑定的处理函数

JS中的事件，其实是以一个类的形式存在的，每个绑定的事件其实都是这个类的一个实例 (引用数据类型的对象) ，浏览器会给我们的所有的事件触发函数中，默认传入一个实参，就是当前事件的事件对象(event)，在这个事件对象中，保存着当前事件所有信息

事件对象存在于所有的事件的触发处理函数中，事件对象中有一些常用的属性，用于控制交互中的效果。

clientX/clientY：鼠标点击点对应屏幕左上角的位置信息

pageX/pageY：鼠标点击的点对应body左上角的位置信息

keyCode：键盘事件中键盘对应的键盘码

Backspace： keyCode:8 删除键

enter： keyCode：13 回车键

space： keyCode：32 空格键

arrowLeft/Up/Right/Down： keyCode：37 / 38 / 39 / 40 小键盘左 / 上 / 右 / 下

事件对象还存在一些兼容性：在标准浏览器下他的事件对象存在于当前函数的作用域中，而在ie中存在于window作用域下。

//处理事件对象的兼容性写法
event=event|| window.event;

//处理事件源的兼容性写法
event.target || event.srcElement

//处理事件冒泡的兼容性写法
event.stopPropagation() || event.cancelBubble=true;

//阻止默认行为的兼容写法
event.preventDefault() || event.returnValue=false;

3.事件委托的思想

有时候我们需要对一个DOM元素下的多个子元素绑定相同的事件，比如说为表格添加可删除一行的功能，一般的方法是循环绑定事件，但是这样的办法显然性能不高，这时候就可以只为其父元素绑定事件，通过事件委托来实现其多个子元素的相同事件效果。

事件委托的原理为：根据事件流的传播机制，我们在父级标签上监听事件，通过捕获和冒泡机制，在触发子集的事件的时候，冒泡传播给父级，来触发父级的事件处理函数

那么什么是事件得出传播机制呢？总的来说可以把事件流的传播机制分为两到三个阶段：

事件捕获阶段：从DOM最外层标签HTML开始往子元素捕获事件源

捕获到事件对象（可以归到第一阶段）

冒泡传播：从捕获到事件源的元素开始往父级元素进行事件冒泡，DOM0级事件中，事件绑定函数的触发都发生在冒泡阶段

DOM2级事件

DOM2级事件就是DOM0级事件的优化，同一个文档对象同一个事件，可以绑定多个事件处理程序，还可以控制事件处理程序的执行阶段在捕获或者冒泡阶段执行。

1.在标准浏览器中，绑定DOM2级事件的方法为：addEventListener()

第一个参数为事件类型：[String] click / mouseover / blur ...

第二个参数为事件处理函数：[Function] listener

第三个参数为事件处理函数是否在冒泡阶段执行：[Boolean] ture/false

如果直接触发的是事件源的监听事件，没有事件委托的情况下，则冒泡和捕获会同时发生，此时会根据函数的书写先后顺序执行事件处理程序

事件绑定函数中的this指向当前绑定事件的DOM对象，this还等于currentTarget。
使用 removeEventListener() 来移除事件，参数必须与要移除的事件处理函数地址指针相同。

2.在低版本IE浏览器（6-8）中，绑定DOM2级事件的方法为：attachEvent()

IE中的DOM2级事件的事件处理程序,都是在冒泡阶段执行的。

第一个参数为事件类型：[String] onclick / onmouseover / onblur ...

第二个参数为事件处理程序：：[Function] listener

IE下DOM2级事件的处理函数是绑定在全局(window)下,所以其内部this指向window，IE下DOM二级事件还存在重复执行多次相同的处理函数和函数执行乱序的问题，可以用订阅 - 发布模式解决这些兼容性问题。
使用detachEvent()来移除事件，参数同样必须与要移除的事件地址指针相同

云服务器 GPU云服务器 javascript_dom事件重要知识点 javascript的dom对象 javascript的dom编程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83671.html

JavaScript中几个重要的知识点（1） ---- 面向对象

摘要：中几个最重要的大知识点面向对象事件异步交互面向对象在中可以把任意的引用和变量都看成是一个对象。我们可以写一个通用方法来模拟面向对象语言的多态 JavaScript中几个最重要的大知识点面向对象 DOM事件异步交互ajax 面向对象在JS中可以把任意的引用和变量都看成是一个对象。面向对象的主要三个表现形式：封装继承多态 1. 封装 1.1 单例模式 var obj={...

acrazing 2019-08-20 17:32 评论0 收藏0
JavaScript中几个重要的知识点（3） ---- Ajax

摘要：与响应不同的是，身份验证并不能提供任何帮助，而且这个请求也不应该被重复提交。 JavaScript中几个最重要的大知识点面向对象 DOM事件异步交互ajax AJAX AJAX是异步的javascript和xml（Asynchronous Javascript And XML）的缩写，用于网页局部刷新，提升用户浏览体验通常前端程序员关于AJAX的掌握仅仅停留在会用AJAX发送...

starsfun 2019-08-20 17:36 评论0 收藏0
2017-06-28 前端日报

摘要：前端日报精选我是如何实现的在线升级热更新功能的张鑫旭鑫空间鑫生活翻译表单的运用第期晋升评审的套路异步编程的四种方式黄博客精选组件设计和分解思考掘金中文译使登录页面变得正确掘金前端从强制开启压缩探究插件运行机制掘金个常用的简 2017-06-28 前端日报精选我是如何实现electron的在线升级热更新功能的？ « 张鑫旭-鑫空间-鑫生活【翻译】React 表单： Refs 的运用【...

QLQ 2019-08-20 17:36 评论0 收藏0
vue常用知识点总结

摘要：这里借鉴了一下的处理方式，我们把单独模块的包装成一个函数，提供一个全局的回调方法，加载完成时候再调用回调函数。感谢本文引用链接的各位大佬们，小菜鸟我只是个搬运工 1.谈一谈你理解的vue是什么样子的？ vue是数据、视图分离的一个框架，让数据与视图间不会发生直接联系。MVVM 组件化：把整体拆分为各个可以复用的个体数据驱动：通过数据变化直接影响bom展示，避免dom操作。可以在...

xiaokai 2019-08-22 17:10 评论0 收藏0