Javascript. Наследование метода, изменение

258

17 апреля 2017, 05:29

Изучаю тонкости ООП в Javascript.

В этом коде при щелчке по списку, копируется текст в вышестоящий input:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> <title>События</title> 
<style> 
div, input {box-sizing:border-box; outline:none; width:150px;} .listBox, input {border:1px solid #ccc;} .listBox div:hover {background:#f0f0f0;} 
</style> 
</head> 
<body> 
<div id="s1"> 
  <input value="" readonly> 
  <div class="listBox"> 
    <div>Автомобили</div> <div>Компьютеры</div> <div>Бытовая техника</div> 
  </div> 
</div> 
<br> 
<button onclick="getValue()">Прочитать value из объека</button> 
<script> 
function mySelect(idx) { 
  var el = document.getElementById(idx); 
  var inp = el.children[0], listBox = el.querySelector('.listBox'); 
  this.onChangeValue = listBox.onclick = function(e) { 
    inp.value = e.target.textContent; 
    console.log('сообщение из mySelect'); 
  } 
  this.text = function() {return inp.value}; 
} 
 
var s1 = new mySelect('s1'); 
function getValue() {console.log(s1.text());}//OK 
 
var parentChange = s1.onChangeValue; 
s1.onChangeValue = function(e) {// неудачная попытка 
  parentChange.call(this); 
  console.log('сообщение из внешнего мира'); 
}; 
</script> 
</body> 
</html>

Свойство text успешно вытаскивается из объекта через s1.text(). Хочется сделать нечто похожее и для метода onChangeValue.

Вопрос: как сделать так, чтобы отловить изменение текста в input ?
Т.е. я щелкаю по элементу списка, и кроме фразы "сообщение из mySelect" должна ещё появляться фраза "сообщение из внешнего мира"

Answer 1

ммм... если я верно тебя понял и если принять во внимание, что

The change event is fired for input, select, and textarea elements when a change to the element's value is committed by the user.

то чтобы сделать то, что ты хочешь, тебе надо реализовать свою систему событий с использованием паттернов pubslish/subscribe или observer например. И тогда ты будешь сам вручную запускать своё событие (и активировать тем самым назначенный обработчик), как только ты поменяешь значение в инпуте. Я бы так сделал.