jquery - Trigger event on new line in content editable div -

i trying listen event indicates new line has been created in content editable div. purpose show user options each time new empty line created , caret on line, or if user clicks caret position empty line.

in book there seem 4 events lead user being on new line within contentediable div:

• pressing enter
• pasting content has empty new line @ end
• clicking causing caret (blinking line) move position empty line
• using arrow keys move new line

of course in contentediable div new line means different things different browsers, in chrome seems create <div><br/></div> tags, having browsed around enough seems other browsers might create <div><p></p></div> or perhaps <span> tags.

i've tried figure out couple of times , have done. best way listen new elements being added under div, and/or check if caret position within empty 'new line' tags. checking each time caret moves seems highly inefficient - there better way this?

to summarise tldr; people

• is there better way check new lines in content editable divs?
• how trigger event based upon efficiently?

just fyi within angular context , have jquery (the answer can choose use or not use these libraries).

----- edit -----

so far answers have focused on creation of new line 'events' , monitoring events, perhaps polling caret position more reliable way determine if caret on empty line or not.

the other answers far discussed monitoring events create newline within content editable div. efforts far seems not reliable way monitor if user has brought caret @ new line.

despite concerns having setinterval event clunky , adding overhead, perhaps perception. i've tested below in firefox , chrome on osx.

function getnewlines() {    console.log(document.getselection());    if (document.getselection().anchornode) {      var node = document.getselection().anchornode;      var nodecontents = "";      if (node.innerhtml) {        nodecontents = node.innerhtml.tolowercase();      } else {        nodecontents = node.innerhtml;      }      if (nodecontents !== undefined) {        if (nodecontents === "" || nodecontents == "<br>" || nodecontents ==          "<br/>" || nodecontents.substr(nodecontents.length - 5) == "<br/>" ||          nodecontents.substr(nodecontents.length - 4) == "<br>") {          console.log("you on new line :]");        } else {          console.log('nope not new line');        }      } else {        console.log('nice try, no not new line');      }    }  }  setinterval(getnewlines, 100);

<div contenteditable="true">    <p>lets started!</p>  </div>

see fiddle here

side-note: behaviour of newlines in content editable seems varied, noted in firefox mimic existing elements in field. ie if using <div></div>, firefox use <div></div>, if using <p></p> firefox same