笔记 34.

C1任务-34：事件基础

任务背景

实现前端交互时，网页元素需要受到用户控制并及时反馈效果，这其中便涉及到了事件的知识。了解事件基础，并掌握如何处理事件是Web开发中的必经之路。

任务目标

掌握事件基础及绑定事件的几种方式
掌握常用鼠标事件

任务训练

一、事件基础

1.事件定义：用户与浏览器交互的方法，规定了浏览器在什么时刻执行什么事情

2.事件举例：鼠标单击，双击，键盘输入，页面或图像载入

3.事件三要素（事件源，事件，事件处理程序）

事件源：谁触发的，一般指某个元素节点
事件：怎么触发的
事件处理程序：触发后发生了什么事情

二、事件绑定

1.事件源要与事件绑定后，才能触发对应事件。下面以鼠标点击事件为例，介绍事件的三种绑定方式。

方式一：事件属性赋值

方式二：行内事件属性赋值

<buttonοnclick=“alert(‘行内事件属性赋值’)”>点击按钮

方式三：事件监听

addEventListener(type,listener,useCapture

type:事件类型

listener:监听器（处理程序）

useCapture:默认为false，设置为true时，不会因冒泡触发监听器

2.事件属性赋值与事件监听区别
事件属性多次赋值，只会执行最后一次事件处理程序；事件监听可以添加多个监听器，执行多个事件处理程序
事件属性赋值兼容IE8及以下浏览器，而事件监听最低兼容到IE9浏览器

练习

p元素中最后显示的数字是什么？

addEventListener为事件监听方法，可以调用多次事件处理程序，所以num执行了两次加1，最后结果为2