onKeyUp bez jQuery?

Question

Próbuję przechwycić onKeyUp po naciśnięciu Enter bez użycia jQuery.

Mój obecny kod jest:

$('#chatboxtextarea').on('keyup', function (e) { 
     var msg = document.getElementById('chatboxtextarea').value; 
     if (msg.replace(/\r/g, '\\\\r').replace(/\n/g, '') != "" && e.keyCode == 13) { 
      var textarea = document.getElementById('chatboxtextarea'); 
      textarea.value = ''; 

      .....code to send..... 


     } else if (msg.replace(/\r/g, '\\\\r').replace(/\n/g, '') == '') { 
      var textarea = document.getElementById('chatboxtextarea'); 
      textarea.value = ''; 
     } 
    }); 

Jak można to zrobić w regularnych JavaScriptu zamiast?

Answer 1

prostu:

document.getElementById('chatboxtextarea').onkeyup = function (e) { 
    e = e || window.event; 
    var textarea = this; 
    var msg = textarea.value; 
    if (msg.replace(/\r/g, '\\\\r').replace(/\n/g, '') != "" && e.keyCode == 13) { 
     textarea.value = ''; 

     .....code to send..... 

    } else if (msg.replace(/\r/g, '\\\\r').replace(/\n/g, '') == '') { 
     textarea.value = ''; 
    } 
}; 

edit:

Alternatywnie można nazwać coś jak poniżej, aby dodać zdarzenie; przekazując obiekt elementu, typ zdarzenia (bez „on”), funkcja, aby zadzwonić i czy używać przechwytywania, po prostu wykorzystują różne metody przeglądarki:

function addEvent(elm, evType, fn, useCapture) { 
    if (elm.addEventListener) { 
    elm.addEventListener(evType, fn, useCapture); 
    } 
    else if (elm.attachEvent) { 
    elm.attachEvent('on' + evType, fn); 
    } 
    else { 
    elm['on' + evType] = fn; 
    } 
}; 

tj:

addEvent(document.getElementById('chatboxtextarea'), 'keyup', 
    function(e) { 
    e = e || window.event; 
    ... 
    }, false); 

Answer 2

jQuery wykonuje wewnętrznie skomplikowany kod, który trudno byłoby naśladować po prostu. Jeśli chcesz tylko powiązać to samo wydarzenie z danym identyfikatorem, nie jest tak źle.

Aby wybrać element:

document.getElementById('chatboxtextarea') 
document.querySelector('#chatboxtextarea') 
document.querySelectorAll('#chatboxtextarea')[0] 

Do mocowania zdarzenie:

.addEventListener('keyup', function (e) { 

Dla IE8-, należy użyć .attachEvent, ale nie jest to dokładny analogowego. W przypadku starszych przeglądarek użyj atrybutu .onkeyup.