一、给HTML元素添加事件的三种方法
1:在HTML的标签上使用onxx属性，如<input type="button" value="OK" onclick="处理事件的函数(参数)" ，详细事件查看DOM的事件文档
2:不用在HTML中编写代码，只需要在js的代码中,使用 "元素.onxx=响应函数" 进行事件监听
3:使用方法来完成对元素的监听:
(1)IE9以下
[Object].attachEvent("name_of_event_handler", fnHandler);
name_of_event_handler>>事件操作前,必须加"on"!!!
多次添加监听后,触发顺序: 先添加,后执行
[Object].detachEvent("name_of_event_handler", fnHandler);
fnHandler : 移除时,传入的"事件响应函数",必须和添加时,传入的是同一个(通过相同标识符引用的那一个函数)
匿名函数,每次创建的都不同
(2)W3C标准浏览器
[Object].addEventListener("name_of_event", fnHandler);
name_of_event>>直接使用事件(操作)名称,没有on
多次添加监听后,触发顺序: 先添加,先执行.IE9开始也支持这种方式
[Object].removeEventListener("name_of_event", fnHandler);
fnHandler : 移除时,传入的"事件响应函数",必须和添加时,传入的是同一个(通过相同标识符引用的那一个函数)
匿名函数,每次创建的都不同
二、3种方法实例
1.HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My title</title>
<script type="text/javascript" src="event.js"></script>
</head>
<body>
<span>添加事件方式1：</span>
<br>
<button onclick="clickMe(this)">点击按钮1</button>
<br>
<br>
<span>添加事件方式2：</span>
<br>
<button id="btn2">点击按钮2</button>
<br>
<br>
<span>添加事件方式3：</span>
<br>
<button id="btn3">点击按钮3</button>
<br>
<hr />
<span id="test">显示内容</span>
</body>
</html>
2.js代码
//1.方式1
function clickMe(obj){
console.log(obj);
console.log(arguments);
document.getElementById("test").innerText="增加事件方法1";
}
//2.方式2/3,要在html页面加载完后，执行
window.onload=function(){
//匿名函数
document.getElementById("btn2").onclick= function(e){
console.log(e);
console.log(arguments);
document.getElementById("test").innerText="增加事件方法2";
}
//3.方式3,分为两种IE 9以下版（不讨论）和W3C标准浏览器
//先获得btn3标签对象
var btn=document.getElementById("btn3");
console.log(btn);
//addEventListener的2个参数:第1个是事件的类型，第2个事件处理函数
btn.addEventListener("click",function(){
console.log(this);
console.log(arguments);
document.getElementById("test").innerText="增加事件方法3";
});
}
三、键盘打字游戏
1.图示
2.HTML代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="typinggame.js"></script>
<style type="text/css">
.code {
font-weight: bold;
width: 20px;
position: absolute;
background-color: orange;
text-align: center;
}
</style>
</head>
<body>
<div align="center">
<input id="start" type="button" value="开始" /> <input id="close" type="button" value="结束" />得分:
<span id="score">0</span>
<hr />
<div id="div" style="background-color: pink; width: 500px; height: 400px;"></div>
</div>
</body>
</html>
3.js代码
//---------打字-----------------------------
window.onload = function() {
// 定义数组
var codeArr = [];
// 定义二个定时器
var time1;
var time2;
// 获得div标签，游戏主窗体
var div = document.getElementById("div");
var btnStart = document.getElementById("start");
var btnClose = document.getElementById("close");
console.log(btnStart);
btnStart.onclick = function() {
startGame();
btnStart.disabled=true;
btnClose.disabled=false;
};
btnClose.onclick = function() {
closeGame();
btnStart.disabled=false;
btnClose.disabled=true;
};
// 传递一个事件源e,键盘输入字母，并消除对的字母，再计分
document.body.onkeydown = function (e) {
//获取键盘输入值
var char = String.fromCharCode(e.keyCode);
//消除相应的字母span元素
for (i = 0; i < codeArr.length; i++) {
if (char == codeArr[i].innerHTML) {
//在页面和数组中都要删除
codeArr[i].parentNode.removeChild(codeArr[i]);
codeArr.splice(i, 1);
//计分
var scoreEl = document.getElementById("score");
scoreEl.innerHTML = parseInt(scoreEl.innerHTML) + 10;
//每次消除一个，就返回
return;
}
}
};
function startGame() {
// 定时器1，每500毫秒就执行以下匿名函数中的内容[随机产生一个字母]
time1 = setInterval(function(){createObj()}, 1000);
// 定时器2，每500毫秒就执行以下匿名函数中的内容[字母由上往下移动]
time2 = setInterval(function(){moveObj()}, 500);
}
function closeGame() {
// clearInterval(id);//注意传入的是定时器的id
window.clearInterval(time1);
window.clearInterval(time2);
document.getElementById("div").innerHTML="";
}
function createObj() {
// 创建一个还有字母的<span>标签元素
var spanEl = createCode();
// 将span元素加到游戏主窗体div中
div.appendChild(spanEl);
// 将span元素添加数组
codeArr.push(spanEl);
}
function moveObj(){
// 定时器2，每500毫秒就执行以下匿名函数中的内容[字母由上往下移动]
for (i = 0; i < codeArr.length; i++) {
var spanEl = codeArr[i];
//获取div窗体的高度
var height = div.clientHeight;
//取得span的top位置
var old =parseInt(spanEl.style.top);
//数组当前的span元素如果到底就删除(页面+数组)，否则向下移动20px
if (old < height - 20) {
//改变span元素的top位置
spanEl.style.top = parseInt(spanEl.style.top) + 20 +"px";
} else {
//到底部后删除页面上的span元素
spanEl.parentNode.removeChild(spanEl);
//同时在数组中删除相应的splice(x,y)从x位置开始删除y个
codeArr.splice(i, 1);
}
}
}
function createCode() {
// document.documentElement 返回文档的根节点
var bodywidth=document.documentElement.clientWidth;
console.log(bodywidth);
//求DIV左边的位置
var divwidth=div.clientWidth;
// 随机出现的位置
var width = parseInt((bodywidth-divwidth)/2+Math.random()*(divwidth - 20));
//创建span标签
var spanEl = document.createElement("span");
spanEl.className = "code";
spanEl.style.left = width + "px";
spanEl.style.top = "50px";
//随机生成字母
spanEl.innerHTML = String.fromCharCode(65 + parseInt(Math.random() * 26));
return spanEl;
}
};
三、DOM的事件对象
HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序。事件通常与函数结合使用，当事件发生后函数会被执行。
1.鼠标事件
2.键盘事件
3.框架/对象（Frame/Object）事件
表单事件
4.剪贴板事件
5.打印事件
6.拖动事件
7.多媒体（Media）事件
8.动画事件
9.过渡事件
10.其他事件
| 事件 |
描述 |
DOM |
| onmessage |
该事件通过或者从对象(WebSocket, Web Worker, Event Source 或者子 frame 或父窗口)接收到消息时触发 |
|
| onmousewheel |
已废弃。 使用onwheel 事件替代 |
|
| ononline |
该事件在浏览器开始在线工作时触发。 |
|
| onoffline |
该事件在浏览器开始离线工作时触发。 |
|
| onpopstate |
该事件在窗口的浏览历史（history 对象）发生改变时触发。 |
|
| onshow |
该事件当 <menu> 元素在上下文菜单显示时触发 |
|
| onstorage |
该事件在 Web Storage(HTML 5 Web 存储)更新时触发 |
|
| ontoggle |
该事件在用户打开或关闭 <details> 元素时触发 |
|
| onwheel |
该事件在鼠标滚轮在元素上下滚动时触发 |
|
11.事件对象常量和属性
11.1常量
| 静态变量 |
描述 |
DOM |
| CAPTURING-PHASE |
当前事件阶段为捕获阶段(3) |
1 |
| AT-TARGET |
当前事件是目标阶段,在评估目标事件(1) |
2 |
| BUBBLING-PHASE |
当前的事件为冒泡阶段 (2) |
3 |
11.2属性
11.3方法
| 方法 |
描述 |
DOM |
| initEvent() |
初始化新创建的 Event 对象的属性。 |
2 |
| preventDefault() |
通知浏览器不要执行与事件关联的默认动作。 |
2 |
| stopPropagation() |
不再派发事件。 |
2 |
12.目标事件对象
方法
| 方法 |
描述 |
DOM |
| addEventListener() |
允许在目标事件中注册监听事件(IE8= attachEvent()) |
2 |
| dispatchEvent() |
允许发送事件到监听器上 (IE8 =fireEvent()) |
2 |
| removeEventListener() |
运行一次注册在事件目标上的监听事件(IE8 =detachEvent()) |
2 |
13.事件监听对象
方法
| 方法 |
描述 |
DOM |
| handleEvent() |
把任意对象注册为事件处理程序 |
2 |
14.文档事件对象
方法
| 方法 |
描述 |
DOM |
| createEvent() |
|
2 |
15.鼠标/键盘事件对象
属性
| 属性 |
描述 |
DOM |
| altKey |
返回当事件被触发时，"ALT" 是否被按下。 |
2 |
| button |
返回当事件被触发时，哪个鼠标按钮被点击。 |
2 |
| clientX |
返回当事件被触发时，鼠标指针的水平坐标。 |
2 |
| clientY |
返回当事件被触发时，鼠标指针的垂直坐标。 |
2 |
| ctrlKey |
返回当事件被触发时，"CTRL" 键是否被按下。 |
2 |
| Location |
返回按键在设备上的位置 |
3 |
| charCode |
返回onkeypress事件触发键值的字母代码。 |
2 |
| key |
在按下按键时返回按键的标识符。 |
3 |
| keyCode |
返回onkeypress事件触发的键的值的字符代码，或者 onkeydown 或 onkeyup 事件的键的代码。 |
2 |
| which |
返回onkeypress事件触发的键的值的字符代码，或者 onkeydown 或 onkeyup 事件的键的代码。 |
2 |
| metaKey |
返回当事件被触发时，"meta" 键是否被按下。 |
2 |
| relatedTarget |
返回与事件的目标节点相关的节点。 |
2 |
| screenX |
返回当某个事件被触发时，鼠标指针的水平坐标。 |
2 |
| screenY |
返回当某个事件被触发时，鼠标指针的垂直坐标。 |
2 |
| shiftKey |
返回当事件被触发时，"SHIFT" 键是否被按下。 |
2 |
方法
| 方法 |
描述 |
W3C |
| initMouseEvent() |
初始化鼠标事件对象的值 |
2 |
| initKeyboardEvent() |
初始化键盘事件对象的值 |
3 |