JS-事件

JS-事件

基础

什么是事件:

控件可以识别的行为l，例如:点击、双击、鼠标移动

事件分类

窗体事件	鼠标事件	键盘事件	表单事件
窗体加载	点击事件	键盘按下	获得焦点
窗体卸载	双击事件	键盘释放	失去焦点
窗体获得焦点	鼠标进入	等等	文本发生变化事件
窗体失去焦点	鼠标离开		提交时间
等等	鼠标按下		重置事件
	鼠标松开		等等
	鼠标移动
	等等

DOM事件流

HTML元素产生事件时，事件会在当前节点与根节点之间的路径传播，路径上节点的事件都会被触发，节点之间存在包含关系。

DOM事件流分类:

1. 冒泡事件流

   事件从最精确的到最不精确的

2. 捕获事件流

   事件从最不精确的到最精确的

IE只支持冒泡 ，火狐、谷歌、Safari两种事件流都支持。但是一般都使用冒泡事件流。

事件处理程序

网页元素发生事件时，需要处理的程序称为事件处理程序，俗称为元素绑定事件，

所有的事件都是绑定在网页元素上的

事件绑定方式

1. 直接绑定在HTML上

   通过事件属性( on事件名称) 进行绑定（不太推荐的）

   有时我们会书写一个函数(事件处理程序)，然后通过事件属性来给元素绑定函数

2. 传统方式绑定方法

   缺点： 不方便为一个事件添加多个事件处理程序。

3. 现代事件绑定方式

   有兼容性问题 (推荐采用 有名字的函数（*）)

   ie ： 添加事件处理程序 元素节点.attachEvent（type，listener） 注销事件处理程序 元素节点.detachEvent(type，listener)

   非ie: 添加事件处理程序 : 元素节点.addEventListener(event, function, useCapture) 注销事件处理程序 : 元素节点.removeEventListener(event, function, useCapture)

其他

//获取当前点击对象的属性
let divList = document.querySelectorAll("div");
for (let divObj of divList) {
    divObj.onclick = function () {
        console.log(this.innerHTML);
        //this指代当前对象
        //HTML文档中有多个div对象获取时，谁触发onclick事件(谁被点击).this指代谁
        //需要注意在这里不能使用箭头函数，使用箭头函数 this指代window窗体对象
    }
}