js 事件学习与总结
一.(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 事件学习与总结相关推荐
- 【JavaScript】JS事件机制学习
常用的事件 通过事件机制,达到与用户的交互,与java的swing交互类似. 主要是结合js的函数使用. 当你添加一个事件之后没有达到想要的效果时,就要检查一下是不是给HTML标签添加了合适的事件,以 ...
- Ext JS 6学习文档-第3章-基础组件
Ext JS 6学习文档-第3章-基础组件 基础组件 在本章中,你将学习到一些 Ext JS 基础组件的使用.同时我们会结合所学创建一个小项目.这一章我们将学习以下知识点: 熟悉基本的组件 – 按钮, ...
- js/jquery学习笔记
javascript简介 JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言. 不同于服务器端脚本语言,例如PHP与ASP,JavaScript是客户端脚本语言,也就是说Ja ...
- Ext JS 6学习文档-第6章-高级组件
Ext JS 6学习文档-第6章-高级组件 高级组件 本章涵盖了高级组件,比如 tree 和 data view.它将为读者呈现一个示例项目为 图片浏览器,它使用 tree 和 data view 组 ...
- JS逆向学习笔记 - 持续更新中
JS逆向学习笔记 寻找深圳爬虫工作,微信:cjh-18888 文章目录 JS逆向学习笔记 一. JS Hook 1. JS HOOK 原理和作用 原理:替换原来的方法. (好像写了句废话) 作用: 可 ...
- three.js SVG 学习绘制三维地图
three.js SVG 学习绘制地图 https://www.js-css.cn/jscode/other/other43/ 找到一个不错的资源,不过每个省份的svg数据太小了,不精确. 主要的是这 ...
- Js 高级学习教程
一.Js 高级学习教程 1.Js BOM.DOM 基础概念 2.Js BOM 6大对象 3.Js 定时器使用 4.Js 本地存储 5.Js Dom 操作基本逻辑 6.Js Dom 事件注册 7.Js ...
- JavaScript之JS事件机制
JS事件机制 一.JS事件机制 1.解释 2.作用 3.内容 3.1 单双击事件 3.2 鼠标事件 3.3 键盘事件 3.4 焦点事件 3.5 页面加载事件 4.注意 5.实例 二.衍生思考 1.给合 ...
- html父级添加伪类after,关于伪类after后续追加,实现js事件(如点击事件)
实现情况为:点击"编辑"后,"编辑"文字变成"完成",再点击伪类元素后的"完成",此时的"完成"应该 ...
最新文章
- 中使用mysql连接失败_如何在命令行下使用 MySQL 连接数据库不用每次都输入密码?...
- 原生js系列之DOM工厂模式
- 第3篇:Flowable-IDM详述
- 打破气球所能获得的最大积分 Burst Balloons
- 使用消息中间件时,如何保证消息不丢失且仅仅被消费一次
- 机场也应该取个好听的名
- mac键盘符合对应含义(⌘ ⇧)
- 10的负8次方用python_matplotlib;10的分数次幂;科学记数法
- Pytorch简单一览表
- 基于蓝牙5(BTIoT-5)的物联网架构
- 未来规划——关于以后房屋装修的一些设想
- 85后独立手游开发者专访:为游戏而坚持
- 新手必看:访问url到加载全过程详解(看完不会我吃shi)
- 第6-7课:Pierre Dellacherie 算法与俄罗斯方块游戏
- 合创视觉科技交互设计学的是什么东西?
- C盘AppData目录文件夹JxBrowser占用90G?
- stochastic pool
- java把分钟转换成多少小时多少分钟
- java gridlayout宽度_java-ee – 无法使gridlayout适应屏幕大小(Vaadin 6.7.4)
- 数据中台的正确理解和数据中台建设的关键环节
热门文章
- 6174问题 --ACM解决方法
- python 库 全局变量_python局部变量和全局变量global
- Linux 线程信号量同步
- (C语言版)栈和队列(二)——实现顺序存储栈和顺序存储队列的相关操作
- Ubuntu 14.04数据库服务器--mysql的安装和配置
- 【C++ Primer | 16】std::move和std::forward、完美转发
- C/C++中NULL指针
- ASP.NET MVC Filter过滤机制(过滤器、拦截器)
- JDK 下载相关资料
- 阿里云ESC上的Ubuntu图形界面的安装