一、给HTML元素添加事件的三种方法
1:在HTML的标签上使用onxx属性，如<input type="button" value="OK" οnclick="处理事件的函数(参数)" ，详细事件查看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.文档事件对象
方法
15.鼠标/键盘事件对象
属性
方法
| 方法 | 描述 | W3C |
|---|
| initMouseEvent() | 初始化鼠标事件对象的值 | 2 |
| initKeyboardEvent() | 初始化键盘事件对象的值 | 3 |
3330
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
