事件

事件

事件驱动三要素：事件源，事件类型，事件处理函数（事件句柄）

一、添加事件监听器

1.标签里添加（不推荐使用）

<input type="button" onclick="fn()">

2.标准DOM0级添加方式 

ele.onclick = function(){}; //只能绑定一个同类型事件，代码由上至下解析

3.DOM2级添加方式

ele.addEventListener('click',function(){},boolean)
 boolean值控制事件流处于捕获true 或冒泡 false （默认） 可省略不写
 可以绑定多个同类型事件，同时执行

---删除事件

1.DOM0级 ele.onclick=null; 简单数据类型 存在栈上 值

2.DOM2级 复杂数据类型 存在堆上 址

function fn(){};                     
ele.addEventListener('click',fn);  
ele.removeEventListener('click',fn);

-----事件分类

1.window事件

• a. onload 加载事件
• b. onscroll 滚动
• c. onresize 窗口大小重置

2.鼠标事件

onclick;       单击
ondblclick;    双击
onmousedown;   鼠标按下
onmouseup;     鼠标松开
//不冒泡  常用
onmouseenter;  鼠标移入
onmouseleave;  鼠标移出
//冒泡 不常用
onmouseover;   鼠标移入
onmouseout;    鼠标移出

3.键盘事件 --->input和document才能绑定（可输入元素）　

1.onkeydown;  某个键盘按键被按下
2.onkeyup;    某个键盘按键被松开
3.onkeypress; 某个按键被按下并松开

获取键盘按键值
function(event){};
event.key  ------>按的那个键
event.keyCode --->按的键对应的ASCII码

4.事件流 事件在页面上的传播顺序

DOM0： 里--->外

DOM2: 默认 （false) 里---->外

            当Boolean值改为（true ）外--->里

IE认为事件像🐟吐泡---->冒泡 里---->外 冒泡型事件流

网景认为事件相反 --->捕获型事件流 外----->里

W3C统一称：DOM事件流（同时支持冒泡和捕获） 修改Boolean 值就行

5.event事件对象 ----------指向----->事件类型

1.脚本引擎自动传给事件处理函数，作为形参
function fn(event){
console.log(event);
}
2.低版本 IE (兼容性) 一般不用
function fn(event){    事件类型不一样，就要重新设置兼容性  
let e = event || window.event;
}
event.target 触发事件的目标元素
this 事件源

6.键盘事件

event.key     返回按键名称
event.keyCode 返回字符串键码
event.altKey  在指定事件发生时，alt键是否被按下并保持住
event.shiftKey在指定事件发生时，shift键是否被按下并保持住
event.ctrlKey 在指定事件发生时，CTRL键是否被按下并保持住

7.event鼠标事件

event.clientX/event.clientY 返回鼠标事件发生时与浏览器的x,y轴坐标
event.pageX/event.pageY  返回鼠标事件发生时与页面的x,y轴坐标  （考虑滚动条）
event.screenX/event.screenY返回鼠标事件发生时与显示器屏幕的x.y轴坐标
event.offsetX/event.offsetY返回鼠标事件发生时与事件源x,y的坐标

8.事件委托（事件代理）

• 利用冒泡机制，只指定一个事件处理程序，就可以管理某一类的所有事件
• 把具体子节点上的事，交由给更大范围的不是动态生成的祖先节点去处理
• 使用条件：子节点多，子节点是动态生成的

  ul.addEventListener('click',function(){
    if(event.target.nodeName == 'LI'){
    event.target.classList.toggle();
    }
  })
  元素节点 nodeName ---> 标签名（必须大写）
  类名    className ---> 属性名
          id      -----> 属性名