你可以在HTML标签的onclick上使用“this”属性吗？

Question

Can you use the this tag for the onclick on an HTML tag? Here's my JS code...

function changeImage() {
    this/*<-- right there <--*/.src=a;
}
document.getElementsByTagName('img').onclick = function(){ 
    changeImage();
} ;

Am I doing something wrong?

Answer 1

Use it this way...

function changeImage(curr) {
    console.log(curr.src);
}
document.getElementsByTagName('img').onclick = function(){ 
    changeImage(this);
} ;

Answer 2

You could use the .call() method to invoke the function with the context of this .

In this case, you would use:

changeImage.call(this)

Example Here

function changeImage() {
    this.src = 'http://placehold.it/200/f00';
}
document.getElementsByTagName('img')[0].onclick = function(){ 
    changeImage.call(this);
};

As a side note, getElementsByTagName returns a live HTMLCollection of elements. You need to apply the onclick handler to an element within that collection.

If you want to apply the event listener to the collection of elements, you iterate through them and add event listeners like this:

Updated Example

function changeImage() {
    this.src = 'http://placehold.it/200/f00';
}

Array.prototype.forEach.call(document.getElementsByTagName('img'), function(el, i) {
    el.addEventListener('click', changeImage);
});

Or you could simplify it:

Example Here

Array.prototype.forEach.call(document.getElementsByTagName('img'), function(el, i) {
    el.addEventListener('click', function () {
        this.src = 'http://placehold.it/200/f00';
    });
});

Answer 3

You are doing two things wrong.

1. You are assigning the event handler to a NodeList instead of to an element (or set of elements)
2. You are calling changeImage without any context (so this will be undefined or window depending on if you are in strict mode or now).

A fixed version would look like this:

var images = document.getElementsByTagName('img');
for (var i = 0; i < images.length; i++) {
    images[i].onclick = function () {
        changeImage.call(this);
    };
}

But a tidier version would skip the anonymous function that does nothing except call another function:

var images = document.getElementsByTagName('img');
for (var i = 0; i < images.length; i++) {
    images[i].onclick = changeImage;
}

And modern code would use addEventListener .

var images = document.getElementsByTagName('img');
for (var i = 0; i < images.length; i++) {
    images[i].addEventListener('click', changeImage);
}

However, images are not interactive controls. You can't (by default) focus them, so this approach would make them inaccessible to people who didn't use a pointing device. Better to use controls that are designed for interaction in the first place.

Generally, this should be a plain button. You can use CSS to remove the default padding / border / background.

If you can't put a button in your plain HTML, you can add it with JS.

var images = document.getElementsByTagName('img');
for (var i = 0; i < images.length; i++) {
    var image = images[i];
    var button = document.createElement('button');
    button.type = "button";
    image.parentNode.replaceChild(button, image);
    button.appendChild(image);
    button.addEventListener('click', changeImage);
}

function changeImage(event) {
    this.firstChild.src = a;
}