addEventListener的参数说明

我想大家对这个函数的前两个参数已经很了解了吧,主要是第三个参数不很好理解。我查了一些资料,弄明白了这个问题,所以记录下来了。下面的内容,基本上是参考别人的。

第三个参数叫做useCapture,是一个boolean值,就是true or false,如果是rue的话就是浏览器会使用Capture方式,false的话是Bubbling,只有在特定状况下才会有影响,通常建议是false,而会有影响的情形是目标元素(target element)有父元素(ancestor element),而且也有同样的事件对应函数,我想,看图比较清楚。

     

   
像這張圖所顯示的,我的範例有兩層div元素,而且都設定有click事件,一般來說,如果我在內層藍色的元素上click不只會觸發藍色元素的click事件,還會同時觸發紅色元素的click事件,而useCapture這個參數就是在控制這時候兩個click事件的先後順序。如果是false,那就會使用bubbling,他是從內而外的流程,所以會先執行藍色元素的click事件再執行紅色元素的click事件,如果是true,那就是capture,和bubbling相反是由外而內,會先執行紅色元素的click事件才執行藍色元素的click事件。

那如果不同層的元素使用的useCapture不同呢?就是會先從最外層元素往目標元素尋找設定為capture的事件,到達目標元素執行目標元素的事件後,再尋原路往外尋找設定為bubbling的事件。

attachEvent与addEventListener区别

适应的浏览器版本不同,同时在使用的过程中要注意
attachEvent方法          按钮onclick
addEventListener方法    按钮click

有关addEventListener函数的相关参数请点击这里查看

两者使用的原理:可对执行的优先级不一样,下面实例讲解如下:
attachEvent方法,为某一事件附加其它的处理事件。(不支持Mozilla系列)

addEventListener方法 用于 Mozilla系列

举例: document.getElementById("btn").onclick = method1;
document.getElementById("btn").onclick = method2;
document.getElementById("btn").onclick = method3;如果这样写,那么将会只有medhot3被执行

写成这样:
var btn1Obj = document.getElementById("btn1"); //object.attachEvent(event,function);
btn1Obj.attachEvent("onclick",method1);
btn1Obj.attachEvent("onclick",method2);
btn1Obj.attachEvent("onclick",method3);执行顺序为method3->method2->method1

如果是Mozilla系列,并不支持该方法,需要用到addEventListener var btn1Obj = document.getElementById("btn1");
//element.addEventListener(type,listener,useCapture);
btn1Obj.addEventListener("click",method1,false);
btn1Obj.addEventListener("click",method2,false);
btn1Obj.addEventListener("click",method3,false);执行顺序为method1->method2->method3

使用实例:

1。 var el = EDITFORM_DOCUMENT.body;
//先取得对象,EDITFORM_DOCUMENT实为一个iframe
if (el.addEventListener){
el.addEventListener('click', KindDisableMenu, false);
} else if (el.attachEvent){
el.attachEvent('onclick', KindDisableMenu);
}2。 if (window.addEventListener) {
window.addEventListener('load', _uCO, false);
} else if (window.attachEvent) {
window.attachEvent('onload', _uCO);
}

使用js检测图片合法性

用js检测图片合法性

<script type="text/javascript">
function validate() {
var OK = new Array ('jpg', 'gif', 'jpeg', 'png', 'jpe', 'bmp', 'tif');
var filename = document.getElementById("ELEMENT_ID").value;
var ext = getExt(filename);
var fileOK = 0;

for (i = 0; i < OK.length; i++) {
if (OK[i] == ext) {
fileOK = 1; // one of the file extensions found
}
}

if (fileOK == 0) {
alert ("The file is not an image file");
return false;
}
}

function getExt(filename) {
var dot_pos = filename.lastIndexOf(".");
if(dot_pos == -1)
return "";
return filename.substr(dot_pos+1).toLowerCase();
}
</script>
<form action="ACTION" onsubmit="return validate()" enctype="multipart/form-data" method="post">
<table class="forms">
<tr>
<th><label>Image</label></th>
<td><input id="ELEMENT_ID" name="poster[image]" size="30" type="file" />
<input id="event_poster_image_temp" name="poster[image_temp]"
type="hidden" value="" />
</td>
</tr>
<tr>

