一.(1)事件源(事件目标):在哪个组件上发生的事件,也就是发生事件的作用体或与之相关的对象。任何元素,body,html元素等等,都可以作为事件源。

(2)事件:事件就是用户或浏览器自身执行的某种动作。比如:click,load,等等都是事件的名字。

(3)事件类型:表单事件,window事件,鼠标事件,键盘事件等。

常用表单事件:

focus(不冒泡,IE和ES5支持冒泡的focusin) 焦点事件,blur(不冒泡,IE和ES5支持冒泡的focusout) 失去焦点事件,submit  提交事件,change 改变事件,input  文本输入事件;

常用的window事件:

load 加载事件 ,unload 关闭事件,beforeunload 关闭之前的事件。DOMContentLoaded,它在DOM加载之后及资源加载之前被触发事件。 readyStatechage  当页面加载状态改变事件.

常用的鼠标事件:

click  单击事件,dbclick 双击事件,textcontentmenu 文本菜单事件,mouseover 鼠标放上事件,mouseout 鼠标离开事件,mousedown 鼠标按下事件,mouseup 鼠标抬起事件,mousemove 鼠标移动事件,mouseenter  鼠标移入事件,mouseleave 鼠标移除事件

常用键盘事件:

keypress   键盘事件,keyup 键盘抬起事件, keydown 键盘按下事件,

(4)事件传播:指浏览器决定哪个对象触发其事件处理程序的过程。

(5)事件流:指的是从页面接收事件的顺序,IE的事件流是事件冒泡流,而Netscape Communication的事件流是事件捕获流。事件在DOM中传播的顺序有两种类型:事件捕获和事件冒泡。

(6)DOM2级事件标准规定了事件流包括三个阶段:事件捕获阶段,处于目标阶段,事件冒泡阶段。在DOM2级事件模型中,一旦事件被触发,事件流首先从DOM树顶部(文档节点)向下传播,直到目标节点,然后再从目标节点向上传播到DOM树顶。从上到下的过程被称为捕获阶段(该阶段包括从文档到目标节点的父节点范围内的所有节点),从下到上的过程被称为冒泡阶段,包括从目标节点的父节点返回到文档的行程中遇到的节点(即就是事件开始由文档中嵌套层次最深的那个具体的元素节点接收,然后逐渐向上级传播到较不具体的节点)。如图

第一部分称为捕获阶段,捕获阶段的主要任务是建立传播路径,在冒泡阶段,事件会通过这个路径回溯到文档跟节点。第二部分称为目标阶段,该阶段仅包括目标节点(图中的div节点),事件在目标节点上被触发。第三部分称为冒泡阶段,事件在目标元素上触发后,并不在这个元素上终止,同一个事件会依次在目标节点的父节点,父节点的父节点...直到最外层的节点上被触发。举一个例子,来说明事件流的三个阶段:如图:

当点击最里层的span元素时,事件流首先从DOM树顶部(文档节点)向下传播,直到目标节点(如上图例中的span元素),然后再从目标节点向上传播到DOM树顶。从上到下的这个搜索dom树的过程,就是捕获阶段,而从下到上的span元素被选中,一直弹出对话框html元素被选中,这就是同一个事件的冒泡过程被称为冒泡阶段,也就是事件在目标元素上触发后,并不在这个元素上终止,会一直向上冒泡,直到最外层的节点上。

不过,并非每个事件对象都参与事件流的所有三个阶段。而对于事件冒泡,在必要的时候还是需要相应的处理,这两个问题后期再继续学习研究。

(7)事件处理程序(事件监听程序):处理或者响应事件的函数。事件处理程序的名字以”on”开开头,比如click事件的处理程序就是onclick,

(8)事件对象(event):是与特定事件相关且包含有关该事件详细信息的对象。事件对象作为参数传递给事件处理程序函数。

转载于:https://blog.51cto.com/xiyin001/1749423

