Для чего мы пишем this.scrollTop = this.scrollHeight, еще и 3 раза?

Question

[olya_097]

<textarea rows="8" cols="40" id="area">Кликни меня
</textarea>

<script>
  area.onmousedown = function(e) { this.value += "mousedown\n"; this.scrollTop = this.scrollHeight; };
  area.onmouseup = function(e) { this.value += "mouseup\n"; this.scrollTop = this.scrollHeight; };
  area.onclick = function(e) { this.value += "click\n"; this.scrollTop = this.scrollHeight; };
</script>

Answer 1

[SagePtr]

В данном случае - это рукожопие автора, который не знает принцип DRY. Ибо в данной задаче можно одной функцией обойтись. А this.scrollTop = this.scrollHeight просто присваивает положению прокрутки элемента полную высоту содержимого, что прокрутит этот элемент до самого низа. Но и тот код вычисляет положение неправильно, правильнее будет, конечно же
this.scrollTop = this.scrollHeight - this.clientHeight

Answer 2

[frees2]

mousedown-mouseup
Как это объяснялось, уже не помню, то ли задержкой мыши, то ли разными браузерами.
Рукожопие это последняя ступенька поиска, как правило скрипты берут откуда то.
The definition of a click depends on the environment configuration; i.e. it may depend on the screen location or the delay between the press and release of the pointing device button. In any case, the event target must be the same between the mousedown, mouseup, and click.
#event-click

Answer 3

[Павел Корнилов]

<textarea rows="8" cols="40" id="area">Кликни меня
</textarea>

<script>
  area.onmousedown = function(e) { this.value += "mousedown\n";};
  area.onmouseup = function(e) { this.value += "mouseup\n";};
  area.onclick = function(e) { this.value += "click\n"; this.scrollTop = this.scrollHeight; };
</script>

Код позволяет прокрутить textarea к последнему введённому значению. Демонстрирует порядок срабатывания обработчиков.