【知识点】

1、掌握什么是事件
2、掌握HTML事件
3、掌握DOM0级事件
4、掌握常用的鼠标与键盘事件
5、掌握this的指向

一、什么是事件

事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。

二、HTML事件

【语法】：

【功能】：
在HTML元素上绑定事件。

【说明】：
执行脚本可以是一个函数的调用。

为何不建议使用HTML事件？

三、DOM0级事件

【语法】：

ele.事件=执行脚本

【功能】：
在DOM对象上绑定事件

【说明】：
执行脚本可以是一个匿名函数，也可以是一个函数的调用。

案例1：锁定-解锁切换。

锁定解锁切换.gif




    
    Document
    


    锁定

案例2：使用通过DOM获取HTML元素的方式绑定事件实现全选--反选效果

DOMHTML事件·全选-反选案例.gif




    
    全选和反选

四、鼠标事件

- 案例·onload事件




    
    Document
    
    


    这是一个DIV

- onfocus事件可用有限：

nfocus事件只用于：
1.input标签type为text、password
2.textarea标签

- 案例：onfocus和onblur事件

案例：onfocus和onblur事件.gif

- onchange事件

onchange：域的内容改变时发生
【说明】：一般用于select表单元素，或者单选按钮radio，复选框checkbox
【案例】

onchange事件案例.gif




    
    onchange事件案例
    


  
      请选择您喜欢的背景色：

onchange事件案例2：

onchange，this.value案例2.gif

- 1/ onsubmit表单中的确认按钮点击时发送

【说明】：onsubmit事件不是加在按钮上，而是表单上。

- 2/ onmousedown和onmouseup成就了onclick事件

onmousedown：鼠标按钮在元素上按下时触发
onmouseup：在元素上松开鼠标按钮时触发

五、键盘事件与keyCode属性

键盘事件案例：

键盘事件案例.gif

六、关于this指向

在事件触发的函数中，this是对该DOM对象的引用。

七、包含事件的函数调用无括号

【注意】：

Paste_Image.png

本笔记学习整理自慕课网

JS DOM事件基础