您可以在 HTML 标签的 onclick 上使用 "this" 属性吗？

Question

您可以将 this 标签用于 HTML 标签上的 onclick 吗？这是我的 JS 代码...

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

我是不是做错了什么？

Answer 1

这样用...

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

Answer 2

您可以使用 .call() 方法在 this 的上下文中调用函数。

在这种情况下，您将使用：

changeImage.call(this)

Example Here

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

作为旁注，getElementsByTagName returns a live HTMLCollection 个元素。您需要将 onclick 处理程序应用于该集合中的元素。

如果要将事件侦听器应用于元素集合，请遍历它们并添加事件侦听器，如下所示：

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);
});

或者您可以简化它：

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

你做错了两件事。

您正在将事件处理程序分配给 NodeList 而不是一个元素（或一组元素）
您在没有任何上下文的情况下调用 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 删除默认填充/边框/背景。

如果你不能在你的plain里放一个按钮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;
}

您可以在 HTML 标签的 onclick 上使用 "this" 属性吗？

Can you use "this" attribute on onclick of an HTML tag?

javascript

html

dom