2010-05-14 12 views
32

मैं किसी दिए गए घटना प्रकार के लिए सभी संचालकों को दूर करना चाहते हैं। मान लीजिए कि मैं एक बटन को दो बार "onclick घटना" जोड़ा है और अब मैं मूल राज्य है जहां कोई ईवेंट हैंडलर बटन को स्थापित किया गया था वापस करने के लिए वापस जाने के लिए चाहते हैं।यह जावास्क्रिप्ट में एक दिया तत्व के सभी ईवेंट हैंडलर्स दूर करने के लिए संभव है?

मैं यह कैसे कर सकता हूं?

पुनश्च: मैंने पाया removeEventListener (गैर आईई)/detachEvent (आईई) तरीकों लेकिन कार्यों मुझे एक पैरामीटर के रूप में समारोह है कि घटना है जो मेरे लिए काफी अनाड़ी क्योंकि मैं स्टोर करने के लिए होता रहा है संभालती पास करना चाहते हैं कहीं कहीं काम करता है।

संपादित करें: http://ejohn.org/blog/flexible-javascript-events/ - मैं अब एक जावास्क्रिप्ट तत्व से सभी घटना श्रोताओं पट्टी इसलिए की तरह के लिए इस कोड

+1

क्या आप इनलाइन ऑनक्लिक विशेषता का उपयोग कर रहे हैं? – Mottie

+0

+1 ग्रेट सवाल। –

+0

एक बेहतर, अधिक प्रत्यक्ष विकल्प @ जिग्गी के समाधान का उपयोग करना है http://stackoverflow.com/questions/803936/how-to-clear-remove-javascript-event-handler – chowey

उत्तर

7
:

allElements = document.getElementsByTagName('*'); 

और फिर आप एक पाश का उपयोग

http://www.quirksmode.org/js/events_advanced.html - "कौन सा ईवेंट हैंडलर पंजीकृत हैं?" - ऐसा लगता है इसके बिना :-(

संपादित डोम 3 स्तर संभव नहीं है: मैं इस कोड के साथ आए हैं यह मेरी जरूरतों सूट शायद यह किसी और के लिए उपयोगी होगा

जावास्क्रिप्ट:

।।।
function DomLib() { 


} 


/** 
* Based on: http://ejohn.org/blog/flexible-javascript-events/ 
* Function that register event and enables it to be removed without explicitly giving the function definition 
*/ 
DomLib.prototype.regEventEx = function (el, eventName, funct) { 

    if (el.attachEvent) { 
    el['e'+eventName+funct] = funct; 
    el[eventName+funct] = function(){el['e'+eventName+funct](window.event);} 
    el.attachEvent('on'+eventName, el[eventName+funct]); 
    } else {  
    el.addEventListener(eventName, funct, false); 
    } 

    if(!el.eventHolder) el.eventHolder = []; 
    el.eventHolder[el.eventHolder.length] = new Array(eventName, funct); 
} 

DomLib.prototype.removeEvent = function (obj, type, fn) { 
    if (obj.detachEvent) { 
    obj.detachEvent('on'+type, obj[type+fn]); 
    obj[type+fn] = null; 
    } else { 
    obj.removeEventListener(type, fn, false); 
    } 
} 


DomLib.prototype.hasEventEx = function (el, eventName, funct) { 

    if (!el.eventHolder) { 
    return false; 
    } else { 
    for (var i = 0; i < el.eventHolder.length; i++) { 
     if (el.eventHolder[i][0] == eventType && String(el.eventHolder[i][1]) == String(funct)) { 
     return true; 
     } 
    } 
    } 
    return false; 
} 

/** 
* @return - returns true if an event was removed 
*/ 
DomLib.prototype.removeEventsByTypeEx = function (el, eventType) { 

    if (el.eventHolder) { 

    var removed = 0; 
    for (var i = 0; i < el.eventHolder.length; i++) { 
     if (el.eventHolder[i][0] == eventType) {     
     this.removeEvent(el, eventType, el.eventHolder[i][1]); 
     el.eventHolder.splice(i, 1); 
     removed++; 
     i--; 
     } 
    } 

    return (removed > 0) ? true : false; 
    } else { 
    return false; 
    } 
} 

