Skip to main content
adicionou 52 caracteres ao conteúdo
Fonte Link
Sergio
  • 135,1mil
  • 16
  • 201
  • 294

Quando usar um ou outro depende do que se pretende.

Se usares por exemplo:

<div>
    <button onclick="clicaMe(event);">Clica-me!</button>
</div>

e no JavaScript

var el = document.querySelector('div');

function clicaMe(e) {
    console.log('inline this', this); // vai dar window
    console.log('inline e.target', e.target); // vai dar button
}
el.onclick = function (e) {
    console.log('onclick this', this); // vai dar el, ou seja "div"
    console.log('onclick e.target', e.target); // vai dar button
}
el.addEventListener('click', function (e) {
    console.log('event handler this', this); // vai dar el, ou seja "div"
    console.log('event handler e.target', e.target); // vai dar button
});

###jsFiddle: http://jsfiddle.net/2fqp1se6/

Repara que quando corres uma função via onclick inline no HTML o escopo do this vai ser window. Nos outros casos o this é o próprio elemento que recebeu o eventhandler ou onclick. O e.target é sempre o elemento concreto que recebeu o click, descendente do elemento ao qual foi amarrado o event handler caso o click tenha sido disparado nele.

Há um outro parâmetro a ter em conta: bubbling (ou propagação do evento).

Repara neste exemplo:

var el = document.querySelector('div');
var btn = document.querySelector('button');

el.addEventListener('click', function (e) {
    console.log('div this', this); // vai dar el, ou seja "div"
    console.log('div e.target', e.target); // vai dar button
});
btn.addEventListener('click', function (e) {
    console.log('button this', this); // vai dar el, ou seja "div"button
    console.log('button e.target', e.target); // vai dar button
});

###jsFiddle: http://jsfiddle.net/2fqp1se6/1/http://jsfiddle.net/2fqp1se6/2/

Neste caso ambos os event handlers são disparados pois uma vez que o button recebe o click ele propaga o evento para os elementos pai, e disparando os seus eventhandlers nesse caminho. Repara ainda que o eventhandler de btn dispara primeiro!.

Isto pode ser algo útil para distinguir entre this e e.target quando se quer saber em detalhe qual o elemento clicado.

Quando usar um ou outro depende do que se pretende.

Se usares por exemplo:

<div>
    <button onclick="clicaMe(event);">Clica-me!</button>
</div>

e no JavaScript

var el = document.querySelector('div');

function clicaMe(e) {
    console.log('inline this', this); // vai dar window
    console.log('inline e.target', e.target); // vai dar button
}
el.onclick = function (e) {
    console.log('onclick this', this); // vai dar el, ou seja "div"
    console.log('onclick e.target', e.target); // vai dar button
}
el.addEventListener('click', function (e) {
    console.log('event handler this', this); // vai dar el, ou seja "div"
    console.log('event handler e.target', e.target); // vai dar button
});

###jsFiddle: http://jsfiddle.net/2fqp1se6/

Repara que quando corres uma função via onclick inline no HTML o escopo do this vai ser window. Nos outros casos o this é o próprio elemento que recebeu o eventhandler ou onclick. O e.target é sempre o elemento concreto que recebeu o click, descendente do elemento ao qual foi amarrado o event handler caso o click tenha sido disparado nele.

Há um outro parâmetro a ter em conta: bubbling (ou propagação do evento).

Repara neste exemplo:

var el = document.querySelector('div');
var btn = document.querySelector('button');

el.addEventListener('click', function (e) {
    console.log('div this', this); // vai dar el, ou seja "div"
    console.log('div e.target', e.target); // vai dar button
});
btn.addEventListener('click', function (e) {
    console.log('button this', this); // vai dar el, ou seja "div"
    console.log('button e.target', e.target); // vai dar button
});

###jsFiddle: http://jsfiddle.net/2fqp1se6/1/

