addEventListener - αλλαγή σειράς εκτέλεσης

Κώδικας, πληροφορίες, ερωτήσεις και απαντήσεις σχετικές με την JavaScript.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
Pavel
Honorary Member
Δημοσιεύσεις: 1046
Εγγραφή: 08 Αύγ 2003 00:05
Τοποθεσία: UK

addEventListener - αλλαγή σειράς εκτέλεσης

Δημοσίευση από Pavel » 15 Ιουν 2013 22:29

Καλησπέρα.

Έστω πως έχουμε ένα element που με την χρήση addEventListener έχει συναρτήσεις που θα εκτελεστούν στο onkeydown. Δεν μπορώ να πειράξω τον υπάρχοντα κώδικα (πχ να βάλω το δικό μου addEventListener πριν τα άλλα).

Θέλω να προσθέσω και ένα δικό μου αλλά να το ορίσω να εκτελείται πριν από τα υπάρχοντα.

Έχω φάει τον τόπο αλλά δεν βρίσκω τρόπο να το κάνω.

Έχει κανείς καμία ιδέα;
Εσύ είσαι τρελός.

nbc
Honorary Member
Δημοσιεύσεις: 526
Εγγραφή: 05 Σεπ 2009 20:12
Επικοινωνία:

addEventListener - αλλαγή σειράς εκτέλεσης

Δημοσίευση από nbc » 16 Ιουν 2013 12:17

Από την περιγραφή σου, δεν μου είναι σαφές ποιες ακριβώς δυνατότητες επέμβασης έχεις. Μπορείς να προσθέσεις τη δική σου javascript αλλά πως; απευθείας στο markup/έξοδο η μέσω κάποιου μηχανισμού hook;

Υποθέτω πως γράφοντας "addEventListener" περιλαμβάνεις και την attachEvent, μιας και η πρώτη είναι διαθέσιμη από τον IE9 κι έπειτα. Υποθέτω, επίσης, πως δεν χρησιμοποιείς κάποιο framework, όπως jQuery.

1. Αν έχεις δυνατότητα επέμβασης στο <head> της εξόδου, μπορείς βεβαίως να καλέσεις το δικό σου script πρώτο.

2. Αν έχεις δυνατότητα επέμβασης στο <body> της εξόδου, θα εκπλαγείς ευχάριστα μαθαίνοντας πως ο legacy (inline) τρόπος event registration (... onkeydown="myFunc()"), για κάποιο λόγο, έχει προτεραιότητα σε ΙΕ7+, FF και Chrome που δοκίμασα.

3. Διαφορετικά, μπορείς (?) να "εξαφανίσεις" το element, ρίχνοντας το δικό σου από πάνω, με συνέπεια τον πλήρη έλεγχο. Αυτή η λύση χρησιμοποιείται ευρέως για restyling του file input button, υλοποίηση auto-complete/suggest select boxes, Κλπ.

4. Τέλος, αν σου είναι γνωστοί οι υπάρχοντες event listeners, θα μπορούσες να κάνεις χρήση της removeEventListener/detachEvent και να τους προσθέσεις εκ των υστέρων.

Είναι προφανές πως η 2) είναι η ευκολότερη λύση, αρκεί να έχεις αυτήν τη δυνατότητα.

Άβαταρ μέλους
Pavel
Honorary Member
Δημοσιεύσεις: 1046
Εγγραφή: 08 Αύγ 2003 00:05
Τοποθεσία: UK

addEventListener - αλλαγή σειράς εκτέλεσης

Δημοσίευση από Pavel » 16 Ιουν 2013 12:48

Η μοναδική επέμβαση που μπορώ κάνω είναι να προσθέσω δυναμικά το δικό μου .js αρχείο ΑΦΟΥ έχουν φορτωθεί όλα τα υπόλοιπα.

Ισχύει πως περιλαμβάνω και την attachEvent. Οποιαδήποτε λύση είναι αποδεκτή ακόμη και αν είναι browser-specific ή αν χρειαστεί να χρησιμοποιήσω οποιοδήποτε library (jQuery κ.α.)

1. Δυστυχώς δεν μπορώ.
2. Το έχω δοκιμάσει αλλά παρ' όλα αυτά εξακολουθεί να κάνει το ίδιο.
3/4. Αυτό δεν μπορώ να το κάνω επειδή μόνο για να βρω τι κάνει attach θα μου πάρει πολύ χρόνο (το framework είναι πολύπλοκο) - εκτός αν γνωρίζεις κάποιον εύκολο τρόπο να εντοπίσω τα attached events.

