javascript多投事件的处理 (转)

出处 http://blog.csdn.net/dead_of_winter/article/details/1646367

尽管ecma标准指定了addEventListener这样的方法来实现事件多投机制,但是ie ns等浏览器却各行其道,这里利用语言本身的特性来实现事件多投,只要支持简单事件模型,就可以使用。同时FunctionArray也是一个独特的结 构,javascript有趣的特性的体现。

<img id=img1 style="height:100;width:100;"></img>
<br><button onclick="img1.onclick.AddFunction(f1)">添加f1</button><button onclick="img1.onclick.AddFunction(f2)">添加f2</button><button onclick="img1.onclick.AddFunction(f3)">添加f3</button>
<br><button onclick="img1.onclick.RemoveFunction(f1)">移除f1</button><button onclick="img1.onclick.RemoveFunction(f2)">移除f2</button><button onclick="img1.onclick.RemoveFunction(f3)">移除f3</button>
<div id=output></div>

<SCRIPT LANGUAGE="JavaScript">
function FunctionArray()
{
    var functions=new Array();
    var FA=function (){        
        for(var i=0;i<functions.length;i++){
            if(functions[i] instanceof Function)functions[i].apply(this,arguments);
        }
    }
    FA.AddFunction=function(newFunction){
        if(newFunction instanceof Function)
        {
            for(var i=0;i<functions.length;i++){
                if(functions[i]==newFunction)return;
            }
            functions.push(newFunction);
        }
    }
    FA.RemoveFunction=function(theFunction){
        for(var i=0;i<functions.length;i++){
            if(functions[i]==theFunction)functions.splice(i,1);
        }        
    }
    return FA;
}
img1.onclick=FunctionArray();

function f1()
{
    output.innerHTML+="f1 runs!!<br>";
}
function f2()
{
    output.innerHTML+="f2 runs!!<br>";
}
function f3()
{
    output.innerHTML+="f3 runs!!<br>";
}

</SCRIPT>

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-11-12 00:53:18

javascript多投事件的处理 (转)的相关文章

JavaScript:理解worker事件api

如果你不是很了解Event事件,建议先看我上一篇随文javascript:理解DOM事件.或者直接看下文worker api. 首先,我们需要实例一个Worker的对象,浏览器会根据新创建的worker对象新开一个接口,此接口会处理客户端与indexedDB数据库之间的通信.这里的数据库是指浏览器数据库.如果,你需要判断浏览器是否支持worker对象,详见如下代码.或者浏览器是否支持indexedDB数据库,详见同下,二者判断最好选择前者.因为IE不支持indexedDB . if(window

javascript中的事件

在javascript中的事件有三个方面的知识,一是事件流,二是事件处理程序,三是事件对象.下面就我个人的一点理解,分别讲述一下这三个方面的内容. 第一.事件流 事件流指的是事件按照一定的顺序触发.它有两个顺序,分别是自上而下和自下而上. 自上而下的叫做事件捕获,事件捕获指的是事件的处理将从DOM层次的根开始,而不是从触发事件的目标元素开始,事件被从目标元素的所有祖先元素依次往下传递.在这个过程中,事件会被从文档根到事件目标元素之间各个继承派生的元素所捕获,如果事件监听器在被注册时设置了useC

javaScript中的事件三

javaScript中的事件三 先看两种错误的写法,他们的目的都是:添加两个事件: 错误方式一: window.onload=function (){ alert('event 1'); } window.onload=function (){ alert('event 2') } 错误方式二: window.onload=function (){ var obj=document.getElementById("but"); obj.onclick=function(){ alert

javascript中奇怪事件

javascript中奇怪事件 为啥叫奇怪事件了,应该是我目前掌握的知识暂时不能解释这种现象滴呀(也许可以用事件流的概念来解释滴呀) 看布局: #hideInfo{ height:100px; width:100px; background:green; position:absolute; top:20px; left:-90px; } #hideInfo span{ height:100px; width:100px; background:blue; position:absolute;

javascript鼠标中键滚动事件介绍

javascript鼠标中键滚动事件介绍:在实际应用中,鼠标的一些事件非常常用,例如,onclick事件.onmouseover事件等,这里就不介绍了,具体可以参阅javascript的onclick事件和javascript的onmouseover事件一章节. 还有一种事件比较少用,那就是鼠标中键滚轮滚动事件,下面就通过代码实例简单介绍一下中键滚轮事件.IE浏览器和谷歌浏览器支持mousewheel事件,也就是鼠标中键滚动事件,但是遗憾的是火狐浏览器并不支持此事件,而是支持DOMMouseSc

了解javascript中的事件(一)

零.寒暄 由于刚入职,近期事情繁多,今天好不容易中期答辩完事,晚上有一些时间,来给大家分享一篇博文. 这段时间每天写js接触事件比较多,自己会使用,但是用的时候比较混乱,现在系统的整理下,好了,闲话不多说,谈正事! 一.事件概念 什么是事件?说白了,事件是文档或浏览器中发生的特定交互瞬间!比如鼠标点击,滑过等等. 二.事件流 事件流就是描述了页面中接受事件的顺序.在浏览器发展的初期,两大浏览器厂商IE和Netscape互掐,出现了一个坑爹的情况,那就是他们对事件流的解释出现了两中截然相反的定义.

JavaScript点击事件/一个按钮触发另一个按钮

给按钮2添加点击事件click触发按钮1的点击事件,就算给按钮1添加样式display: none;或visibility: hidden;隐藏起来也能触发. <button type="button" id="btn1" onclick="alert('我是按钮1的弹框')" >按钮1</button> <button type="button" id="btn2">按

CSS伪类选择器active模拟JavaScript点击事件

一.说明 设置元素在被用户激活(在鼠标点击与释放之间发生的事件)时的样式. IE7及更早浏览器只支持a元素的:active,从IE8开始支持其它元素的:active. 另:如果需要给超链接定义:访问前,鼠标悬停,当前被点击,已访问这4种伪类效果,而又没有按照一致的书写顺序,不同的浏览器可能会有不同的表现.超链接的4种状态,需要有特定的书写顺序才能生效.注意,a:hover必须位于a:link和a:visited之后,a:active必须位于a:hover之后.可靠的顺序是:l(link)ov(v

JavaScript 进阶教程一 JavaScript 中的事件流 - 事件冒泡和事件捕获

先看下面的示例代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>JavaScript 中的事件冒泡与事件捕获</title> </head> <body> <div id="Red" style="width:200px;height:200px;background-color:red;padding:2