परीक्षण HTML पृष्ठ:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<html> 
<head> 
<meta http-equiv="Expires" content="Fri, Jan 01 1900 00:00:00 GMT"> 
<meta http-equiv="Pragma" content="no-cache"> 
<meta http-equiv="Cache-Control" content="no-cache"> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<meta http-equiv="Lang" content="en"> 
<meta name="author" content=""> 
<meta http-equiv="Reply-to" content="@.com"> 
<meta name="generator" content="PhpED 5.8"> 
<meta name="description" content=""> 
<meta name="keywords" content=""> 
<meta name="creation-date" content="01/01/2009"> 
<meta name="revisit-after" content="15 days"> 
<title>DomLibTest</title> 
<link rel="stylesheet" type="text/css" href="my.css"> 
<!-- FILL IN: Location of your jQuery library --> 
<script type="text/javascript" src="jQuery/jQuery-current.js"></script> 
<!-- FILL IN: Plugin for debugging ... http://www.ecitadel.net/blog/2009/12/08/developing-jquery-use-dump-instead-alert --> 
<script type="text/javascript" src="jQuery/jQuery.dump.js"></script> 
<script type="text/javascript" src="DomLib.js"></script> 
</head> 
<body> 

    <div id="testElem-1"></div> 
    <script type="text/javascript"> 
    <!-- 

    var domLib = new DomLib(); 

    function removeTest(el) { 

     var funct = function() { alert("#1: How Are You?");}; 
     var funct2 = function() { alert("#2: How Are You?");};     

     domLib.regEventEx(el, "click", funct); 
     domLib.regEventEx(el, "mousemove", funct2); 
     domLib.regEventEx(el, "mousemove", funct2); 
     domLib.regEventEx(el, "mousemove", funct2); 

     $.dump(el.eventHolder);  
     domLib.removeEventsByTypeEx(el, "mousemove");  
     $.dump(el.eventHolder); 
    } 

    removeTest(document.getElementById('testElem-1')); 

    --> 
    </script> 
</body> 
</html> 
5

this thread के अनुसार, आप cloneNode उपयोग कर सकते हैं का उपयोग कर रहा:

var new_element = old_element.cloneNode(true); 
old_element.parentNode.replaceChild(new_element, old_element); 
+1

हाँ, लेकिन निम्नलिखित वाक्य है: मेरा मानना ​​है कि अटैचमेंट तब भी जारी रहता है जब कोई तत्व क्लोन किया जाता है, इसलिए मुझे यकीन नहीं है कि आप इंटरनेट एक्सप्लोरर उपयोगकर्ताओं के लिए क्या करेंगे। –

8

यह हो सकता है सभी ईवेंट हैंडलरों को प्रबंधित करने के लिए jQuery या समान फ्रेमवर्क का उपयोग करने का एक अच्छा विचार हो। यह आपको आसानी से उपयोग करते हैं, विनीत कार्यों को जोड़ने और ईवेंट हैंडलर्स दूर करने के लिए दे देंगे:

$(...).bind('click', function() { ... }); 
$(...).unbind('click'); 
// or, to unbind all events: 
$(...).unbind(); 
+0

मैं समझना चाहता हूं कि यह कैसे काम करता है। क्या यह बस कार्यों को कहीं और स्टोर करता है() बस फ़ंक्शंस की सूची के माध्यम से जाता है और RemoveEventListener को कॉल करता है? –

+2

यह एक ईवेंट सूची को आंतरिक रूप से – ThiefMaster

+0

'$ (" * ") संग्रहीत करता है। Unbind(); यदि आप ऐसा करने का प्रयास कर रहे हैं, तो सभी तत्वों के सभी ईवेंट हैंडलर को हटा देंगे। – palswim

-6

जहाँ तक मुझे पता है, आप नहीं दो onclick हैंडलर एक तत्व के लिए बिल्कुल भी जोड़ सकते हैं।

कहें ओबीजे एक तत्व है तो ओबीजे की संपत्ति पर क्लिक करने पर संपत्ति को एक समारोह माना जाता है और फिर जब भी यह घटना होती है तो उसे विधि के रूप में बुलाया जाता है। यदि यह कोई फ़ंक्शन नहीं है तो कुछ भी नहीं होगा।

