क्या HTML से जावास्क्रिप्ट को अलग करना असंभव है?

Question

विशिष्ट होना करने के लिए, मैं कोड के इस प्रकार से बचने के बारे में बात कर रहा हूँ: एक .js फ़ाइल में यानी

<input type='text' id='title_33' class='title' 
    onfocus='updateCharsLeft(33);' 
    onkeypress='updateCharsLeft(33);' /> 

यहाँ मैं onfocus और onkeypress घटना डाल करने के लिए चाहते हैं अलग से संभालती है,। इस तरह:

$(document).ready(function() 
    { 
    $(".title").focus(updateCharsLeft); 
    $(".title").keypress(updateCharsLeft); 
); 

हालांकि यहां समस्या यह है कि पाठ बॉक्स के आईडी समारोह updateCharsLeft() पर पारित किए जाने की आवश्यकता है। यह उस फ़ंक्शन में टेक्स्टबॉक्स की आईडी से आईडी निकालने के लिए चूसना होगा, इसलिए यह वास्तव में HTML कोड के भीतर ईवेंट हैंडलर को डालने के लिए क्लीनर होगा।

विचार?

Answer 1

मुझे पहले कुछ ऐसा करना पड़ा था और आईडी विशेषता के मूल्य को पार्स करने से भी खुश नहीं था।

<input type='text' id='title_33' class='title' myval='33' /> 

:

<input type='text' id='title_33' class='title' rel='33' /> 

या कैसे धार्मिक आप सत्यापन के बारे में कर रहे हैं पर निर्भर करता है, बस एक कस्टम विशेषता का उपयोग करें: सबसे अच्छी बात मैं कर सकते हैं सुझाव है कि आप मूल्य आप की जरूरत के लिए एक और विशेषता का उपयोग, rel विशेषता की तरह है

Answer 2

आप यह कर सकता नहीं:

$(document).ready(function() 
    { 
    $(".title").focus(function() { 
     updateCharsLeft(this.id); 
    }); 
    $(".title").keypress(function() { 
     updateCharsLeft(this.id); 
    }); 
); 

या अधिक बड़े करीने से:

$(document).ready(function() 
    { 
    $(".title .another .someother .andAnother").focus(function() { 
     updateCharsLeft(this.id); 
    }).keypress(function() { 
     updateCharsLeft(this.id); 
    }); 
); 

Answer 3

मैं निश्चित रूप से लगता है कि आप अपने जावास्क्रिप्ट और HTML बांट देना चाहिए। यह ढूंढना/बनाए रखना आसान होगा, और आप 10 के बजाय एक स्थान संपादित कर सकते हैं। अपने आप को दोहराना न करें।

मैं jQuery की लाइव कार्यक्षमता का उपयोग करने में देखता हूं। यदि आपके पास 10 टेक्स्ट इनपुट हैं, तो आप 20 ईवेंट हैंडलर को इस तरह से जोड़ते हैं (पृष्ठ पर प्रत्येक फोकस हैंडलर के लिए और पृष्ठ पर प्रत्येक कुंजीपटल हैंडलर के लिए)।

करीम पर भी आपकी टिप्पणी फिर से करें, मुझे नहीं लगता कि आप खुद को डुप्लिकेट क्यों करेंगे। आईडी को पास करने या इसे नियमित रूप से अभिव्यक्ति के साथ बदलने के लिए तुच्छ होना चाहिए, जब तक कि आपके नामकरण सम्मेलन में आपका संगत न हो, उदाहरण के लिए, this.id.replace(/.*(\d+)$/,'')। हालांकि, यह संभवतः प्रत्यक्ष डीओएम तत्व संदर्भ को पारित करने के लिए बेहतर होगा, और इसके साथ आपके कार्य में काम करेगा।

आखिरकार, आपको लगता है कि इसका कुछ पहलू चूस जाएगा। हो सकता है कि मैं इस बिंदु को याद कर रहा हूं, लेकिन क्या आप स्पष्ट कर सकते हैं कि आईडी या डीओएम संदर्भ को मुख्य रूप से अपनाने के बारे में क्या मुश्किल है या आपको जो कुछ भी करने की ज़रूरत है? हो सकता है कि आप आगे क्या कर रहे हैं उसके बारे में एक लंबा कोड नमूना पोस्ट करें।

Answer 4

मैं एक ही जावास्क्रिप्ट ब्लॉक से सभी घटनाओं को प्रबंधित करने का प्रयास करूंगा। जब तक आप पृष्ठ पर तत्वों का संदर्भ देने में सक्षम होते हैं, यह संभव होना चाहिए।

Answer 5

आप मूल्य को पार्स करने और इसे पास करने के लिए हमेशा स्ट्रिंग फ़ंक्शंस का उपयोग कर सकते हैं, उदा।

$(".title").focus(function() { 
    var thisid = this.id; 
    updateCharsLeft(thisid.substring(thisid.indexOf("_") + 1)); 
}); 

मुझे यकीन नहीं है कि प्रदर्शन प्रभाव क्या होगा यदि आपको कई तत्वों के लिए ऐसा करना था।

Answer 6

तुम सच में this.Id पारित करने के लिए तो आप इनपुट टैग के लिए एक कस्टम विशेषता जोड़ सकते हैं ...

<input type='text' id='title_33' idSuffix='33' class='title'/> 

फिर आप इस तरह ईवेंट हैंडलर्स सेट नहीं करना चाहते हैं ...

$(document).ready(function() 
{ 
    $(".title").focus(function() { 
     updateCharsLeft(this.idSuffix); 
    }); 
    $(".title").keypress(function() { 
     updateCharsLeft(this.idSuffix); 
    }); 
); 

मुझे व्यक्तिगत रूप से कस्टम विशेषताओं पसंद हैं। वे एचटीएमएल टैग कस्टम मेटाडेटा देने और मार्कअप में इसे रखने के लिए एक तरीका प्रदान करते हैं। हालांकि एचटीएमएल सत्यापनकर्ता उन्हें पसंद नहीं है

Answer 7

$(document).ready(function(){ 
    var update = function(){ updateCharsLeft(this.id.split("_")[1]); }; 
    $("input.title") 
     .focus(update) 
     .keypress(update); 
}); 

Answer 8

:-(यह वास्तव में क्या Unobtrusive Javascript technique पर केंद्रित है।