【问题标题】:Store and Restore event handler存储和恢复事件处理程序
【发布时间】:2012-12-31 07:14:56
【问题描述】:

请帮助修复我的功能,存储一个元素的事件并删除它们,然后重新安装;

不知道问题出在哪里,函数只会删除元素的事件,不会恢复。

请帮忙解决。

HTML

<a href="#" id="a">a</a>
<a href="#" id="b">b</a>​

JS

$("#a").hover(function(){alert("test")});

$("#b").click(function(){
    Test_Handle('#a');
}

function Test_Handle(id) {
         target = $(id);
        if($.hasData(target.get(0))){    //  if the elment has event || target = element
            target[0].event_name = [];
            target[0].event_handler = [];

            events = $._data(target.get(0), 'events');  // take all events of the element

            $.each(events, function(event_name, event_handler){ 
                target[0].event_name.push(event_name);
                target[0].event_handler.push(event_handler);
            });  //store the events

            target.off();  // delete the events
        }else{    // has the elment no event
            for(var i=0; i < target[0].event_handler.length; i++){
                target.on(target[0].event_name[i], target[0].event_handler[i]);
            }  // re-store the events

            target[0].event_name = [];
            target[0].event_handler = [];  //reset
        }
    }

【问题讨论】:

    标签: javascript jquery events handler


    【解决方案1】:

    您几乎明白了,当您遍历事件时,event_handler 实际上是该事件的处理程序数组(一个事件可以附加许多处理程序)。因此,您需要为每个事件将这些处理程序保存在一个数组中,以便以后重新附加它们。

    Try this:

    function Test_Handle(id) {
        target = $(id);
        events = $._data(target[0], 'events');
        if(events!=undefined){   
            target[0].event_name = [];
            target[0].event_handler = [];        
            $.each(events, function(event_name, event_handler){
                target[0].event_name.push(event_name);
                var _handlers=[];
                for(var i=0;i<event_handler.length;i++){
                    _handlers.push(event_handler[i].handler);
                }
                target[0].event_handler.push(_handlers);          
            });  //store the events
            target.off();  // delete the events
        }else{    // has the elment no event
            for(var i=0; i < target[0].event_handler.length; i++){
                for(var ii=0;ii<target[0].event_handler[i].length;ii++){
                    target.on(target[0].event_name[i], target[0].event_handler[i][ii]);
                }          
            }  // re-store the events
            target[0].event_name = [];
            target[0].event_handler = [];  //reset
        }
    }
    
    $("#a").hover(function(){alert("test")});
    
    $("#b").click(function(){
        Test_Handle('#a');
    });
    

    JSFiddle example

    【讨论】:

    • 我还有一个问题,你认为这个功能会占用很多性能并且会明显减慢加载处理时间吗?我找到了另一种方法来处理它。比如, if ($this.data('executing')) return;然后 $this.data('executing', true)。你觉得哪种方式更好??
    • 我不认为这个函数会影响你的应用程序的性能,但是也许最好替换第一个“if”(if($.hasData(target.get(0) )){) 为此: "if($._data(target[0], 'events')!=undefined){" 。看看这个例子:jsfiddle.net/JELsT/4
    猜你喜欢
    • 2023-03-27
    • 2011-03-04
    • 2019-04-27
    • 1970-01-01
    • 1970-01-01
    • 2016-05-13
    • 2011-01-13
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多