js事件分析

一，定义。

1.具体发生：

用户操作网页时发生的交互动作或者网页本身的一些操作，在文档或者浏览器中发生的一些特定交互瞬间。

2.发生原因：

js的引擎在同一时间只能执行一个事件，当同时发生多个比较耗费时间的操作时（例如远程访问和读取文件），就是造成堵塞，而用户界面会没有反应。

二，事件模型（简介，可略）

1.DOM0 级事件模型

在网页中直接定义监听函数，也可以通过 js 属性来指定监听函数。所有浏览器都兼容这种方式

（直接在 dom 对象上注册事件名称，就是 DOM0 写法）

2.IE 事件模型

两个过程，事件处理阶段和事件冒泡阶段

处理：执行目标元素绑定的监听事件

冒泡：依次检查经过的节点是否绑定了事件监听函数，如果有则执行。（attachEvent用来添加监听函数，可以添加多个监听函数，会按顺序依次执行——只是CTF的话可以不必理会）

3.DOM2 级事件模型

事件捕获阶段：事件从 document 一直向下传播到目标元素，依次检查经过的节点是否绑定了事件监听函数，如果有则执行，然后进行IE事件模型。

三，事件绑定方式（不必深究）

附链接：JS事件最全详解_js 事件-CSDN博客

四，三大事件

注意：原生的事件在on后面都是小写，监听事件不需要加on

原生：

1.鼠标事件。

• click：单击                                      
• dblclick：双击
• mousemove：鼠标移动
• mousedown：鼠标按下
• mouseup：鼠标抬起
• mouseover：鼠标悬浮
• mouseout：鼠标离开
• mouseenter：鼠标进入
• mouseleave：鼠标离开

2.键盘事件。

• keydown：按键按下
• keyup：按键抬起
• keypress：按键按下抬起

3.html事件。

• load：文档加载完成
• select：被选中的时候
• change：内容被改变
• focus：得到光标
• blur:失去光标
• resize：窗口尺寸变化
• scroll：滚动条移动

监听：

1.鼠标事件

onclick 点击事件
 ondblclick 双击事件
 onclick.right  右击事件

onmouseover（移入）onmouseout（移出） 鼠标经过时自身触发事件，经过其子元素时也触发该事件（冒泡，多次触发）
 onmouseenter（移入） onmouseleave（移出） 鼠标经过时自身触发事件，经过其子元素时不触发该事件（不支持冒泡，只触发一次）

onmousedown 鼠标按下的时候触发的事件（拖拽行为）

onmousemove 鼠标移动（拖拽行为）

onmouseup 鼠标弹起触发的事件（拖拽行为）

2.键盘事件

onkeydown 键盘按键被按下发生的事件（键盘事件）
onkeypress 键盘按键按下并松开发生的事件（键盘事件）

onkeyup 键盘按键被松开发生的事件（键盘事件）

3.html事件

  onchange 内容变化事件（在值改变时，并且失去焦点）
  onfocus 元素获取焦点事件
  onblur    元素失去焦点事件（不管值是否改变，失去焦点及触发）
  onselect 文本被选中
 onfullscreenchange   全屏状态改变时
 onresize 窗口或者框架被重新调整大小
 onabort  事件会在图像加载被中断时发生。（图片）
 onerror 当加载图像和文档时发生错误（图片）
 onreset 重置按钮被点击（form属性）
 onsubmit 提交按钮被点击（form属性）
 onload 用户进入某个页面的时候触发（获取用户的浏览器信息）
 onunload 用户离开某个页面的时候触发（是否确认离开此页面）