目录
一、Javascript中event对象
参考资料：JS Event对象详解
Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态，常用事件如下：
| 事件 |
触发时机
扫描二维码关注公众号，回复：
10856519 查看本文章
|
| onchange |
用户改变域的内容 |
| onclick |
鼠标点击某个对象 |
| onfocus、onblur |
元素获得焦点、失去焦点时触发 |
| onkeydown、onkeyup |
某个键盘的键被按下、被松开时触发 |
| onload、 onunload |
某个页面或图像被完成“加载”、用户退出页面 |
| onmousedown、onmouseup |
某个鼠标按键被按下、被松开时触发 |
| onmousemove |
鼠标被移动 |
| onmouseout |
鼠标从某元素移开 |
| onmouseover |
鼠标被移到某元素之上 |
| onselect |
文本被选定 |
| onsubmit（参见代码4）、onreset |
提交按钮、重置按钮被点击 只应用于form标签 |
二、Javascript中添加事件的三种方式
（1）通过在标签中为对应事件添加设定值来添加事件
代码示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript中添加事件</title>
</head>
<body>
<input type="button" class="botton" value="添加事件" οnclick="a()"/><!--通过标签中直接设置事件类型及事件-->
<script>
function a(){
console.log("已点击");
}
</script>
</body>
</html>
运行结果：
点击“添加事件”按钮，观察操作台输出：
（2）通过元素（Element）事件属性添加事件
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript中添加事件</title>
</head>
<body>
<input type="button" class="botton" value="添加事件"/>
<script>
document.getElementsByClassName("botton")[0].οnclick=function(){//document对象代表当前该HTML文档
//getElementsByClassName()方法能通过class名来筛选出所有满足条件的html元素，返回结果为一个数组。
console.log("点击了。。。。。");
}
</script>
</body>
</html>运行结果：
点击“添加事件按钮”，操作台显示：
（3）通过元素（Element）事件监听器添加事件
代码示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript中添加事件</title>
</head>
<body>
<input type="button" class="botton" value="添加事件"/>
<script>
document.getElementsByClassName("botton")[0].addEventListener("click",function(){//通过个体ElementsById()方法获得的element对象中的addEventListener()方法用于添加事件监听器，第一个参数设置事件类型，第二个参数可用来设置具体事件
console.log("点击");
})
</script>
</body>
</html>
运行结果：
同样点击“添加事件”按钮，操作台上输出结果：