Neste caso ambos os event handlers são disparados pois uma vez que o button recebe o click ele propaga o evento para os elementos pai, e disparando os seus eventhandlers nesse caminho. Isto pode ser algo útil para distinguir entre this e e.target quando se quer saber em detalhe qual o elemento clicado.

Quando usar um ou outro depende do que se pretende.

Se usares por exemplo:

<div>
    <button onclick="clicaMe(event);">Clica-me!</button>
</div>

e no JavaScript

var el = document.querySelector('div');

function clicaMe(e) {
    console.log('inline this', this); // vai dar window
    console.log('inline e.target', e.target); // vai dar button
}
el.onclick = function (e) {
    console.log('onclick this', this); // vai dar el, ou seja "div"
    console.log('onclick e.target', e.target); // vai dar button
}
el.addEventListener('click', function (e) {
    console.log('event handler this', this); // vai dar el, ou seja "div"
    console.log('event handler e.target', e.target); // vai dar button
});

###jsFiddle: http://jsfiddle.net/2fqp1se6/

Repara que quando corres uma função via onclick inline no HTML o escopo do this vai ser window. Nos outros casos o this é o próprio elemento que recebeu o eventhandler ou onclick. O e.target é sempre o elemento concreto que recebeu o click, descendente do elemento ao qual foi amarrado o event handler caso o click tenha sido disparado nele.

Há um outro parâmetro a ter em conta: bubbling (ou propagação do evento).

Repara neste exemplo:

var el = document.querySelector('div');
var btn = document.querySelector('button');

el.addEventListener('click', function (e) {
    console.log('div this', this); // vai dar el, ou seja "div"
    console.log('div e.target', e.target); // vai dar button
});
btn.addEventListener('click', function (e) {
    console.log('button this', this); // vai dar button
    console.log('button e.target', e.target); // vai dar button
});

###jsFiddle: http://jsfiddle.net/2fqp1se6/2/

Neste caso ambos os event handlers são disparados pois uma vez que o button recebe o click ele propaga o evento para os elementos pai, e disparando os seus eventhandlers nesse caminho. Repara ainda que o eventhandler de btn dispara primeiro!.

Isto pode ser algo útil para distinguir entre this e e.target quando se quer saber em detalhe qual o elemento clicado.

adicionou 1291 caracteres ao conteúdo
Fonte Link
Sergio
  • 135,1mil
  • 16
  • 201
  • 294

Quando usar um ou outro depende do que se pretende.

Se usares por exemplo:

<div>
    <button onclick="clicaMe(event);">Clica-me!</button>
</div>

e no JavaScript

var el = document.querySelector('div');

function clicaMe(e) {
    console.log('inline this', this); // vai dar window
    console.log('inline e.target', e.target); // vai dar button
}
el.onclick = function (e) {
    console.log('onclick this', this); // vai dar el, ou seja "div"
    console.log('onclick e.target', e.target); // vai dar button
}
el.addEventListener('click', function (e) {
    console.log('event handler this', this); // vai dar el, ou seja "div"
    console.log('event handler e.target', e.target); // vai dar button
});

###jsFiddle: http://jsfiddle.net/2fqp1se6/

Repara que quando corres uma função via onclick inline no HTML o escopo do this vai ser window. Nos outros casos o this é o próprio elemento que recebeu o eventhandler ou onclick. O e.target é sempre o elemento concreto que recebeu o click, descendente do elemento ao qual foi amarrado o event handler caso o click tenha sido disparado nele.

Há um outro parâmetro a ter em conta: bubbling (ou propagação do evento).

Repara neste exemplo:

var el = document.querySelector('div');
var btn = document.querySelector('button');

el.addEventListener('click', function (e) {
    console.log('div this', this); // vai dar el, ou seja "div"
    console.log('div e.target', e.target); // vai dar button
});
btn.addEventListener('click', function (e) {
    console.log('button this', this); // vai dar el, ou seja "div"
    console.log('button e.target', e.target); // vai dar button
});

