事件

事件

• 事件三要素

1.事件源:触发事件的元素；

2.事件类型：行为，例如：鼠标事件 键盘事件

3.事件处理函数：事件发生时要进行的操作

添加事件

1.HTML事件监听器 （DOM 0级）

<div noclick = 'fn()'></div>

let fn =() => { console.log('')} 

监视事件需要的函数只能在全局查找

2.标准 DOM0级事件监听器

div.onclick = function()
{ console.log('')}

一个类型事件只能绑定一个，如果有多个，前面的会被覆盖

3.DOM 2事件监听器

div.addEventListener('click',function(){}，false)      false为执行冒泡事件流，默认。
div.addEventListener('click',function(){}，true)       true 为执行捕获事件流。

两个事件可同时执行,可绑定多个事件，默认冒泡事件流。

删除事件

1.删除DOM 0级事件监听器

div.onclick = null ;

2.删除DOM 2级事件监听器

div.removeEventListener('click',fu)
let fu = () => {}

函数要放在外面，作为全局变量

事件流

事件在页面中的传播顺序。

事件流分类：

1.冒牌型事件流：从里到外  IE          DOM  0级
2.捕获型事件流：从外到内  网景         DOM  2级
3.DOM事件流：冒泡捕获都支持 
同时存在，先捕获后冒泡.
DOM事件流周期： 捕获阶段-目标触发阶段-事件冒泡节点；

事件类型

鼠标事件

属性                             描述                               
onclick              当用户点击某个对象时调用的事件句柄。                  
ondblclick           当用户双击某个对象时调用的事件句柄。                  
onmousedown          鼠标按钮被按下。                                  
onmouseup            鼠标按键被松开。                                   
onmousemove          鼠标被移动。                                     
onmouseover          鼠标移到某元素之上。                               
onmouseout           鼠标从某元素移开。                                 
onmouseenter         当鼠标指针移动到元素上时触发。                       
onmouseleave         当鼠标指针移出元素时触发                           

onmouseove和onmoueseout      只要有子级，可以频繁触发
onmouseenter和onmouseleave   只能触发一次

键盘事件

属性  描述  DOM
onkeydown   某个键盘按键被按下。  
onkeypress  某个键盘按键被按下并松开。   
onkeyup     某个键盘按键被松开。  

框架事件

onload  一张页面或一幅图像完成加载。
body.onload = function()
{  (js); }