JavaScript事件（一）

事件是文档或者浏览器窗口中发生的，特定的交互瞬间

典型事例：

页面加载完毕，触发load事件

浏览器窗口放大或缩小，触发resize事件

用户单击元素，触发click事件

绑定事件方法

var btn=document.getElementById("btn");

btn.οnclick=function(){

alert("我是第一种绑定事件的方法");

}

btn. addEventListener("click",function(){

alert("我是第二种绑定事件的方法");

},false)

这种方法不会覆盖同事件,可以从上到下依次执行

注意点是点击事件不要加on

function clickFn(){

alert("我是第三种绑定事件的方法");

}

第一种及第三种都会覆盖同样式的操作

练习1：

文字放大或缩小

使用点击事件制作文字放大或缩小案例

点击“-”按钮时，所有文字缩小4像素

点击“+”按钮时，所有文字放大4像素

练习2：

在页面中制作一个8秒倒计时效果，当点击开始按钮时，开始倒计时，点击停止按钮时，在页面中弹出“倒计时over”

 表单事件

由 HTML 表单内的动作触发的事件

事件名 描述

onfocus 元素获得焦点

onblur   元素失去焦点,用于校验

onchange  用户改变域的内容,多用于列表框Select,只要被改变就会被处罚,不在乎value和option里面的内容是否一致,文件域也是靠onchange触发

注意：以下两个表单重置事件不支持input标签，支持form标签

onreset  表单重置时触发

onsubmit  表单提交时触发

练习1：

页面打开时，文本框内默认为my name is tom，当光标聚焦到文本框时，默认文本my name is tom消失，文本框后面出现“用户名不能为空”的用户名输入需求，且输入的用户名字体颜色为蓝色

键盘事件

键盘事件就是对键盘操作触发的事件

事件名 描述

onkeydown 某个键盘的键被按下

onkeypress  某个键盘的键被按下并释放一个键时发生(松开中)

oninput 在用户输入的时候触发

onkeyup  某个键盘的键被松开,使用较多 

提示：键盘事件的事件次序：onkeydown onkeypress  oninput onkeyup

UI（User Interface，用户界面）事件

指的是那些不一定与用户操作有关的事件

事件名 描述

window.onload 某个页面或图像被完成加载,当script在样式前面,就可以先把样式获取,原因是这个事件会在加载完才打开页面

window.onresize  页面窗口或框架被调整尺寸

window.onscroll  当文档上下或者左右被滚动时发生的事件

提示：如果重载页面，也会触发 unload 事件（以及 onload 事件）