您的位置：首页 > Web前端 > JavaScript
[转]javascript 自定义事件

2012-09-21 15:22 369 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<script type="text/javascript">
function Test() {
function TypeA() {
EventManager.call(this);  //注册事件模型

this.a = 0;

this.setA = function (x) {
this.dispatchEvent("change", { oldValue: this.a, newValue: x });
this.a = x;
}
}
var a = new TypeA();

a.onchange = function (evt)   //基本的事件注册方式
{
alert("oldValue:" + evt.oldValue);
alert("newValue:" + evt.newValue);
}

a.setA(100);
}

function Test2() {
function TypeA() {
EventManager.call(this);  //注册事件模型

this.a = 0;

this.setA = function (x) {
this.dispatchEvent("change", { oldValue: this.a, newValue: x });
this.a = x;
}
}
var a = new TypeA();

a.addEventListener("change", function (evt)   //高级的事件注册方式
{
alert("oldValue:" + evt.oldValue);
alert("newValue:" + evt.newValue);
});
a.addEventListener("change", function (evt)   //高级的事件注册方式
{
alert("done");
});

a.setA(200);
}

function Test3() {
function TypeA() {
EventManager.call(this);  //注册事件模型

this.a = 0;

this.setA = function (x) {
this.dispatchEvent("change", { oldValue: this.a, newValue: x });
this.a = x;
}
}
function TypeB() {
EventManager.call(this);  //注册事件模型
}
var a = new TypeA();
var b = new TypeB();

b.captureEvents(a, "change", null, function (evt) {
alert("a.a has changed from " + evt.oldValue + " to " + evt.newValue);
});

a.setA(200);
}

function Test4() {
function TypeA() {
EventManager.call(this);  //注册事件模型

this.a = 0;

this.setA = function (x) {
this.dispatchEvent("change", { oldValue: this.a, newValue: x });
this.a = x;
}
}
function TypeB() {
EventManager.call(this);  //注册事件模型
}
var a = new TypeA();
var b = new TypeB();

a.onchange = function (evt) {
evt.stopPropagation();              //阻止事件被捕获
alert("event capturing stopped!");
}

b.captureEvents(a, "change", null, function (evt) {
alert("a.a has changed from " + evt.oldValue + " to " + evt.newValue);
});

a.setA(200);
}

function Test5() {
function TypeA() {
EventManager.call(this);  //注册事件模型

this.a = 0;

this.setA = function (x) {
this.dispatchEvent("change", { oldValue: this.a, newValue: x,
defaultOp: function () {
alert("default information");   //定义默认动作
}
});
this.a = x;
}
}
function TypeB() {
EventManager.call(this);  //注册事件模型
}
var a1 = new TypeA();
var a2 = new TypeA();
var b = new TypeB();

a1.onchange = function (evt) {
alert("a1.a has changed from " + evt.oldValue + " to " + evt.newValue);
}

a2.onchange = function (evt) {
alert("a2.a has changed from " + evt.oldValue + " to " + evt.newValue);
evt.preventDefault();  //阻止默认动作发生
}

a1.setA(100);
a2.setA(200);
}
</script>
<script type="text/javascript">
//原型：EventManager是一个重要的原型，它用来赋予对象自定义事件的能力
//当对象类型的原型继承EventManager时，对象具有定义、分派和捕捉事件的能力
//EventManager有四个重要的方法dispatchEvent、captureEvent、addEventListener和removeEventListener
function EventManager() {
this.dispatchEvent = function (eventType, eventArgs) {
eventArgs = eventArgs || {};
var events = this["on" + eventType];
var called = 0;

if (events && typeof (events) == "function")
events = [events];

if (!eventArgs.type) eventArgs.type = eventType;
//阻止默认动作的执行
eventArgs.preventDefault = function () {
eventArgs.defaultOp = null;
}
//阻止事件起泡
eventArgs.stopPropagation = function () {
eventArgs.cancelBubble = true;
}
var $pointer = this;
if (events) {
for (var i = 0; i < events.length; i++) {

setTimeout(
(function (i) {
var evt = events[i];
var len = events.length;
var capturer = events.capturer;
var capturerName = events.capturerName;
return function () {
called++;

var ret = evt.call($pointer, eventArgs);
//如果有捕获事件的方法，并且没有阻止事件气泡，在最后一个事件处理程序结束之后调用它
if (!eventArgs.cancelBubble && called == len && capturer && capturerName && capturer[capturerName]) {
setTimeout(function () {
capturer[capturerName](eventArgs)
}, 1)
}
//如果定义了默认动作，在最后一个事件处理程序结束之后执行它
if (called == len && eventArgs.defaultOp) {
eventArgs.defaultOp.call($pointer, eventArgs);
}
return ret;
}
})(i), 1
);
}
}
else if (eventArgs.defaultOp) {
eventArgs.defaultOp.call($pointer, eventArgs);
}
}
this.fireEvent = this.dispatchEvent;
this.captureEvents = function (target, eventType, capturerName, closure) {
if (capturerName instanceof Function) {
closure = capturerName;
capturerName = null;
}
capturerName = capturerName || "on" + eventType;
target["on" + eventType] = target["on" + eventType] || [function () { } ];
var events = target["on" + eventType];
if (typeof (events) == "function") {
target["on" + eventType] = [events];
}

target["on" + eventType].capturer = this;
target["on" + eventType].capturerName = capturerName;

if (closure)
this[capturerName] = closure;
}

this.addEventListener = function (eventType, closure) {
if (this["on" + eventType] == null) {
this["on" + eventType] = [];
}
var events = this["on" + eventType];
if (events && typeof (events) == "function") {
this["on" + eventType] = [events];
events = this["on" + eventType];
}
events.push(closure);
return closure;
}

this.removeEventListener = function (eventType, closure) {
var events = this["on" + eventType];
if (events && typeof (events) == "function")
events = [events];

for (var i = 0; i < events.length; i++) {
if (events[i] == closure)
events.splice(i, 1);
}
return closure;
}
}
</script>
</head>
<body>
<button onclick="Test()">
基本事件注册演示</button>
<button onclick="Test2()">
高级事件注册演示</button>
<button onclick="Test3()">
事件的捕获演示-基础</button>
<button onclick="Test4()">
事件的捕获演示-强制阻止捕获</button>
<button onclick="Test5()">
事件的默认行为和阻止默认操作</button>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航