Properly register and dispose of majority of remaining listeners

demo/main.js

@@ -219,14 +219,14 @@ function initOptions(term) {
   // Attach listeners
   booleanOptions.forEach(o => {
     var input = document.getElementById(`opt-${o}`);
-    input.addEventListener('change', () => {
+    addDomListener(input, 'change', () => {
       console.log('change', o, input.checked);
       term.setOption(o, input.checked);
     });
   });
   numberOptions.forEach(o => {
     var input = document.getElementById(`opt-${o}`);
-    input.addEventListener('change', () => {
+    addDomListener(input, 'change', () => {
       console.log('change', o, input.value);
       if (o === 'cols' || o === 'rows') {
         updateTerminalSize();
@@ -237,13 +237,18 @@ function initOptions(term) {
   });
   Object.keys(stringOptions).forEach(o => {
     var input = document.getElementById(`opt-${o}`);
-    input.addEventListener('change', () => {
+    addDomListener(input, 'change', () => {
       console.log('change', o, input.value);
       term.setOption(o, input.value);
     });
   });
 }
 
+function addDomListener(element, type, handler) {
+  element.addEventListener(type, handler);
+  term._core.register({ dispose: () => element.removeEventListener(type, handler) });
+}
+
 function updateTerminalSize() {
   var cols = parseInt(document.getElementById(`opt-cols`).value, 10);
   var rows = parseInt(document.getElementById(`opt-rows`).value, 10);