2012-11-11 13 views
8

Chrome डेवलपर टूल में समय का उपयोग करना, मैं innerHTMLके माध्यम से घटनाओं को दर्ज करने के कोड के इस छोटे से टुकड़े के लिए इस्तेमाल किया:आंतरिक HTML को क्लिक करने पर क्लिक करने से क्रोम पर दो पार्सिंग ईवेंट ट्रिगर क्यों होते हैं?

<!DOCTYPE html> 

<html> 
<head> 
    <script> 
    function test(){ 
     var wrap = document.getElementById('wrapper'); 
     wrap.innerHTML = "test"; 
    } 
    </script> 
</head> 

<body> 
    <input type="button" value="click" onClick="test();"/> 
    <div id="wrapper"></div> 
</body> 
</html> 

और मैं दो पार्स करने की घटनाओं निकाल दिया एक बार परीक्षा पद्धति चलाया जाता है देखते हैं कि देख सकते हैं :

Chrome Timeline showing parsing double events

मैं उपयोग कर रहा हूँ क्रोम संस्करण 23.0.1271.64 मीटर

यह कुछ उम्मीद कर रहा है? क्या यह क्रोम डेवलपर टूल्स से एक बग है? या क्रोम के तहत सुधार करने के लिए कुछ है?

+0

संभावित डुप्लिकेट [क्यों संलग्न करें ट्रिगर ट्रिगर्स स्टाइल को फिर से शुरू करें जबकि आंतरिक HTML सेटिंग को क्रोम पर नहीं है?] (Http://stackoverflow.com/questions/13344080/why-appendchild-triggers-recalculate-style-whereas-setting-innerhtml -dont-on-ch) –

उत्तर

2

चारों ओर खेलने के बाद मुझे लगता है कि स्ट्रिंग "टेस्ट" को पार्स करने के लिए क्रोम के साथ कुछ करना है और फिर पेज को दोबारा पार्स करना है, या संभवतः स्ट्रिंग के बाद "लपेटें" तत्व जोड़ा। आंतरिक HTML एक उत्सुक कार्य है क्योंकि यह किसी भी सामग्री को जोड़ने की अनुमति देता है, इसलिए कुछ सत्यापन/पार्सिंग होनी चाहिए।

यह कुछ हद तक कह रहा है कि यदि आप इस के लिए अपने समारोह को बदलने:

function test() { 
    var wrap = document.getElementById('wrapper'); 
    var newtext = document.createTextNode("test"); 
    wrap.appendChild(newtext); 
} 

... तो कोई पार्स घटनाओं में सभी होते हैं।

+0

कोई पार्स ईवेंट नहीं है क्योंकि createTextNode() और appendChild() के बाद wrap.textContent = 'test' जैसा ही है, जो HTML पार्सर को ट्रिगर नहीं करता है। – Erik

+0

.. हाँ, यह टिप्पणी का मुद्दा था। – adhocgeek

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