1.事件简介
2.事件的调用方式
        在script标签中使用
        在元素中调用
3.鼠标事件
        鼠标点击
        鼠标移入移除
        鼠标按住松开
4.键盘事件
5.表单事件
        onfocus和onblur
        onselect
        onchange
6.编辑事件
        oncopy
        onselectstart
        oncontextmenu
7.页面事件
        onload
        onbeforeunload
8.事件监听器
9.event对象

在这里插入图片描述

1.事件简介

在这里插入图片描述举个例子，当我们点击一个按钮时，会弹出一个对话框。其中“点击”就是一个事件，“弹出对话框”就是我们在点击这个事件里面做的一些事情。事件一般是用户对页面的一些‘小动作’引起的，如点击鼠标移动鼠标，js里边常见的事件一般有五种：

鼠标事件
键盘事件
表单事件
编辑事件
页面事件

2.事件的调用方式

2.1在script标签里边调用

obj.事件名 = function()
{
    ……
};

obj是一个DOM对象

2.2在元素中调用事件

例子：
在这里插入图片描述

3.鼠标事件

3.1鼠标事件简介

在这里插入图片描述

3.2鼠标点击

例子：结合div模拟按钮
在这里插入图片描述

3.3鼠标移入移除

例子：
在这里插入图片描述

3.4鼠标的按下和松开

在这里插入图片描述

4.键盘事件

键盘按下：onkeydown
键盘松开：onkeyup

例子1：统计输入字符长度(用两张事件都行只是一个是按下统计一个松开后统计)
在这里插入图片描述

5.表单事件

5.1onfocus和onblur

onfocus：表示获取焦点触发的事件
onblur：表示失去焦点触发的事件

例子1：
在这里插入图片描述
默认的情况需要我们点击文本框才能自动获取焦点，那么我们也可以让他们自动获取焦点，用==focus()==方法就行

例子2：自动获取焦点

在这里插入图片描述

5.2onselect

当我们选中单行或者多行文本框的时候，就会触发此类事件

例子：手动选中文本框触发事件
在这里插入图片描述
其实我们可以自动选中文本框，可以用select() 方法，看下面例子

在这里插入图片描述

5.3onchange

用于具有多个选项的表单元素的操作

例子1：单选框选择某一项的时候触发

在这里插入图片描述

例子2：复选框的全选和反选

在这里插入图片描述
例子3：下拉列表:

6.编辑事件

6.1oncopy

oncopy表示不能复制

例子：文字不能进行复制
在这里插入图片描述

6.2onselectstart

onselectstart防止页面内容被选取

例子：文字内容不可被选中
在这里插入图片描述

6.3oncontextmenu

oncontextmenu禁止使用鼠标右键

例子：可以选中但是不能使用鼠标右键进行复制气不气
在这里插入图片描述

7.页面事件

7.1onload

onload表示文档加载完成后再执行一个事件

我们看下面一段代码：
在这里插入图片描述

我们这一段代码点击提交的时候浏览器是会报错的，这是由于在默认的情况下，浏览器是从上到下来解析一个页面的，当解析到var oBtn = document.getElementById("btn");的时候就会报错因为找不到id为btn的元素在哪，那么正确的使用方法是:

在这里插入图片描述当浏览器解析到window.onload时就不会解析window.onload内部的代码而是继续往下解析，直到把整个文档解析完毕后在回去解析window.onload内部的代码

7.2onbeforeunload

onbeforeunload表示离开页面之前触发的一个事件

我们看一个例子：
在这里插入图片描述
这是刚开始运行的时候。当我们关闭页面时会出现如下(具体的e是啥会在event对象里边讲)：

在这里插入图片描述

8.事件监听器

我们直接看一个例子(下面是我第一次点击按钮出现的画面)：

在这里插入图片描述
我们在给一个按钮添加三次onlick事件，但是js只会执行第三次，所以 事件处理器 是不能为同一元素添加多个事件的，那么这时候就需要我们的事件监听器

所谓的事件监听器指的是使用addEventListener()方法为元素添加一个事件，我们又称为绑定事件

语法：

obj.addEventListener(type,fn,false)
1.obj是一个DOM对象
2.type是一个字符串指的是事件类型如单击事件click等，注意这里的事件类型是不需要加上on作为前缀的
3.fn是一个函数名(匿名函数或者函数名)
4.false表示事件冒泡阶段调用(高级内容不详细说明)

例子1：addEventListener()方法的使用
在这里插入图片描述
例子2：对同一元素添加多个事件