js 事件学习与总结相关推荐

  1. 【JavaScript】JS事件机制学习

    常用的事件 通过事件机制,达到与用户的交互,与java的swing交互类似. 主要是结合js的函数使用. 当你添加一个事件之后没有达到想要的效果时,就要检查一下是不是给HTML标签添加了合适的事件,以 ...

  2. Ext JS 6学习文档-第3章-基础组件

    Ext JS 6学习文档-第3章-基础组件 基础组件 在本章中,你将学习到一些 Ext JS 基础组件的使用.同时我们会结合所学创建一个小项目.这一章我们将学习以下知识点: 熟悉基本的组件 – 按钮, ...

  3. js/jquery学习笔记

    javascript简介 JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言. 不同于服务器端脚本语言,例如PHP与ASP,JavaScript是客户端脚本语言,也就是说Ja ...

  4. Ext JS 6学习文档-第6章-高级组件

    Ext JS 6学习文档-第6章-高级组件 高级组件 本章涵盖了高级组件,比如 tree 和 data view.它将为读者呈现一个示例项目为 图片浏览器,它使用 tree 和 data view 组 ...

  5. JS逆向学习笔记 - 持续更新中

    JS逆向学习笔记 寻找深圳爬虫工作,微信:cjh-18888 文章目录 JS逆向学习笔记 一. JS Hook 1. JS HOOK 原理和作用 原理:替换原来的方法. (好像写了句废话) 作用: 可 ...

  6. three.js SVG 学习绘制三维地图

    three.js SVG 学习绘制地图 https://www.js-css.cn/jscode/other/other43/ 找到一个不错的资源,不过每个省份的svg数据太小了,不精确. 主要的是这 ...

  7. Js 高级学习教程

    一.Js 高级学习教程 1.Js BOM.DOM 基础概念 2.Js BOM 6大对象 3.Js 定时器使用 4.Js 本地存储 5.Js Dom 操作基本逻辑 6.Js Dom 事件注册 7.Js ...

  8. JavaScript之JS事件机制

    JS事件机制 一.JS事件机制 1.解释 2.作用 3.内容 3.1 单双击事件 3.2 鼠标事件 3.3 键盘事件 3.4 焦点事件 3.5 页面加载事件 4.注意 5.实例 二.衍生思考 1.给合 ...

  9. html父级添加伪类after,关于伪类after后续追加,实现js事件(如点击事件)

    实现情况为:点击"编辑"后,"编辑"文字变成"完成",再点击伪类元素后的"完成",此时的"完成"应该 ...

最新文章

  1. 中使用mysql连接失败_如何在命令行下使用 MySQL 连接数据库不用每次都输入密码?...
  2. 原生js系列之DOM工厂模式
  3. 第3篇:Flowable-IDM详述
  4. 打破气球所能获得的最大积分 Burst Balloons
  5. 使用消息中间件时,如何保证消息不丢失且仅仅被消费一次
  6. 机场也应该取个好听的名
  7. mac键盘符合对应含义(⌘ ⇧)
  8. 10的负8次方用python_matplotlib;10的分数次幂;科学记数法
  9. Pytorch简单一览表
  10. 基于蓝牙5(BTIoT-5)的物联网架构
  11. 未来规划——关于以后房屋装修的一些设想
  12. 85后独立手游开发者专访:为游戏而坚持
  13. 新手必看:访问url到加载全过程详解(看完不会我吃shi)
  14. 第6-7课:Pierre Dellacherie 算法与俄罗斯方块游戏
  15. 合创视觉科技交互设计学的是什么东西?
  16. C盘AppData目录文件夹JxBrowser占用90G?
  17. stochastic pool
  18. java把分钟转换成多少小时多少分钟
  19. java gridlayout宽度_java-ee – 无法使gridlayout适应屏幕大小(Vaadin 6.7.4)
  20. 数据中台的正确理解和数据中台建设的关键环节

热门文章

  1. 6174问题 --ACM解决方法
  2. python 库 全局变量_python局部变量和全局变量global
  3. Linux 线程信号量同步
  4. (C语言版)栈和队列(二)——实现顺序存储栈和顺序存储队列的相关操作
  5. Ubuntu 14.04数据库服务器--mysql的安装和配置
  6. 【C++ Primer | 16】std::move和std::forward、完美转发
  7. C/C++中NULL指针
  8. ASP.NET MVC Filter过滤机制(过滤器、拦截器)
  9. JDK 下载相关资料
  10. 阿里云ESC上的Ubuntu图形界面的安装