标签：style blog http color io os 使用 ar java
本篇体验JavaScript事件的基本面，包括：
■ 事件必须在页面元素加载之后起效
■ 点击事件的一个简单例子
■ 为元素注册多个点击事件
■ 获取事件参数
□ 事件必须在页面元素加载之后起效
有这样一段简单的代码：
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title><style>#box {background: blue;height: 100px;width: 100px;left: 50px;top: 50px;}</style></head><body><div id="box"></div></body>
现在，我们想给id为box的div添加事件，创建一个script.js文件。
(function() {var ele = document.getElementById("box");ele.onclick = function() {this.style.background = "red";};}());
是一个匿名函数，只要被引用，自动运行。
如果把script.js放在head区域。
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title>......<script src="script.js"></script></head>
点击页面蓝色区域会报错：Cannot set property ‘onclick‘ of null
找不到需要实施onclick事件的元素。如果我们把script.js放在body区域底部，又会怎样呢？
<body><div id="box"></div><script src="script.js"></script></body>
点击页面蓝色区域背景色变成红色。
由此可以看出：事件必须在页面元素加载完毕之后才可以实施。
以上，通过把JavaScript代码放在需要实施事件元素的下方，保证了先加载元素，再执行事件，这很好。而实际上，通过window的onload方法也可以保证所有页面元素加载完毕再执行事件。
修改script.js的代码为：
(function () {window.onload = function() {var ele = document.getElementById("box");ele.onclick = function () {this.style.background = "red";};};}());
把script.js代码放在head部分。点击页面蓝色区域背景色变成红色。
□ 点击事件的一个简单例子
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title><style>.on {background-color: white;color: black;}.off {background-color: black;color: white;}</style><script src="script.js"></script></head><body class="on"><h1>Hello World</h1><p>欢度国庆</p><button id="open">开</button><button id="close">关</button></body>
script.js的代码为：
(function () {window.onload = function() {var openBtn = document.getElementById("open");var closeBtn = document.getElementById("close");openBtn.onclick = function() {document.body.className = "on";};closeBtn.onclick = function() {document.body.className = "off";};};
一切运行正常。但，如果我们在script.js中给开按钮再注册一个事件。
(function () {window.onload = function() {var openBtn = document.getElementById("open");var closeBtn = document.getElementById("close");openBtn.onclick = function() {document.body.className = "on";};closeBtn.onclick = function() {document.body.className = "off";};openBtn.onclick = function() {alert(‘hello‘);};};}());
当点击"开"按钮后，弹出alert。由此可以看出：每次只能为元素注册一个onclick事件。
□ 为元素注册多个点击事件
使用addEventListener方法，可以为元素同时注册多个点击事件。
修改script.js代码如下：
(function () {window.onload = function() {var openBtn = document.getElementById("open");var closeBtn = document.getElementById("close");var open = function() {document.body.className = "on";};var close = function() {document.body.className = "off";};//第三个参数设置成false，表示允许事件冒泡openBtn.addEventListener("click", open, false);openBtn.addEventListener("click", function() { alert(‘hello‘); }, false);closeBtn.addEventListener("click", close, false);};}());
当然，也可以移除注册的事件。
//移除EventListner事件openBtn.removeEventListener("click", open, false);
□ 获取事件参数
在每次发生事件的时候，所有的事件参数信息都被放在了一个event变量中。修改script.js代码为：
(function () {window.onload = function() {var openBtn = document.getElementById("open");var closeBtn = document.getElementById("close");var open = function (e) {alert(e.type + " " + e.target);document.body.className = "on";};var close = function (e) {alert(e.type + " " + e.target);document.body.className = "off";};//第三个参数设置成false，表示允许事件冒泡openBtn.addEventListener("click", open, false);closeBtn.addEventListener("click", close, false);};}());
可见，函数的事件参数在大多数情况下被省略了，如果想获取事件信息，这个event参数还是很有用的。
“JavaScript进阶系列”包括：
JavaScript进阶系列05,事件的执行时机, 使用addEventListener为元素同时注册多个事件,事件参数
标签：style blog http color io os 使用 ar java
原文地址：http://www.cnblogs.com/darrenji/p/4005638.html