Για να γίνω λίγο πιο συγκεκριμένος, αναφέρομαι σε ένα textarea το οποίο όταν ο χρήστης πατάει ENTER, στέλνει το κείμενο αλλού. Εγώ θέλω ΠΡΙΝ στείλει το κείμενο να προσθέσω κάτι σε αυτό. Αλλά ακόμη και την πιο απλή συνάρτηση να κάνω hook, να εμφανίζει ένα alert, μέχρι να το εμφανίσει το κείμενο έχει ήδη σταλεί. Έχω ψάξει και το bubbling, preventDefault, preventPropagation αλλά τίποτα :(
Εσύ είσαι τρελός.

nbc
Honorary Member
Δημοσιεύσεις: 526
Εγγραφή: 05 Σεπ 2009 20:12
Επικοινωνία:

addEventListener - αλλαγή σειράς εκτέλεσης

Δημοσίευση από nbc » 16 Ιουν 2013 14:08

Το 4, συμφωνώ πως είναι μπελάς... Το ανέφερα ως θεωρητική έστω λύση. Γιατί όμως το συνδέεις με το 3; Είναι εντελώς διαφορετική περίπτωση.

Όλοι οι editors που γνωρίζω, WYSIWYG είτε code, χρησιμοποιούν αυτήν τη μέθοδο: της επικάλυψης, δηλαδή, υπάρχοντος textarea με div. Μήπως στην εφαρμογή σου συμβαίνει ήδη, άρα μιλάς για editor interface και όχι απλό textarea;

Αν αυτό ισχύει, τότε έχεις πρόβλημα. Όχι πως δεν υπάρχει λύση, απλά παύει να είναι γενική. Χωρίς γνώση του framework που χρησιμοποιείς είναι αδύνατον να σου προτείνει κανείς το οτιδήποτε.

Αν δεν ισχύει, δηλαδή πρόκειται για καθαρού textarea (το οποίο εξακολουθεί να έχει focus σε runtime και δεν επισκιάζεται με άλλο control) τότε εξακολουθώ να νομίζω πως τόσο το 3 (που δεν σχολίασες) όσο και το 2 (που δοκίμασες ανεπιτυχώς) έχουν μεγάλη πιθανότητα να σε καλύψουν.

Παραθέτω δοκιμαστικό κώδικα για τη λύση 2, απλά και μόνο για να βεβαιωθούμε πως αναφερόμαστε στο ίδιο πράγμα :D. Αν βρω χρόνο, θα ανεβάσω κάτι και για τη λύση 3.

Κώδικας: Επιλογή όλων

<!DOCTYPE html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>addEventListener</title>

<!-- OLD -->

<script>
function addText&#40;el, txt&#41;
&#123;
    el.value = el.value+txt;
&#125;
function oldStuff&#40;&#41;
&#123;
    var el = document.getElementById&#40;"test"&#41;;
    
    el.addEventListener&#40;"keydown", function&#40;&#41;&#123;addText&#40;el,'1'&#41;;&#125;, false&#41;;
    el.addEventListener&#40;"keydown", function&#40;&#41;&#123;addText&#40;el,'2'&#41;;&#125;, false&#41;;
    el.addEventListener&#40;"keydown", function&#40;&#41;&#123;addText&#40;el,'3'&#41;;&#125;, false&#41;;
    
&#125;
</script>

<!-- NEW -->

<script>
function newStuff&#40;&#41;
&#123;
    var el = document.getElementById&#40;"test"&#41;;
    
    addText&#40;el,'0'&#41;;
&#125;
</script>

</head>

<body onload="oldStuff&#40;&#41;;">
    <textarea name="test" id="test" onkeydown="newStuff&#40;&#41;;"></textarea>
</body>

</html>


Άβαταρ μέλους
Pavel
Honorary Member
Δημοσιεύσεις: 1046
Εγγραφή: 08 Αύγ 2003 00:05
Τοποθεσία: UK

addEventListener - αλλαγή σειράς εκτέλεσης

Δημοσίευση από Pavel » 16 Ιουν 2013 14:37

Νομίζω πως θα ήταν καλύτερο εάν σου έλεγα ποιο textarea θέλω να κάνω hook :P

Εάν έχεις facebook, πήγαινε www.facebook.com/messages/ και διάλεξε ένα οποιοδήποτε conversation. Αυτό το textarea είναι ο στόχος μου.
Εσύ είσαι τρελός.

nbc
Honorary Member
Δημοσιεύσεις: 526
Εγγραφή: 05 Σεπ 2009 20:12
Επικοινωνία:

addEventListener - αλλαγή σειράς εκτέλεσης

Δημοσίευση από nbc » 16 Ιουν 2013 15:11

Ωχ, έπεσες στην περίπτωση... Δεν χρησιμοποιώ FB, οπότε ας αναλάβει άλλος :oops:

Απλά, επειδή το υποσχέθηκα, ανεβάζω κώδικα για την περίπτωση #3. Πιθανότατα δεν θα σου χρειαστεί αλλά μιας και τον έφτιαξα...

Αυτό που δείχνει ο κώδικας είναι πως δεδομένου ενός textarea, το οποίο έχει του κόσμου τα hooks, εμείς ρίχνουμε ένα άλλο πάνω του και κάνουμε ότι θέλουμε.

Κώδικας: Επιλογή όλων

<!DOCTYPE html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>addEventListener</title>

<script src="http&#58;//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<!-- OLD -->

<script>
function addText&#40;el, txt&#41;
&#123;
    el.value = el.value+txt;
&#125;
function oldStuff&#40;&#41;
&#123;
    var el = document.getElementById&#40;"test"&#41;;
    
    el.addEventListener&#40;"keydown", function&#40;&#41;&#123;addText&#40;el,'1'&#41;;&#125;, false&#41;;
    el.addEventListener&#40;"keydown", function&#40;&#41;&#123;addText&#40;el,'2'&#41;;&#125;, false&#41;;
    el.addEventListener&#40;"keydown", function&#40;&#41;&#123;addText&#40;el,'3'&#41;;&#125;, false&#41;;
    
&#125;
</script>

<!-- NEW -->

<script>
jQuery&#40;document&#41;.ready&#40;function&#40;$&#41;
&#123;
    $&#40;"#capture"&#41;.click&#40;function&#40;e&#41;
    &#123;
        var $text  = $&#40;'#test'&#41;;
        $text.before&#40;$&#40;'<textarea />'&#41;&#41;;
        var $copy  = $text.prev&#40;&#41;;
        var styles =     
        &#123;
            border &#58; &#91;&#91;'Top','Right','Bottom','Left' &#93;,&#91;'Width','Style','Color'&#93;&#93;,
            margin &#58; &#91;'Top' ,'Right','Bottom','Left' &#93;,
            padding&#58; &#91;'Top' ,'Right','Bottom','Left' &#93;,
            font   &#58; &#91;'Size','Style','Family','Width'&#93;,
            single &#58; &#91;'lineHeight','textAlign','verticalAlign','outline','width','height'&#93;
        &#125;;
    
        copyStyles&#40;styles, $text, $copy&#41;;
        
        $copy.css&#40;'position', 'absolute'&#41;.val&#40;$text.val&#40;&#41;&#41;.focus&#40;&#41;;
        
        $&#40;e.target&#41;.hide&#40;&#41;;
        
        return false;
        
        //
        
        function copyStyles&#40;styles, $from, $to&#41;
        &#123;
            $.each&#40;styles, function&#40;k,v&#41;
            &#123;
                if &#40;v.length == 2&#41;
                &#123;
                    for &#40;var i=0; i < v&#91;0&#93;.length; i++&#41;
                    &#123;
                        for &#40;var j=0; j < v&#91;1&#93;.length; j++&#41;
                        &#123;
                            prop = k+v&#91;0&#93;&#91;i&#93;+v&#91;1&#93;&#91;j&#93;; 
                            $to.css&#40;prop, $from.css&#40;prop&#41;&#41;;
                        &#125;
                    &#125;
                &#125;
                else
                &#123;
                    for &#40;var i=0; i < v.length; i++&#41;
                    &#123;
                        prop = &#40;k=='single'&#41; ? v&#91;i&#93; &#58; k+v&#91;i&#93;;
                        $to.css&#40;prop, $from.css&#40;prop&#41;&#41;;
                    &#125;
                &#125;
            &#125;&#41;;
        &#125;;
    &#125;&#41;;
&#125;&#41;;
</script>

</head>

<body onload="oldStuff&#40;&#41;;">
    <textarea name="test" id="test"></textarea>
    
    <p><a href="" id="capture">Click to capture!</a></p>
</body>

</html>


Άβαταρ μέλους
Pavel
Honorary Member
Δημοσιεύσεις: 1046
Εγγραφή: 08 Αύγ 2003 00:05
Τοποθεσία: UK

addEventListener - αλλαγή σειράς εκτέλεσης

Δημοσίευση από Pavel » 16 Ιουν 2013 15:33

Θα δοκιμάσω αυτό που έφτιαξες και αν δουλέψει θα σε ενημερώσω :D

Ευχαριστώ :)
Εσύ είσαι τρελός.

circadian
Δημοσιεύσεις: 20
Εγγραφή: 10 Οκτ 2008 14:33

addEventListener - αλλαγή σειράς εκτέλεσης

Δημοσίευση από circadian » 16 Ιουν 2013 15:42

ισως αυτό μπορεί να σε βοηθήσει

http://stackoverflow.com/questions/6029 ... re-another

Άβαταρ μέλους
Pavel
Honorary Member
Δημοσιεύσεις: 1046
Εγγραφή: 08 Αύγ 2003 00:05
Τοποθεσία: UK

addEventListener - αλλαγή σειράς εκτέλεσης

Δημοσίευση από Pavel » 16 Ιουν 2013 15:45

Το έχω δοκιμάσει αυτό αλλά πάλι δεν λειτούργησε.
Εσύ είσαι τρελός.

Απάντηση

Επιστροφή στο “JavaScript και Frameworks”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες