События | JavaScript

http://www.w3.org/TR/DOM-Level-3-Events/#event-interfaces

Клик JS

Записи равнозначны и показывают как назначить событию обработчик (функцию) на примере события click

<input value="Нажать" onclick="alert('клик')" type="button"/>

<input value="Нажать" onclick="raz()" type="button"/>

<script>
function raz() {
    alert('клик');
}
</script>

<input value="Нажать" id="dva" type="button"/>

<script>
document.getElementById('dva').onclick = function() {
    alert('клик');
}
</script>

<input value="Нажать" id="dva" type="button"/>

<script>
document.getElementById('dva').onclick = function() {
    raz();
}
function raz() {
    alert('клик');
}
</script>

<input value="Нажать" id="dva" type="button"/>

<script>
document.getElementById('dva').onclick = raz;
function raz() {
    alert('клик');
}
</script>

<input value="Нажать" id="dva" type="button"/>

<script>
document.getElementById('dva').addEventListener("click", function() {
    alert('клик');
});
</script>

<input value="Нажать" id="dva" type="button"/>

<script>
document.getElementById('dva').addEventListener("click", raz);
function raz() {
    alert('клик');
}
</script>

Аргументы, передающиеся в обработчик событий

<input value="Нажать" onclick="raz(1, 2)" type="button"/>

<script>
function raz(a, b) {
    alert(a + b);
}
</script>

this

<!--
this указывает на текущий элемент, как document.getElementById()
две записи ниже равнозначны
-->

<input value="Нажать" onclick="alert(this.value)" type="button"/>

<input value="Нажать" id="dva" onclick="alert(document.getElementById('dva').value)" type="button"/>

<input value="Нажать" onclick="raz(this)" type="button"/>

<script>
function raz(e) {
    alert(e.value);
}
</script>

<input value="Нажать" id="dva" type="button"/>

<script>
document.getElementById('dva').onclick = function() {
    alert(this.value);
}
</script>

<input value="Нажать" id="dva" type="button"/>

<script>
document.getElementById('dva').onclick = function() {
    raz(this);
}
function raz(e) {
    alert(e.value);
}
</script>

<input value="Нажать" id="dva" type="button"/>

<script>
document.getElementById('dva').onclick = this.raz;  // если разместить JS после HTML-элемента
function raz() {
    alert(this.value);
}
</script>

<input value="Нажать" id="dva" type="button"/>

<script>
document.getElementById('dva').addEventListener("click", function() {
    alert(this.value);
});
</script>

<input value="Нажать" id="dva" type="button"/>

<script>
document.getElementById('dva').addEventListener("click", function() {
    raz(this);
});
function raz(e) {
    alert(e.value);
}
</script>

<input value="Нажать" id="dva" type="button"/>

<script>
document.getElementById('dva').addEventListener("click", this.raz);  // если разместить JS после HTML-элемента
function raz() {
    alert(this.value);
}
</script>

event

<!-- event.currentTarget имеет тоже значение, что this -->

<input value="Нажать" onclick="alert(event.currentTarget.value)" type="button"/>

<input value="Нажать" onclick="raz(event, this, 2)" type="button"/>

<script>
function raz(e, a, b) {
    alert(e.currentTarget.value + '=' + a.value + ' ' + b*3 + ' всего аргументов: ' + arguments.length);
}
</script>

<input value="Нажать" id="dva" type="button"/>

<script>
document.getElementById('dva').onclick = function(e) {
    alert(e.currentTarget.value);
}
</script>

<input value="Нажать" id="dva" type="button"/>

<script>
document.getElementById('dva').onclick = raz;
function raz(e) {
    alert(e.currentTarget.value);
}
</script>

<input value="Нажать" id="dva" type="button"/>

<script>
document.getElementById('dva').addEventListener("click", raz);
function raz(e) {
    alert(e.currentTarget.value);
}
</script>

<!-- объект event имеет несколько свойств -->

<input value="Нажать" id="dva" type="button"/>

<script>
document.getElementById('dva').addEventListener("click", raz);
function raz(e) {
  var all = '';
  for(var i in e) {
      all += i + ' = "' + e[i] + '";\n'
  }
  alert(all);
}
</script>

<!-- подробнее про координаты курсора -->

<!--
e.target позволяет понять на какой вложенный элемент был сделан клик в пределах кнопки e.currentTarget
если на участке, по которому щёлкнули, нет вложенного элемента, то e.target совпадает с e.currentTarget: то есть можно отключить срабатывание события на вложенном элементе
-->

<div id="dva">Нажить на <b>жирный участок <code>&lt;div&gt;</code></b></div>

<script>
document.getElementById('dva').addEventListener("click", raz);
function raz(e) {
  alert(e.target.innerHTML);
}
</script>