事件基础

常见事件：鼠标事件、键盘事件、表单事件、编辑事件、页面事件

在script中调用调用

obj.onclick = function() {
// obj是一个DOM对象，onclick就是一个事件属性，事件属性有多个，function为事件响应后的方法，进行的操作。
}

在HTML行内元素中调用

<input type="button" onclick="aleat('弹出对话框')" value="弹出">
//或
<input type="button" onclick="aleatMes()" value="弹出">
​
<script>
  function aleatMes() {
      aleat("弹出对话框")；
  }
//该函数已经在html行内事件中调用
//两者实现效果相同
</script>

1. 鼠标事件

事件	说明
onclick	鼠标单击
onmouseover	鼠标移入
onmouseout	鼠标移出
onmousedown	鼠标按下
onmouseup	鼠标松开
onmousemove	鼠标移动

onmousedown、onmousedown、onmousemove三个配合可以完成鼠标拖拽、抛掷等效果

2. 键盘事件

事件	说明
onkeydown	键盘按下
onkeyup	键盘松开

3. 表单事件

事件	说明
onfocus	获得焦点时触发
onblur	失去焦点时触发
onselect	常用与选中文本框(少用)
onchange	常用于具有多个选项的表单元素
onsubmit	常结合后端使用

【补充】

focus( ) 方法和select( ) 方法，不属于表单事件。

obj.focus()  可以自动获取焦点

obj.select()  ，仅用于全选文本，可以用来设置单击搜索框自动全部选中搜索框的全部文字等

4. 编辑事件

事件	说明
oncopy	可以使用obj.oncopy并return false, 防止页面内容被复制
onselectstart	可以使用document.body.onselectstart并return false，防止页面内容被选取
oncontextmenu	可以使用document.oncontextmenu并return false,禁用鼠标右键

5 页面事件

事件	说明
onload	文档加载完成后再执行的一个事件
onbeforeunload	离开页面之前触发的一个事件

事件进阶

1. 事件监听器

1.1 绑定事件

事件监听器就是指使用addEventListener( )方法为一个元素添加事件，又称绑定事件。

obj.addEventListener(type, fn, false);
//obj是DOM对象
//type是一个字符串，指的是事件类型，如鼠标单击、移动等这些，不过前面不用加on
//fn是一个函数名或匿名函数
//false表示事件冒泡阶段调用

【使用事件监听器可以为同一个元素添加多个相同事件，普通事件处理程序无法完成】

1.2 解绑事件

obj.removeEventListener(type, fn, false)
//对于removeEventListener()方法,fn必须是一个函数名而不能是函数

2. event事件对象

常用属性

type：获取事件类型

btn.onclick = function(e) {
    aleat(e.type)
}
//e: 一个变量，每调用一次事件时，JavaScript都会默认给这个事件函数加上一个隐藏的参数（event对象），一般来说event对象是作为事件函数的第一个参数传入的

keyCode：获取键盘按键的对应键码，如果是【shift】【Alt】【Ctrl】键，用shiftKey、altKey、ctrlkey属性获取。e.keyCode返回的是一个数字，其他三个返回的是布尔值

【常用的按键及对应键码】

按键	键码
W	87
S	83
A	65
D	68
上	38
下	40
左	37
右	39

3. 事件操作this说明

哪个DOM对象（元素节点）调用了this所在的函数，那么this指向的就是哪个DOM对象。

事件函数中尽量使用this代替oBtn、oLi等写法。