原生JS十三（事件）

原生JS--事件

• 一. 单击事件
• 二. 事件类型
• 三. 键盘事件
• 四. 选项卡

一. 单击事件

onclick 鼠标的单击事件
绑定单击事件的两种方法
1.获取元素，在js中给元素绑定

代码：
显示效果：

点击按钮后的效果：

2.定义好函数，在html标签中绑定函数

代码：
点击效果同上

二. 事件类型

1.onload
当页面(html，图片之类)加载完成后，需要执行的方法，该方法用于包裹所有内联js代码
(1)解决js代码获取html标签时，标签还没有加载的情况
(2)先加载页面，再加载功能，还能提高用户体验
2.onblur/onfocus
失去焦点时触发 / 获得焦点时触发
3.onselect
选中文本时触发
4.onchange
在内容发生改变时触发
5.onreset
重置时触发
6.ondblclick
双击时触发
7.onmouseover/onmouseout
鼠标移入移出时触发
8.onmousedown/onmouseup
用户在指定元素身上按下/抬起时触发
除非情景需要按下和抬起各执行一个功能，否则不使用

三. 键盘事件

1.onkeypress 用户按下该键位，再抬起时触发
2.onkeydown 按下时触发
3.onkeyup 抬起时触发
4.keyCode 键盘编码
5.focus 谁调用，就将焦点给谁
6.cursor 鼠标样式 配合hover使用 pointer属性值，将鼠标变为小手样式

代码：

四. 选项卡

页面布局代码：
js代码：
如果不利用元素的空属性来保存变量，那么点击btn时，获取到的s的数值永远为for循环的最后一个，因为在点击事件触发之前，for循环就已经执行完了
显示效果：

分别点击1234时：