<th class="last"></th>
<td class="last">
<input class="button" name="commit" type="submit" value="Upload image" />
</td>
</tr>
</table>
</form>

一段指定时间后隐藏层的js代码

法一:
//指定时间隐藏层
function hiddenDiv(layer, sec){
 if(sec < 1) sec = 3;
 sec = (sec<1 ? 3 : sec) * 1000;
 setTimeout("document.getElementById('" + layer + "').style.display = 'none';", sec);
}

 

法二:
function hideDiv(id){
 document.getElementById(id).style.display = "none";
}

function delayedHide(id, time){
 var fn = function(){
  hideDiv.apply(this, [id]); 
 }
 setTimeout(fn, time);
}

delayedHide("mydiv", 2000);

第二种方法没有试验过,不知能否成功,大家不仿参考一下

JavaScript 面向对象编程

作者:lzlhero <lzlhero_at_eyou.com>
发布:heiyeluren <heiyeluren_at_gmail.com>
时间:2005-08-25

我们将向你展示 JavaScript 如何实现面向对象的语言中的: 继承. 同时, 这些例子将向你展示如何实现类的封装. 在此, 我们不会讨论多态实现.

虽然 JavaScript 是脚本语言, 但它所支持的面向对象编程也是非常强大的. 虽然它没有类和实例, 但它有对象, 原型和隐式的继承. 我们将会解释如何模拟继承及其超类与子类之间关系的形式. 原型是理解继承概念的关键, 我们将会教你如何建立原型, 如何检测一个对象是否是另外一个对象的原型, 及其 JavaScript 的模型与 Java 面向对象编程之间的区别. 我们同样会向你展示如何检测对象所包含的各种属性的方法. 在另外一篇文章里, 我还会详细地讲解有关 "原型链 (prototype chain)" 的知识. Continue reading

Javascript面向对象编程

---->什么是类和对象
    这是所有面向对象编程之前必须弄明白的.
    所谓类:简单地说就是模板,说的专业一些,是一类具有某种性质的物的集合.比如:人就是一个类,车也是一个类,等等.
    所谓对象:就是类的具体实现.如上面所说,人是一个类,一个具体的人就是一个对象,比如张三.
   
    对象是类的实例化后的结果.javascript中使用new关键字来实例化一个类,生成一个对象.
    例子:
        function people(){    //javascript中一个function也是一个类,这里我们建立一个空的类people
        }
       
        var zhangsan=new people;    //实例化生成一个对象张三

---->一个具体形象的例子
    /*-->最简单的类:
     *people类
     *    属性:性别,年龄,姓名
     *    方法:说话
     */
        function people(name,sex,age){
            this.name=name;
            this.sex=sex;
            this.age=age;
            this.say=function(){
                return "我叫"+this.name;
            }
        }
       
        使用时:
        var zhangsan=new people;
        alert(zhangsan.say());
        var lisi=new people;
        alert(lizi.say());
        说明:
            上面使用了this关键字,this总是指向当前的对象,在上面例子中,zhangsan.say中具有this.name,这里的this是当前的对象zhangsan.后面lisi.say则是指向当前对象lisi
            对象具有属性,上面的name,sex和age就是对象的属性.我们这样可以访问,如lisi.name,zhangsan.age
            对象还具有方法,比如上面的say.方法是通过构造函数实现的.使用时,如上面,用lisi.say(),zhangsan.say()
           
            当然我们还可以在实例化对象后为对象添加新的属性和方法.比如:
            zhangsan.girlfriend="小丽";
            zhangsan.doing=function(){
                return "I am eating";
            }

---->javascript类/对象和其他面向对象语言的异同
    相同点:面向对象编程的思想都是一样的,世界上所有的具体事物都可以看成对象,而这些事物从属的集合都可以看成类.我们要做的是构造我们需要的类,在实例化成我们需要的对象为我们工作.
    不同点:其他面向对象编程的语言对于类/对象关心下面的事情:
            1.作用域:公用,私用,受保护,静态.而javascript只有一种作用域:公用作用域.
            2.特性:继承,多态.javascript不支持多态,继承方面的内容将在"javascript对象的继承"一文中介绍

