window.addEventListener介绍说明
今天研究HTML5发现了它。
原型
public override function addEventListener(type:String, listener:Function, useCapture:Boolean = false, priority:int = 0, useWeakReference:Boolean = false):void
作用
侦听事件并处理相应的函数。
参数
1、type:String
事件的类型。
2、listener:Function
侦听到事件后处理事件的函数。 此函数必须接受 Event 对象作为其唯一的参数，并且不能返回任何结果，如以下示例所示： 访问修饰符 function 函数名(evt:Event):void
3、useCapture:Boolean (default = false)
这里牵扯到“事件流”的概念。侦听器在侦听时有三个阶段：捕获阶段、目标阶段和冒泡阶段。顺序 为：捕获阶段（根节点到子节点检查是否调用了监听函数）→目标阶段（目标本身）→冒泡阶段（目标本身到根节点）。此处的参数确定侦听器是运行于捕获阶段、 目标阶段还是冒泡阶段。 如果将 useCapture 设置为 true，则侦听器只在捕获阶段处理事件，而不在目标或冒泡阶段处理事件。 如果useCapture 为 false，则侦听器只在目标或冒泡阶段处理事件。 要在所有三个阶段都侦听事件，请调用两次 addEventListener，一次将 useCapture 设置为 true，第二次再将useCapture 设置为 false。
4、priority:int (default = 0)
事件侦听器的优先级。 优先级由一个带符号的 32 位整数指定。 数字越大，优先级越高。 优先级为 n 的所有侦听器会在优先级为 n -1 的侦听器之前得到处理。 如果两个或更多个侦听器共享相同的优先级，则按照它们的添加顺序进行处理。 默认优先级为 0。
5、useWeakReference:Boolean (default = false)
确定对侦听器的引用是强引用，还是弱引用。 强引用（默认值）可防止您的侦听器被当作垃圾回收。 弱引用则没有此作用。
编辑本段注意
使用EventDispatcher对象注册事件侦听器对象，以使侦听器能够接收事件通知。 可以为特定类型的事件、阶段和优先级在显示列表的所有节点上注册事件侦听器。 成功注册一个事件侦听器后，无法通过额外调用addEventListener()来更改其优先级。要更改侦听器的优先级，必须首先调用 removeListener()。 然后，可以使用新的优先级再次注册该侦听器。
编辑本段例子
添加监听事件
function Go() { //... }
document.getElementById("testButton").addEventListener("click", Go, false);
或者 listener 直接就是函数
document.getElementById("testButton").addEventListener("click", function () { ... }, false);
删除监听事件
document.getElementById("testButton").addEventListener("click", Go[1]);
附上一网友阿飞的“春天，陪你一起去赏雨——HTML5下雨效果”
这个图片命名为："background.jpg";
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>春天，陪你一起去赏雨——HTML5下雨效果</title>
<style type="text/css">
#box{
border:2px solid #f60; margin:0 auto;
}
</style>
<script>
var floor = Math.floor;//向下取整
var canvas;//画布
var context;//画布上下文
var width;//背景图片、画布宽
var height;//背景图片、画布宽
var size;//像素点个数、width*height
var nextPoint = [];//下一振幅
var prePoint = [];//上一振幅
var tempPoint = [];//临时存储
var imgData;//背景图片数据
var speed = 100;//下雨大小，默认是一秒钟一个雨滴
var weight = 1000;//雨滴的大小
/**
author:qingfeilee
date:2012-03-24
description:开始启动程序
**/
function start() {
initImage("background.jpg");
}
/**
author:qingfeilee
date:2012-03-24
description:初始化图片信息
**/
function initImage(src) {
var img = new Image();
img.src = src;
img.onload = function() {
init(img);
};
}
/**
author:qingfeilee
date:2012-03-24
description:初始化系统函数
**/
function init(img){
initSize(img);
initPoint();
initCanvas();
loadImage(img);
}
/**
author:qingfeilee
date:2012-03-24
description:绘制图片函数
**/
function loadImage(img){
context.drawImage(img, 0, 0);
imgData = context.getImageData(0, 0, width, height);
setInterval(spread, 1000/60);
setInterval(rain, speed);
}
/**
author:qingfeilee
date:2012-03-24
description:初始化画布信息
**/
function initCanvas(){
canvas = document.getElementById('ripper');
context =canvas.getContext('2d');
canvas.width = width;
canvas.height = height;
canvas.onclick = function(e) {
setDropPoint(floor(e.clientX-(document.body.clientWidth - width)/2), floor(e.clientY - (document.body.clientHeight - height) / 2), 15000);
}
}
/**
author:qingfeilee
date:2012-03-24
description:设置画布宽高及画布像素数
**/
function initSize(img){
width = img.width;
height = img.height;
document.getElementById("box").style.width = width+"px";
document.getElementById("box").style.height = height+"px";
size = width*height;
}
/**
author:qingfeilee
date:2012-03-24
description:初始化存储图像前一个和后一个点的数组
**/
function initPoint(){
for (var i = 0; i < size; i++) {
nextPoint.push(0);
prePoint.push(0);
}
}
/**
author:qingfeilee
date:2012-03-24
description:一石激起千层浪，设置波动点及注入的能量
其中x表示物体进入水面的X坐标，Y表示物体进入水面的Y坐标，power表示物体的能量大小
**/
function setDropPoint(x, y, power) {
if (x < 2 || x > width - 2 || y < 1 || y > height - 2) return;
var i = x + y * width;
nextPoint[i] += power;
nextPoint[i - 1] -= power;
}
/**
author:qingfeilee
date:2012-03-24
description:核心算法，处理像素的波动效果
PS:该算法非原创，借鉴网络上多个版本算法综合
**/
function spread() {
var img = context.getImageData(0, 0, width, height),
data = img.data;
//平均一下各个点的能量
for (var i = width + 1; i < size - width - 1; i += 2) {
for (var x = 1; x < width - 1; x++, i++) {
nextPoint[i] = (nextPoint[i] + nextPoint[i + 1] + nextPoint[i - 1] + nextPoint[i - width] + nextPoint[i + width]) / 5;
}
}
//渲染除了第一行、最后一行、第一列、最后一列外的所有点
for (var i = width + 1; i < size - width - 1; i += 2) {
for (var x = 1; x < width - 1; x++, i++) {
//水波振幅线性公式参考的是网络上的一些研究文献得出的
prePoint[i] = (nextPoint[i - 1] + nextPoint[i + 1] + nextPoint[i + width] + nextPoint[i - width])/2 - prePoint[i];
var ti = i + floor((prePoint[i - 2] - prePoint[i]) * 0.08) + floor((prePoint[i - width] - prePoint[i]) * 0.08) * width;
ti = ti < 0 ? 0 : ti > size ? size: ti;
var light = prePoint[i] * 2.0 - prePoint[i - 2] * 0.6;
light = light < -10 ? -10 : light > 100 ? 100 : light;
//之所以是i*4是因为canvas获取的data数据每四个值表示一个像素包括分别是红/绿/蓝/透明,要想了解更多关于canvas的请参看我的另一篇blog：http://blog.csdn.net/qingfeilee/article/details/7233683
data[i * 4] = imgData.data[ti * 4] + light;
data[i * 4 + 1] = imgData.data[ti * 4 + 1] + light;
data[i * 4 + 2] = imgData.data[ti * 4 + 2] + light;
//波能渐渐衰减
prePoint[i] -= prePoint[i]>>5;
}
}
tempPoint = nextPoint;
nextPoint = prePoint;
prePoint = tempPoint;
context.putImageData(img, 0, 0);
}
function rain(){
setDropPoint(floor(Math.random()*width), floor(Math.random()*height), floor(Math.random()*weight));
}
function setWeight(weight){
this.weight = weight;
}
window.addEventListener("load", start, true);
</script>
</head>
<body>
<div id="box">
<canvas id="ripper" style="width:100%;height:100%; "></canvas>
<div align="center">
<button onclick = "setWeight('1000')">小雨</button>
<button onclick = "setWeight('10000')">中雨</button>
<button onclick = "setWeight('20000')">大雨</button>
</div>
</div>
<div><h5 style = "text-align:center"><a href = 'http://blog.csdn.net/qingfeilee/'>如果无法运行，详情见我的blog</a></h5></div>
</div>
</body>
</html>
