通过合理使用JavaScript,可以为网站用户提供更好的交互体验。这主要是因为JavaScript能够让网站对用户的各种操作及时做出“反馈”。这种“反馈”使网站不再只是一个静态的艺术品,而是具有着不断变化的可能。它增加了网站的趣味性,勾起了用户对网站的好奇心,从而让用户感到愉快。

而当用户感到愉快时,我们有理由相信它会愿意花费更长的时间在此逗留,或是以更高的频率访问我们的网站,甚至是将网站主动推荐给朋友。这当然是我们想要的结果,因此学会使用JavaScript对网站中用户操作添加“反馈”就变得非常重要了,而这正是我们今天将要探讨的主题 -- “DOM事件处理”。

让我们先解释一下主题中出现的关键词:DOM事件以及事件处理

DOM代表文档对象模型(Document Object Modal),是针对HTML和XML文档的一个API,它将页面中的元素以及元素之间的关系抽象为一个由节点对象组成的“树”状模型,以便开发者通过操作节点对象修改页面的样式,结构和内容。

事件是指用户在浏览文档中产生的各种操作,例如“点击鼠标”,“移动滚轮”,“敲击键盘上某一按键”等等。

事件处理即是指当用户在文档中触发某一事件时,开发者使用JavaScript使浏览器执行特定的代码以使网页呈现相应的行为。

了解清楚这三个概念的含义,我们就能够理解学习“DOM事件处理”的逻辑了。首先,我们会讲述浏览器如何获知用户在文档中执行了某一操作,即“捕捉事件”;其次,我们会讲述如何设置一段代码,使其当特定的事件发生时被执行,即“处理事件”;很多时候,我们的“事件处理代码”执行时需要依赖一些当事件发生时才能获取的信息(例如鼠标点击时,指针的位置),而这些信息都被封存在名为“事件对象”的对象中,这将是我们第三部分的主题;而对于各种各样的事件(“鼠标点击”,“键盘敲击某一字符”)我们当然有理由开辟一个独立的章节去深入了解“事件类型”;最后,我们还会给出一些DOM事件处理中,“提升性能”的建议。

所以现在你应该很清楚我们下面提纲的逻辑了:

  1. 捕捉事件
  2. 处理事件
  3. 事件对象
  4. 事件类型
  5. 提升性能

很有条理对吧?下一章见