---->构建javascript类/对象的方式
    首先,可以大致定义出下面几种类型:
        1.工厂方式
        2.构造函数方式
        3.原型方式
        4.混合的构造函数/原型方式
        5.动态原型方法
        6.混合工厂方式
   
    具体说明:
        A.工厂方式:
            所谓工厂方式,是指先建立对象,然后再往对象里面添加属性和方法.
            eg.1
                var zhangsan=new Object;    //创建对象
                zhangsan.name="张三";        //给对象添加属性
                zhangsan.say=function(){    //给对象增加方法
                    alert("我叫张三");
                }
            eg.2 上面的例子没有封装性,我们可以使用函数封装,实现多重利用
                function people(){
                    var p_object=new Object;
                    p_object.name="张三";
                    p_object.say=function(){
                        alert("我叫张三");
                    }
                    return p_object;    //返回对象
                }
                var zhangsan=people;
                var lisi=people;
                上面zhangsan和lisi两个对象具有完全相同的属性和方法,都叫"张三"(name属性),都会说"我叫张三"(say()方法)
            eg.3 通过传递参数改进eg.2
                function people(name){
                    var p_object=new Object;
                    p_object.name=name;
                    p_object.say=function(){
                        alert("我叫"+this.name);
                    }
                    return p_object;    //返回对象
                }
                var zhangsan=people("张三");
                var lisi=people("李四");
            总结:
                工厂方式,总是先创建一个对象,再往对象中添加你需要的属性和方法.但这种做法对于封装性和多种利用性不是很有利,这导致了这种对象的构造方法不被提倡.
                使用工厂方式总是为每个对象创建独立的函数版本.
                这类方式使用封装然后调用新对象的时候不使用new创建对象.
               
        B.构造函数方式:
            所谓构造函数方式,就像我给出的例子"一个具体形象的例子",就是采用构造函数的方式.它和工厂方式的区别是不再在函数内部创建一个对象.而是通过this关键字指向当前对象.
            构造函数的例子不再给出.
            构造函数和工厂方式一样,会重复生成函数,为每个版本的对象创建独立的函数版本.
       
        C.原型方式
            所谓原型方式,就是利用prototype属性来实现属性和方法的继承
            eg.1
                function people(){
                }
               
                people.prototype.name="张三";
                people.prototype.say=function(){
                    alert("我叫"+this.name);
                };
               
                var zhangsan=new people();
                var lisi=new people();
            原型方式不能通过构造函数传递参数初始化属性的值,因为所有的属性和方法都是通过prototype添加的
           
        D.混合的构造函数/原型方式
            对于对象的属性,使用构造函数的方式
            对于对象的方法,使用原型方式
            eg.1
                function people(name){
                    this.name=name;
                }
                people.prototype.say=function(){
                    return "我的名字叫"+this.name;
                };
               
                var zhangsan=new people("张三");
                document.write(zhangsan.say());
           
            eg.2 我们也可以把prototype写入类,实现视觉上的封装.
                function people(name){
                    this.name=name;
                    people.prototype.say=function(){
                        return "我的名字叫"+this.name;
                    };
                }
               
                var zhangsan=new people("张三");
                document.write(zhangsan.say());
           
            总结:这种构造类/对象的方法是推荐使用的
           
        E.动态原型方式
            这是在混合的构造函数/原型方式上改进的一种方式(提供更友好的编码风格),他们功能是等价的
            eg.1
                function people(name){
                    this.name=name;
                    if(typeof people._initialized=="undefined"){
                        people.prototype.say=function(){
                            return "我的名字叫"+this.name;
                        };
                        people._initialized=true;
                    }
                }
                var zhangsan=new people("张三");
                document.write(zhangsan.say());
                var lisi=new people("李四");
                document.write(lisi.say());
            这样处理的目的是创建对象的方法后下一次使用时不要再创建.
            由于上面的原因,动态原型方式也是javascript中常用的一种创建类/对象的一种方式
           
        F.混合工厂方式
            混合工厂方式几乎和工厂方式是一样的.它同样是先构造对象,然后再往对象中添加属性和方法.不同的是,混合工厂方式生成对象时依旧使用new关键字.
            eg.1
                function people(){
                    var p_object=new Object;
                    p_object.name="张三";
                    p_object.say=function(){
                        alert("我叫张三");
                    }
                    return p_object;    //返回对象
                }
                var zhangsan=new people;
                var lisi=new people;
                zhangsan.say();
                lisi.say();
            混合工厂方式和工厂方式以及经典方式(构造函数,原型方式)一样会产生问题,不推荐使用
           
    对各种构建类/对象方式的总结:
        通常地,我们使用混合的构造函数/原型方式,即属性使用构造函数方式,方法采用原型方式.当然,加强地,我们可以使用动态原型方式.
        上面两种方式是推荐使用的.
       
                   