जावास्क्रिप्ट में जावास्क्रिप्ट में एक बहुत ही रोचक संपत्ति योजना से विरासत में मिली जावास्क्रिप्ट, आप PHP या सी में फ़ंक्शंस को परिभाषित नहीं करते हैं। आप अज्ञात फ़ंक्शंस बनाते हैं और उन्हें एक चर में स्टोर करते हैं। जावास्क्रिप्ट 'लिस्प -1', वहाँ कोई समारोह पहचानकर्ता हो रहा है, वहाँ चर, जो नंबर, सरणियों, और कार्यों के घर जा सकते हैं।

function name(arg) {return arg;} 

अगर मैं के लिए सही मायने में चीनी गलत नहीं कर रहा हूँ है:

name = function(arg) {return arg;}; 

'नाम' एक चर रहा है यहाँ, हम भी फिर से asign कर सकते हैं यह कोई फर्क नहीं पड़ता कि हम कैसे है कि समारोह में परिभाषित किया। जावा के ऑब्जेक्ट मॉडल के विपरीत, जावास्क्रिप्ट, एक 'विधि' विशुद्ध रूप से एक संपत्ति, एक चर कि बस एक समारोह है कि या 'इस' कीवर्ड का उपयोग नहीं हो सकता है रखती है। यही कारण है कि आप एक ही समय में दो ऑनक्लिक घटना नहीं कर सकते हैं। रनटाइम पर्यावरण जब भी आप उस पर क्लिक करते हैं तो 'ऑनक्लिक' नामक तत्व के गुण (जिसे फ़ंक्शन हाउस करने की उम्मीद है) को कॉल करता है। प्रोग्राम शुरू करने के लिए 'मुख्य' को कॉल करने के समान विज्ञापन प्रकार के व्यवहार के रूप में इसे देखें।

कई ईवेंट हैंडलर्स असाइन करने के लिए, आप की तरह, एक पक्ष प्रभाव के साथ एक समारोह का उपयोग करें।

obj.onclick = function {firstEvent();secondEvent();} 

बदलना या हटाना के लिए, हम फिर से कर सकते हैं या किसी भी चर की तरह यह डी-निर्दिष्ट करते हैं।

obj.onclick = null; 

और मामले में हम किसी अन्य तरीके से उस व्यवहार को लागू करने की जरूरत है:

obj.onclick(); 

हम यह भी निश्चित रूप से है कि समारोह में इसका उपयोग कर सकते वस्तु ही बदल सकते हैं या यह संदर्भित करने के लिए।

संपादित करें: ओह रुको, अब मैं देखता हूं कि आपका मतलब है कि 'बटन' कई अलग-अलग बटन हैं।

ठीक है, तो आप जैसे सभी तत्वों को एकत्रित करते हैं: (और कोई, कि एक = एक टाइपो नहीं है)

var i = 0; while(obj = allElements[i++]) obj.onclick = null; 

+0

http://pastebin.org/237133 - यह एक कोड का एक उदाहरण है जो एक बटन के लिए दो ऑनक्लिक हैंडलर को कॉल करता है। (फ़ायरफ़ॉक्स और क्रोम में परीक्षण किया गया) –

+0

मैं वास्तव में केवल एक बटन नहीं मानता हूं। –

+4

-1 पहली वाक्य में गलत जानकारी। जानें कि जावास्क्रिप्ट में इवेंट हैंडलिंग कैसे काम करता है और इसे +1 बनाने के लिए पोस्ट को ठीक करता है – naugtur

0

कुछ तरीके एक साथ संयोजन, खोजने और की "पर ..." तत्व की विशेषता सूची से घटना-गुण, अन्यथा सभी को निकाल लिया आप केवल डोम समारोह-संचालकों ...

icompile.eladkarako.com/force-chrome-password-saving-by-removing-event-handlers-the-jsninja-way/

हटा रहे हैं आप उन में से किसी में कोई निर्भरता है निम्नलिखित के बाद से अपने सभी मू/jQuery/अन्य ढांचे को जोड़ने के लिए बहुत स्वागत है (बिल्ली! यदि IE में काम करना चाहिए भी)

6

आप (अपने तत्व के पेरेंट के तहत केवल एक ही बच्चा तत्व है, तो या यदि आप कोई आपत्ति नहीं है सब भाई ईवेंट हैंडलर्स भी खो दिया है):

elem.parentElement.innerHTML = elem.parentElement.innerHTML; 

क्रोम 49 में परीक्षण किया गया, एफएफ 44, आईई 11

यह सभी 'addEventListener' को हटा देता है।

संबंधित मुद्दे