彻底搞懂DOM事件处理(零)引子的更多相关文章

  1. 一篇文章搞懂DOM

    学习JavaScript肯定是会遇到DOM操作,那么什么是DOM?它又是干嘛用的?这篇文章为你揭晓答案. DOM是document object model的缩写,简称文档对象模型. 简单的说DOM是 ...

  2. 这一次搞懂Spring Web零xml配置原理以及父子容器关系

    前言 在使用Spring和SpringMVC的老版本进行开发时,我们需要配置很多的xml文件,非常的繁琐,总是让用户自行选择配置也是非常不好的.基于约定大于配置的规定,Spring提供了很多注解帮助我 ...

  3. Web端即时通讯基础知识补课:一文搞懂跨域的所有问题!

    本文原作者: Wizey,作者博客:http://wenshixin.gitee.io,即时通讯网收录时有改动,感谢原作者的无私分享. 1.引言 典型的Web端即时通讯技术应用场景,主要有以下两种形式 ...

  4. 搞懂 XML 解析,徒手造 WEB 框架

    恕我斗胆直言,对开源的 WEB 框架了解多少,有没有尝试写过框架呢?XML 的解析方式有哪些?能答出来吗?! 心中没有答案也没关系,因为通过今天的分享,能让你轻松 get 如下几点,绝对收获满满. a ...

  5. 基础篇|一文搞懂RNN(循环神经网络)

    基础篇|一文搞懂RNN(循环神经网络) https://mp.weixin.qq.com/s/va1gmavl2ZESgnM7biORQg 神经网络基础 神经网络可以当做是能够拟合任意函数的黑盒子,只 ...

  6. 彻底搞懂字符编码(unicode,mbcs,utf-8,utf-16,utf-32,big endian,little endian...)[转]

    最近有一些朋友常问我一些乱码的问题,和他们交流过程中,发现这个编码的相关知识还真是杂乱不堪,不少人对一些知识理解似乎也有些偏差,网上百度, google的内容,也有不少以讹传讹,根本就是错误的(例如说 ...

  7. 搞懂分布式技术21:浅谈分布式消息技术 Kafka

    搞懂分布式技术21:浅谈分布式消息技术 Kafka 浅谈分布式消息技术 Kafka 本文主要介绍了这几部分内容: 1基本介绍和架构概览 2kafka事务传输的特点 3kafka的消息存储格式:topi ...

  8. 新手入门HTML5开发,你必须先搞懂这6个问题

    凭借着跨平台,实时更新,无需安装,易于分发等众多优点,HTML5受到越来越多企业的青睐.而凭借着入门相对简单的优势,很多人编程初学者都选择学习HTML5.但对于初学者来说,学习HTML5之前,会有很多 ...

  9. React16源码解读:开篇带你搞懂几个面试考点

    引言 如今,主流的前端框架React,Vue和Angular在前端领域已成三足鼎立之势,基于前端技术栈的发展现状,大大小小的公司或多或少也会使用其中某一项或者多项技术栈,那么掌握并熟练使用其中至少一种 ...

随机推荐

  1. Docker源码分析(三):Docker Daemon启动

    1 前言 Docker诞生以来,便引领了轻量级虚拟化容器领域的技术热潮.在这一潮流下,Google.IBM.Redhat等业界翘楚纷纷加入Docker阵营.虽然目前Docker仍然主要基于Linux平 ...

  2. 页面链接跳转历史URL不记录的兼容处理

    1.阻止跳转a标签的链接 2.location.replace(href) 不生成新的历史记录, 但有bug 3.首先通过HTML5 history.replaceState()方法把当前URL地址替 ...

  3. HTML的特殊字符-图标对应表

    本文摘自:http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html   HTML特殊字符编码大全:往网页中输入特殊字符,需在html代码 ...

  4. angularJS中的ng-repeat指令!

    ng-repeat 指令: ng-repeat 指令用来遍历一个数组重复创建当前元素: <ul ng-app="myApp" ng-controller="myAp ...

  5. Hive JOIN使用详解

    转自http://shiyanjun.cn/archives/588.html Hive是基于Hadoop平台的,它提供了类似SQL一样的查询语言HQL.有了Hive,如果使用过SQL语言,并且不理解 ...

  6. JavaIOC框架篇之Spring Framework

    欢迎查看Java开发之上帝之眼系列教程,如果您正在为Java后端庞大的体系所困扰,如果您正在为各种繁出不穷的技术和各种框架所迷茫,那么本系列文章将带您窥探Java庞大的体系.本系列教程希望您能站在上帝 ...

  7. LayoutSimple简易响应式CSS布局框架

    开发这个css布局的目的是为了少做一些重复的工作,一是前端或多或少会开发一些很小的响应式项目, 二是UI设计的出来的界面总是各种布局各种样式,这个时候如果前端去使用Bootstrap或者Foundat ...

  8. 修改mysql的字符集和默认存储引擎

    转自:http://blog.csdn.net/wyzxg/article/details/8779682 author:skatetime:2012/05/18 修改mysql的字符集和默认存储引擎 ...

  9. Python爬虫基础(二)urllib2库的get与post方法

    urllib2默认只支持HTTP/HTTPS的GET和POST方法 一.Get方式 GET请求一般用于我们向服务器获取数据,比如说,我们用百度搜索,在百度搜索框中搜索“秦时明月”,拿到地址栏里有效ur ...

  10. Apache 2.4 编码GB2312中文乱码的问题

    今天部署了一个项目,代码和数据库都是gb2312的,本地和服务器都是apache2.4的版本,本地编码没问题,response的content-type是空的.按html的mete解析的,查看源码也是 ...