How to use onchange, onmouseup event in codemirror text editor

Question

I am using my text editor as codemirror. Normally when I try to use dom event like onmouseup, onchange, oninput in textarea it works, but after integrating the codemirror, it is not working. Please tell me the correct way to invoke these events in my text editor.

Without codemirror, it works.

<textarea id="editor" rows="30" cols="100" onchange="myFunction()" onmouseup="second();"></textarea>        
<div id="demo"></div>
<div id="second"></div> 
<script>
  function myFunction() {
       document.getElementById('demo').innerHTML="The onchange function..";}    
  function second() {
       document.getElementById('second').innerHTML="The mouseup function..";}
</script>       

On integrating codemirror text editor, it is not working. Here is a code:

<textarea id="editor" onchange="myFunction()" onmouseup="second();"></textarea>
<div id="demo"></div>
<div id="second"></div> 
<script>
    var editor = CodeMirror.fromTextArea
    (document.getElementById('editor'),{
            mode:"text/x-java",
            lineNumbers:true,
            autoCloseTags:true,
            tabSize:5       
    });
    editor.setSize("1000", "450");              
    </script>       
    <script>
    function myFunction() {
          document.getElementById('demo').innerHTML="The onchange function..";}         
    function second() {
         document.getElementById('second').innerHTML="The mouseup function..";}

    </script>

Answer 1

Because those events are not actually taking place on the textarea since it is hidden, rather, you will need to bind the events to the .CodeMirror element like so:

$(document).on('mouseup', '.CodeMirror', function() {
    // do something...
});
$(document).on('change', '.CodeMirror', function() {
    // do something...
});

Also, I use keyup rather than a change event because you have to click out of the .CodeMirror to make the change function run...