事件与事件委派

事件与事件委派

今日目标

1.事件的概念【了解】
2.事件的三种注册方式【掌握】
3.常用事件【掌握】
4.事件机制【了解】
5.事件委派【掌握】
6.事件处理函数【了解】
7.应用实战【掌握】

1.事件的概念

1.1 什么是事件？【了解】

事件是计算机与用户交互的行为

1.2 事件的四要素【掌握】

事件源：事件发生的源头

事件类型：发生了什么事件

事件处理函数：触发事件时执行的函数

事件对象：记录了事件的相关详细信息

2.事件的三种注册方式【掌握】

// 1.行内标签注册事件
<div onclick="函数名()"></div>
// 2.DOM节点注册事件
node.onclick = function(){}
// 3.W3C标准注册事件
node.addEventListener('事件类型',事件处理函数,是否捕获)

3.常用事件【掌握】

3.1鼠标事件

事件名	含义
click	鼠标左键点击
mouseover	鼠标指针移入元素
mouseout	鼠标指针移出元素

3.2键盘事件

事件名	含义
keydown	键盘按钮按下

3.3表单事件

事件名	含义
submit	表单提交
input	表单输入
blur	表单失去焦点
change	表单内容发生改变

3.4窗口事件

事件名	含义
load	网页文档资源加载完毕
scroll	滚动条滚动

4.事件机制【了解】

事件机制分为冒泡机制和捕获机制
冒泡机制：从底层元素依次执行到顶层元素，这样的事件执行顺序称之为冒泡机制
捕获机制：从顶层元素依次执行到底层元素，纸样的事件执行顺序称之为捕获机制

5.事件执行函数返回值【了解】

阻止浏览器默认行为

6.事件委派【掌握】

1.当页面加载时去绑定事件，事件不能绑定到用户交互产生的新元素节点上。
2.因此将事件绑定在页面加载时就存在的公共祖先元素身上，通过事件冒泡，子元素触发事件，父元素也触发。
3.然后通过事件对象反查事件源。