我是FE,也是Fe

前端来源于不断的点滴积累。我一直在努力。

统计

留言簿(15)

阅读排行榜

评论排行榜

使用javascript触发事件

javascript中的事件时通过事件监听的机制来实现,但是在某些情况下需要使用javascript手动触发事件。
<input type="button" id="btn1" name="" value="test" onclick="alert('click');" />
<input type="button" id="" name="" value="fire" onclick="fire();" />
如果fire按钮来触发test按钮的onclick事件,fire方法可以这么写的:
        function fire(){
            
var evt = window.event?window.event:fire.caller.arguments[0];//获取event对象
            var o= document.getElementById("btn1");
            
if(o.fireEvent){//IE
                o.fireEvent("onclick",evt);//IE下可以直接使用fireEvent方法触发事件
            }else{//other browsers
                //创建一个对象
                var event = document.createEvent("MouseEvents");
                            
                
//设置event对象属性
                event.initMouseEvent("click"truetrue, document.defaultView, 00000
                                     
falsefalsefalsefalse0null);
                            
                
//触发事件
                o.dispatchEvent(event); 
            }
        }

最开始看到这些代码是在Wrox.Professional.JavaScript.For.Web.Developers.2nd书中,我迅速想到jquery中是否有类似的实现?事实上我连dispatchEvent都没有找到




事实上我想复杂了,要触发onclick事件,直接用oBtn.click()方法即可,没有浏览器兼容问题。jquery中就是直接用这个方法的。
$(function(){
            $(
"#jqFire").click(function(){
                $(
"#btn1").click();//works
                o.click();//also works
            });
        });

关于上面提到的createEvent/initMouseEvent/dispatchEvent/fireEvent方法可以参考下列资料:

http://stackoverflow.com/questions/911586/javascript-simulate-mouse-over-in-code

http://stackoverflow.com/questions/460644/trigger-an-event-with-prototype 这个帖子介绍了几种事件触发的方法

http://jehiah.cz/a/firing-javascript-events-properly 一个触发事件方法封转

http://code.google.com/p/jqueryjs/source/browse/trunk/plugins/simulate/jquery.simulate.js?r=6163 jquery.simulate.js的源代码



posted on 2010-11-29 00:17 衡锋 阅读(1089) 评论(0)  编辑  收藏 所属分类: Web开发


只有注册用户登录后才能发表评论。


网站导航: