╋艺 镇╋╋网站网络|程序语言|Flash╋┣◇网站建设&Web语言 → js修改onclick动作的四种方式


  共有15865人关注过本帖树形打印复制链接

主题:js修改onclick动作的四种方式

美女呀,离线,留言给我吧!
admin
  1楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信 司令 亲民勋章
等级:管理员 帖子:3027 积分:27515 威望:0 精华:7 注册:2003/12/30 16:34:32
js修改onclick动作的四种方式  发帖心情 Post By:2012/3/5 11:14:19 [只看该作者]

//制作:凌鹰雪影

第一种: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,这并不是说对我们的程序代码有所影响,所注册的事件处理函数还是会被触发。

http://apps.hi.baidu.com/share/detail/20768226

[此贴子已经被作者于2012-3-5 11:15:43编辑过]


  
“艺镇”官方站:www.zyzsky.com QQ群:1221854  回到顶部