---->关于prototype的其他功能
    1.给对象(包括本地对象)添加新的方法
        比如Array对象,你可能需要添加一个方法toHexString,你可以这样做:
            Array.prototype.toHexString=function(){
                //code here
            }
    2.重定义方法
        实质是让方法指向一个新的函数
            Array.prototype.toHexString=function(){
                //other code href
            }

JavaScript面向对象编程(1)-- 基础

自从有了Ajax这个概念,JavaScript作为Ajax的利器,其作用一路飙升。JavaScript最基本的使用,以及语法、浏览器对象等等东东在这里就不累赘了。把主要篇幅放在如何实现JavaScript的面向对象编程方面。

1. 用JavaScript实现类
JavaScritpt没有专门的机制实现类,这里是借助它的函数允许嵌套的机制来实现类的。一个函数可以包含变量,又可以包含其它函数,这样,变量可以作为属性,内部的函数就可以作为成员方法了。因此外层函数本身就可以作为一个类了。如下:

function myClass()
{
    
//此处相当于构造函数
}

这里 myClass就是一个类。其实可以把它看成类的构造函数。至于非构造函数的部分,以后会详细描述。 Continue reading

,jsonJavaScript中的JSON

  • 作者:Douglas Crockford
  • 原文网址:http://www.json.org/js.html
    JavaScript这种编程语言首要的目的是为Netscape Navigator提供一种页面脚本语言。它仍被普遍的认为是Java的一个子集,但事实并非如此。它是一种语法类似c语言并且支持面向对象Scheme-like语言。JavaScript使用了ECMAScript语言规范第三版进行了标准化。

    JSON是JavaScript面向对象语法的一个子集。由于JSON是JavaScript的一个子集,因此它可清晰的运用于此语言中。

    var myJSONObject = {"bindings": [
            {"ircEvent": "PRIVMSG", "method": "newURI", "regex": "^http://.*"},
            {"ircEvent": "PRIVMSG", "method": "deleteURI", "regex": "^delete.*"},
            {"ircEvent": "PRIVMSG", "method": "randomURI", "regex": "^random.*"}
        ]
    };

    上面的示例,创建了一个包括单独成员”bindings”的对象,此成员包括一个含有三个对象(”ircEvent”, “method”, 与 “regex”)的数组

    成员可以通过.或者下标操作符检索。

    myJSONObject.bindings[0].method    // "newURI"

    为了将JSON文本转换为对象,可以使用eval()函数。eval()函数调用JavaScript编辑器。由于JSON是JavaScript的子集,因此编译器将正确的解析文本并产生对象结构。文本必须括在括号中避免产生JavaScript的语法歧义。

    var myObject = eval('(' + myJSONtext + ')');

    eval函数非常快速。它可以编译执行任何JavaScript程序,因此产生了安全性问题。当使用可信任与完善的源代码时才可以使用eval函数。这样可以更安全的使用JSON解析器。使用XMLHttpRequest的web应用,页面之间的通讯只允许同源,因此是可以信任的。但这却不是完善的。如果服务器没有严谨的JSON编码,或者没有严格的输入验证,那么可能传送包括危险脚本的无效JSON文本。eval函数将执行恶意的脚本。

    使用JSON解析器可以防止此类事件。JSON解析器只能辨识JSON文本,拒绝所有脚本。提供了本地JSON支持的浏览器的JSON解析器将远快于eval函数。预计未来的ECMAScript标准将支持本地JSON。

    var myObject = JSON.parse(myJSONtext, reviver);

    一个替换函数(reviver function)做为可选参数被最终结果的每一级的键(key)与值(value)调用。 每个值都将被替换函数的值代替。这可以用来将一般的类改变成伪类的实例,或者将日期字符串转变为日期对象。

    myData = JSON.parse(text, function (key, value) {
        var type;
        if (value && typeof value === 'object') {
            type = value.type;
            if (typeof type === 'string' && typeof window[type] === 'function') {
                return new (window[type])(value);
            }
        }
        return value;
    });

    JSON stringifier进行反向操作,可以把JavaScript数据结构转换为JSON文本。JSON不支持循环数据结构,因此应小心不要为JSON stringifier提供循环结构。

    var myJSONText = JSON.stringify(myObject, replacer);

    如果stringify函数发现一个带有toJSON方法的对象,它将执行此方法,并且返回产生的值。这样一个对象就可以决定自己的JSON表现。

    stringifier方法可以携带一个可选的字符串数组。这些字符串被用于选择包括在JSON文本中的属性。

    stringifier方法可以携带一个可选的替代(replacer)函数。它将在结构中每个值的toJSON方法(如果有的话)后面执行。它将每个键与值做为参数传递,当然对象要包含这个键。值将被stringified返回。

    如果没有提供数组或替代函数,一个用于忽略被集成的属性的可选替代函数将被提供。如果想要所有被继承的属性,可以提供一个简单的替换函数:

    var myJSONText = JSON.stringify(myObject, function (key, value) {
        return value;
    });

    值在JSON中不代表任何内容,函数与未定义(undefined)被排除在外。

    不能确定的数量将被替换为null。为了替代其它的值,可以像下面一样使用替换(replacer)函数

    function replacer(key, value) {
        if (typeof value === 'number' && !isFinite(value)) {
            return String(value);
        }
        return value;
    }

    开放源代码的JSON解析器与JSON stringifier可以使用。通过minified可以小于2.5K。

  • javascript 字符串连接的性能问题(多浏览器)

    <html>
    <head>
    <title>Example</title>
    </head>
    <body>
    <p><strong>Note:</strong> The latest versions of Firefox seem to have fixed the string concatenation problem. If you are using Firefox 1.0 or later, the string buffer may actually take longer than normal string concatenation.</p>
    <script type="text/javascript">
    function StringBuffer() {
    this.__strings__ = new Array;
    }
    StringBuffer.prototype.append = function (str) {
    this.__strings__.push(str);
    };
    StringBuffer.prototype.toString = function () {
    return this.__strings__.join("");
    };
    var d1 = new Date();
    var str = "";
    for (var i=0; i < 10000; i++) {
    str += "text";
    }
    var d2 = new Date();
    document.write("Concatenation with plus: " + (d2.getTime() - d1.getTime()) + " milliseconds");
    var buffer = new StringBuffer();
    d1 = new Date();
    for (var i=0; i < 10000; i++) {
    buffer.append("text");
    }
    var result = buffer.toString();
    d2 = new Date();
    document.write("<br />Concatenation with StringBuffer: " + (d2.getTime() - d1.getTime()) + " milliseconds");
    </script>
    </body>
    </html>

    在 Firefox/3.0.3中执行的结果如下:
    Concatenation with plus: 5 milliseconds
    Concatenation with StringBuffer: 10 milliseconds
    在IE6中执行结果如下:
    Concatenation with plus: 234 milliseconds
    Concatenation with StringBuffer: 62 milliseconds
    1.两种方式性能差别很大
    2.看来IE6字符串连接处理能力比FF3很差呀
    3.IE6和FF3两种方式结果相反,看来以后写连接优化还有注意浏览器呀

    setTimeout()与clearTimeout()的使用

    <head>
    <script type="text/javascript">
    function startload()
    {
    mytimer=window.setTimeout("alert('时间很晚了,应该离开了!')",10000)
    }
    function stop()
    {
    window.clearTimeout(mytimer);
    con=confirm("真的想结束浏览吗?");
    if(con==ture)window.close();
    }
    </script>
    </head>
    <body onLoad="startload()">
    <form>
    <center>
    <h3>请在10秒钟单击以下按钮以技术浏览:</h3>
    <input type="button" value="请在10秒钟内单击此按钮" onClick="stop()">
    </center>
    </form>
    </body>