js修改onclick动作的四种方式

2012年4月2日 发表评论 阅读评论

//制作:凌鹰雪影

第一种:button.onclick = Function("alert(‘hello’);");

第二种:button.onclick = function(){alert("hello"); };

第三种:button.onclick = myAlert;

              function myAlert(){
                     alert("hello");
              }

第四种:

这种情况更加动态,更为实用,而且还能添加多个函数(添加的事件的顺序即执行顺序),呵呵
    if(window.addEventListener){ // Mozilla, Netscape, Firefox
        //element.addEventListener(type,listener,useCapture);
        button.addEventListener(‘click’, alert(’11′), false);
        button.addEventListener(‘click’, alert(’12′), false);//执行顺序11 -> 12
    } else { // IE
        button.attachEvent(‘onclick’, function(){alert(’21′);});
        button.attachEvent(‘onclick’, function(){alert(’22′);});执行顺序22 -> 21
    }

实例讲解:
    button.onclick = Function("alert(’31′);");
    button.onclick = Function("alert(’32′);");
    button.onclick = Function("alert(’33′);"); //如果这样写,那么将会只有最后一个方法被执行

    button.attachEvent("onclick", function(){alert(’41′);});
    button.attachEvent("onclick", function(){alert(’42′);});
    button.attachEvent("onclick", function(){alert(’43′);}); //如果这样写,三个方法都会被执行

    //当然,你也可以这样写
    button.onclick = Function("alert(’51′);");
    button.attachEvent("onclick", function(){alert(’52′);});

     //对应移除事件
    detachEvent(
‘onclick’,func);//ie下使用删除事件func
    removeEventListener(‘click’,func);//Mozilla下,删除事件func  

附:事件模型处理顺序(addEventListener中第三个参数useCapture的含义)

    DOM模型在遇到事件(Event)时,处理的顺序有两种分别,以下图为例:

物件一

物件二

    如果使用者在[物件一]上点击鼠标左键,[物件二]同样也会受到同一个Click事件,但是到底是[物件一]先受到还是[物件二]先收到,在每家浏览器上的实做是有所不同的,不过W3C的DOM模型为了相容性考量,将两种顺序都予以实做出来。
    如果是[物件一]先接受到事件,接下来才是[物件二]的话,我们称这样的事件处理为Event Bubbing,IE是以此模式实做的。
    如果触发的事件顺序是相反的,由[物件二]先接收到事件,最后才是[物件一]的话,我们称之为Event capturing。
    W3C的DOM模型则是两者都采用,不过会先以Event capturing的顺序能过一次所有物件的事件处理函数之后,才再以Event Bubbing的顺序跑一次。
    在JavaScript中有addEventListener()函数可以注册事件的处理函数,Prototype.js所实做的observe()函数也是透过addEventListener()所实现的,这个函数最后一个参数也就是useCapture,他的值必须是bool形态的,true代表该处理函数要在capturing的顺序中被触发,false则将代表要在bubbing的顺序中被触发,如果还不清楚的话,通常建议将这个参数的值设置为false,这并不是说对我们的程序代码有所影响,所注册的事件处理函数还是会被触发。


转载请注明来自:[MSN Spaces]http://msn.shandian.biz/126.html

  1. 本文目前尚无任何评论.