<input type="text" />
<div></div>

let content = [];
let container = document.querySelector('div');

document.querySelector('input').addEventListener('input', () => {
  showContent('input');
});
document.querySelector('input').addEventListener('compositionstart', () => {
  showContent('composition start');
});
document.querySelector('input').addEventListener('compositionend', () => {
  showContent('composition end');
});
2
function showContent(log) {
  content.push(log);
  content.push('<br>');
  container.innerHTML = content.join('');
}