###jsFiddle: http://jsfiddle.net/2fqp1se6/1/

Neste caso ambos os event handlers são disparados pois uma vez que o button recebe o click ele propaga o evento para os elementos pai, e disparando os seus eventhandlers nesse caminho. Isto pode ser algo útil para distinguir entre this e e.target quando se quer saber em detalhe qual o elemento clicado.

Quando usar um ou outro depende do que se pretende.

Se usares por exemplo:

<div>
    <button onclick="clicaMe(event);">Clica-me!</button>
</div>

e no JavaScript

var el = document.querySelector('div');

function clicaMe(e) {
    console.log('inline this', this); // vai dar window
    console.log('inline e.target', e.target); // vai dar button
}
el.onclick = function (e) {
    console.log('onclick this', this); // vai dar el, ou seja "div"
    console.log('onclick e.target', e.target); // vai dar button
}
el.addEventListener('click', function (e) {
    console.log('event handler this', this); // vai dar el, ou seja "div"
    console.log('event handler e.target', e.target); // vai dar button
});

###jsFiddle: http://jsfiddle.net/2fqp1se6/

Quando usar um ou outro depende do que se pretende.

Se usares por exemplo:

<div>
    <button onclick="clicaMe(event);">Clica-me!</button>
</div>

e no JavaScript

var el = document.querySelector('div');

function clicaMe(e) {
    console.log('inline this', this); // vai dar window
    console.log('inline e.target', e.target); // vai dar button
}
el.onclick = function (e) {
    console.log('onclick this', this); // vai dar el, ou seja "div"
    console.log('onclick e.target', e.target); // vai dar button
}
el.addEventListener('click', function (e) {
    console.log('event handler this', this); // vai dar el, ou seja "div"
    console.log('event handler e.target', e.target); // vai dar button
});

###jsFiddle: http://jsfiddle.net/2fqp1se6/

Repara que quando corres uma função via onclick inline no HTML o escopo do this vai ser window. Nos outros casos o this é o próprio elemento que recebeu o eventhandler ou onclick. O e.target é sempre o elemento concreto que recebeu o click, descendente do elemento ao qual foi amarrado o event handler caso o click tenha sido disparado nele.

Há um outro parâmetro a ter em conta: bubbling (ou propagação do evento).

Repara neste exemplo:

var el = document.querySelector('div');
var btn = document.querySelector('button');

el.addEventListener('click', function (e) {
    console.log('div this', this); // vai dar el, ou seja "div"
    console.log('div e.target', e.target); // vai dar button
});
btn.addEventListener('click', function (e) {
    console.log('button this', this); // vai dar el, ou seja "div"
    console.log('button e.target', e.target); // vai dar button
});

###jsFiddle: http://jsfiddle.net/2fqp1se6/1/

Neste caso ambos os event handlers são disparados pois uma vez que o button recebe o click ele propaga o evento para os elementos pai, e disparando os seus eventhandlers nesse caminho. Isto pode ser algo útil para distinguir entre this e e.target quando se quer saber em detalhe qual o elemento clicado.

Fonte Link
Sergio
  • 135,1mil
  • 16
  • 201
  • 294

Quando usar um ou outro depende do que se pretende.

Se usares por exemplo:

<div>
    <button onclick="clicaMe(event);">Clica-me!</button>
</div>

e no JavaScript

var el = document.querySelector('div');

function clicaMe(e) {
    console.log('inline this', this); // vai dar window
    console.log('inline e.target', e.target); // vai dar button
}
el.onclick = function (e) {
    console.log('onclick this', this); // vai dar el, ou seja "div"
    console.log('onclick e.target', e.target); // vai dar button
}
el.addEventListener('click', function (e) {
    console.log('event handler this', this); // vai dar el, ou seja "div"
    console.log('event handler e.target', e.target); // vai dar button
});

###jsFiddle: http://jsfiddle.net/2fqp1se6/