事 件
一、 事件介绍
1、简介
事件(Event)是 JavaScript 应用跳动的心脏 ，进行交互，使网页动起来。也是把所有东西粘在一起的胶水。当我们与浏览器中 Web 页面进行某些类型的交互时，事件就发生了。事件可能是用户在某些内容上的点击、鼠标经过某个特定元素或按下键盘上的某些按键。事件还可能是 Web 浏览器中发生的事情，比如说某个 Web 页面加载完成，或者是用户滚动窗口或改变窗口大小。
通过使用 JavaScript ，你可以监听特定事件的发生，并规定让某些事件发生以对这些事件做出响应。
2、作用
|
（1）验证用户输入的数据。 （2）增加页面的动感效果。 |
3、事件名称与事件处理程序(事件侦听器)
事件源: 谁触发的事件
事件名: 触发了什么事件
事件监听: 谁管这个事情，谁监视？
事件处理:发生了怎么办
|
如闯红灯 事件源-->车 事件名: 闯红灯 监听：摄像头、交警 处理:扣分罚款 如点击按钮 事件源-->按钮 事件名: 点击 监听:窗口负责 处理:执行函数 |
如我们用户在页面中进行的点击这个动作，鼠标移动的动作，网页页面加载完成的动作等，都可以称之为事件名称，即：click、mousemove、load 等都是事件名称， 具体的执行代码处理，响应某个事件的函数。
|
<body onload="loadWindow();"></body> <script> function loadWindow(){ alert("加载窗体"); } </script> |
二、 发展
1、行内事件
行内事件: 耦合度高
如:
|
<script type="text/javascript"> function test(){ alert('点击点击'); } </script> <input type="button" name="btn1" id="btn1" value="点我1" onclick = "alert('点击一次')"/> <input type="button" name="btn1" id="btn2" value="点我2" onclick = "test();"/> |
2、DOM0 级事件处理
DOM 0 级事件处理:解耦
|
<input type="button" name="btn1" id="btn1" value="点我"/> //dom 事件级处理 var btn1 = document.getElementById('btn1'); //添加处理函数给相应事件 btn1.onclick = function(){ alert('点击了一次'); } btn1.onclick = function(){ alert('还行不行'); } |
3、DOM2 级事件处理
DOM 2 级事件处理: 为同一个元素/标签绑定多个同类型事件
（1）addEventListener()和removeEventListener()
用于添加和删除事件处理程序。适用于：ie9、Firefox、chrome等。
参数：要处理的事件名，作为事件处理程序的函数。
注意：
使用removeEventListener()无法删除添加的匿名函数事件。
|
<input type="button" name="btn1" id="btn1" value="点我"/> <script type="text/javascript"> var obj = document.getElementById('btn1'); //为obj对象添加事件 obj.addEventListener('click',test); obj.addEventListener('click',function(){ alert('我是匿名的'); }); function test(){ alert('点点'); } //移除事件 obj.removeEventListener('click',test); </script> |
三、 事件类型
JavaScript可以处理的事件类型为：鼠标事件、键盘事件、HTML事件。
1、几个常用事件
onclick 、onblur 、onfocus 、onload 、onchange、onmouseover、onmouseout、onkeyup、onkeydown
onload：当页面或图像加载完后立即触发
onblur：元素失去焦点
onfocus：元素获得焦点
onclick：鼠标点击某个对象
onchange：用户改变域的内容
onmouseover：鼠标移动到某个元素上
onmouseout：鼠标从某个元素上离开
onkeyup：某个键盘的键被松开
onkeydown：某个键盘的键被按下
onload、onchange事件
|
<script type="text/javascript"> function init(){ var obj = document.getElementById('sel'); obj.onchange = function(){ console.log(this); console.log(this.value); } } </script> <body onload="init();"> <select name="sel" id="sel"> <option value="下拉1">下拉1</option> <option value="下拉2">下拉2</option> <option value="下拉3">下拉3</option> </select> </body> |
onfocus、onblur事件
|
<script type="text/javascript"> // 当输入框获得焦点后，改变一下颜色 function init() { //获取对象 var obj = document.getElementById('content'); //当对象获取焦点 obj.onfocus = function(){ obj.style.backgroundColor = "paleturquoise"; } //当对象失去焦点 obj.onblur = function(){ if(0==this.value.length){ var msg = '<span style="color:red">*对不起，你需要输入些什么内容才能离开</span>'; document.getElementById('msg').innerHTML = msg; //重新获取焦点，输入框中会有光标 obj.focus(); return; } var msg = document.getElementById('msg') ; msg.innerHTML = ""; obj.style.backgroundColor = ""; } } </script> <body onload="init();"> <div>请输入内容</div> <input type="text" name="contet" id="content" value="" /> <span id="msg" > </span> </body> |
onmouseover、onmouseout事件
|
<style type="text/css"> #block { 150px; height: 150px; background-color: red; border: solid 2px yellow; } </style> <script type="text/javascript"> function colorDis() { //拿到元素 var obj = document.getElementById('block'); //background-color:backgroundColor //font-size:fontSize obj.style.backgroundColor = 'white'; obj.style.fontSize = "30px"; } function colorShow() { var obj = document.getElementById('block'); obj.style.backgroundColor = 'blue'; obj.style.fontSize = "10px"; } </script> <body> <div id="block" onmouseover="colorDis();" onmouseout="colorShow();"> </div> </body> |
onkeyup、onkeydown事件
|
var txt = document.getElementById("txt"); txt.onkeyup = function (event) { alert(txt.value); } txt.onkeydown = function () { alert(txt.value); } |