资讯专栏INFORMATION COLUMN

DOM事件全面总结

chnmagnus / 1695人阅读

摘要:事件的定义事件就是用户或浏览器自身执行的某种动作。事件在页面中定义。用来添加和移除事件处理程序和。事件流包括三个阶段事件捕获阶段,处于目标事件和事件冒泡阶段。事件捕获比如单机元素会触发事件。事件捕获的过程是从上到下。

事件的定义
事件就是用户或浏览器自身执行的某种动作。
网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。
比如说,我们可以在用户点击某按钮时产生一个 onClick 事件来触发某个函数。事件在 HTML 页面中定义。
事件类型
UI事件
焦点事件,当元素获得或失去焦点时触发
鼠标事件,
滚轮事件,使用鼠标滚轮时触发
文本事件,在文档中输入文本时触发
键盘事件
DOM事件的级别
DOM 0级事件(分为两个):
1、在html标签内写onclick事件;
//
2、在JS写onlicke=function(){}函数;
// document.getElementById("myButton").onclick = function () { }
DOM 2级事件:
只有一个:监听事件。用来添加和移除事件处理程序:addEventListener()和removeEventListener()。
DOM 3级事件:
和DOM 2级事件类似,DOM 3中定义了自定义事件。
事件流
定义:从页面中接受事件的顺序。
DOM事件流包括三个阶段:事件捕获阶段,处于目标事件和事件冒泡阶段。
事件捕获
比如单机

元素会触发click事件。事件捕获的过程是从上到下。
--图片待上
冒泡事件反之。
事件机制,如何绑定事件处理函数?

事件处理:

IE方式
1、attachEvent(事件名称, 函数),绑定事件处理函数:
var btn=document.getElementById("btn");

        btn.attachEvent("onclick",function(){
            alert("Clicked");
        });

用onclick
2、detachEvent(事件名称, 函数),解除绑定
DOM方式
addEventListener(事件名称,函数, 捕获)
removeEventListener(事件名称, 函数, 捕获)
接收三个参数,第一个是要处理的事件名,第二个是事件处理程序,第三个值为false时表示在事件冒泡阶段调用事件处理程序,一般建议在冒泡阶段使用,特殊情况才在捕获阶段。
后面无论接多少函数,因为后面任何设置的属性都会尝试覆盖较早的属性.
怎么移除事件和绑定事件

解除事件: 对象.事件=null (此方法就是函数的覆盖)

DOM中的事件对象(event对象常见应用)
详情见高程P355
自定义事件
(进阶)
event = new CustomEvent(type [, eventInitDict])
事件委托
事件委托(事件代理)是利用事件冒泡,只指定一个事件处理程序来管理某一类型的所有事件。
优点:
在页面中设置事件处理程序所需的时间更少。
整个页面占用的内存更少,能够提升整体性能。
缺点:
有些事件不能冒泡,blur、focus、load和unload不能像其它事件一样冒泡。
如何实现事件委托?

----文中还有一些小问题待总结,望大佬投稿

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

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

相关文章

  • Dom中高big 事件总结(持续更新中)

    摘要:三事件事件在即将离开当前页面刷新或关闭时触发。四事件事件在用户退出页面时发生。五事件该事件在存储更新时触发六事件该事件在窗口的浏览历史对象发生改变时触发七事件事件在用户中止加载或元素时触发。 将前段时间自己用到的,比较少见,但是功能很强大的事件在这里总结下,一来自己重新梳理归档下,二来,没用过的同学也可以尝试用下。其实,这些都是基础知识,但是基础是最重要的。还记得老师说过:基础不牢,地...

    mzlogin 评论0 收藏0
  • 从一次重写原生方法遇到的坑,总结一下Web中的事件系统

    摘要:问题初探索删掉那一点重写的代码后,表现符合预期了。每一次都重新造一个虚拟的,然后监听其自定义事件,并且立即触发这个自定义事件。真的不要随便重写原生方法。。。于是,我全面总结一下了中的事件系统,也算是对基础的巩固。 写在前面 前段时间,我写过一篇文章前端开发中的Error以及异常捕获。 在文章中,我提到了这个问题: showImg(https://segmentfault.com/img...

    oysun 评论0 收藏0
  • DOM编程艺术》中初步实现的图片库的总结(二)

    摘要:前言在编程艺术中初步实现的图片库的总结一中,有很多不足之处比如事件处理嵌套在中,显得如此笨重和屌丝没有对函数进行相应的安全检查等,本篇文章对上述问题做了全面的升级。 前言:在《DOM编程艺术》中初步实现的图片库的总结(一)中,有很多不足之处:比如事件处理嵌套在HTML中,显得如此笨重和屌丝;没有对showPic函数进行相应的安全检查等,本篇文章对上述问题做了全面的升级。--------...

    阿罗 评论0 收藏0
  • 前端性能优化常用总结

    摘要:前言对于前端的性能话题,从来都没有断绝过。作为一个前端开发者,性能是我们关注的指标。前端发展以来,优化方式,琳琅满目,有雅虎军规等。所以,接下来我会从三个方面就前端性能进行总结网络方面操作及渲染方面数据方面。 前言 对于前端的性能话题,从来都没有断绝过。因为这个东西没有最好,只有更好。而且往往也是业务的繁杂程度去决定优化程度的。作为一个前端开发者,性能是我们关注的指标。它直接影响着我们...

    oliverhuang 评论0 收藏0
  • 前端性能优化常用总结

    摘要:前言对于前端的性能话题,从来都没有断绝过。作为一个前端开发者,性能是我们关注的指标。前端发展以来,优化方式,琳琅满目,有雅虎军规等。所以,接下来我会从三个方面就前端性能进行总结网络方面操作及渲染方面数据方面。 前言 对于前端的性能话题,从来都没有断绝过。因为这个东西没有最好,只有更好。而且往往也是业务的繁杂程度去决定优化程度的。作为一个前端开发者,性能是我们关注的指标。它直接影响着我们...

    walterrwu 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<