博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
DOM事件全面总结
阅读量:5921 次
发布时间:2019-06-19

本文共 1359 字,大约阅读时间需要 4 分钟。

事件的定义

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

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

转载地址:http://wwsvx.baihongyu.com/

你可能感兴趣的文章
S5P4418 uboot 分析
查看>>
Eclipse格式化代码换行、删除空行
查看>>
uva 11324 The Largest Clique(图论-tarjan,动态规划)
查看>>
Swift - 微调器或叫步进器(UIStepper)的用法
查看>>
微信公众平台开发问答
查看>>
Project Euler 78:Coin partitions
查看>>
Android调用Webservice发送文件
查看>>
HDU--3081--Marriage Match II--最大匹配,匈牙利算法
查看>>
至少有6000个程序员比我勤奋
查看>>
SOLID原则
查看>>
Sublime必备插件
查看>>
MyBatis入门(五)---延时加载、缓存
查看>>
js原生设计模式——2面向对象编程之闭包2
查看>>
Going Home(最大匹配km算法)
查看>>
shell统计
查看>>
第六篇 ORACLE EBS用户界面通用元素或功能背后的道理解析
查看>>
.Net中的反应式编程(Reactive Programming)
查看>>
Objective-C内存管理教程和原理剖析(四)
查看>>
OC self和super
查看>>
大叔也说Xamarin~Android篇~Activity之间传递数组
查看>>