你能在HTML标签的onclick事件中使用"this"属性吗？

Question

您可以在 HTML 标记上使用 this 标签进行 onclick 吗？以下是我的 JS 代码...

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

我做错了什么吗？

- user3734304

---

不需要包装器；只需使用 document.getElementsByTagName('img').onclick = changeImage;。 - dandavis

Answer 1

使用方法如下...

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

- void

Answer 2

你可以使用.call()方法来调用函数并将上下文绑定到this。

在这种情况下，你需要使用：

changeImage.call(this)

这里有一个例子

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

作为一则旁注，getElementsByTagName 返回一个元素的实时 HTMLCollection。你需要将 onclick 处理程序应用于该集合内的元素。

如果要将事件监听器应用于元素集合，则需要通过迭代它们并像下面这样添加事件监听器：

更新示例

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

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

或者您可以简化它：

这里是示例

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

- Josh Crozier

---

但是怎么设置这个图像呢？变量 a 是所需的来源。 - user3734304

Answer 3

你做了两件错误的事情。

1. 你将事件处理程序分配给了一个NodeList而不是一个元素（或一组元素）
2. 你在没有上下文的情况下调用了changeImage（所以this将是undefined或window，这取决于你是否处于严格模式）。

修复后的版本应该像这样：

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

但更整洁的版本将跳过仅执行另一个函数调用的匿名函数：

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

现代代码会使用addEventListener。

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

然而，图像不是交互控件。您无法（默认情况下）将焦点放在它们上面，因此这种方法会使那些没有使用指针设备的人无法访问它们。最好使用专门设计用于交互的控件。

通常，这应该是一个普通按钮。您可以使用CSS来删除默认填充/边框/背景。

如果您无法在纯HTML中放置按钮，则可以使用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;
}

- Quentin