Question

您可以在HTML标记上使用this标记进行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会返回实时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删除默认的填充/边框/背景。

如果您不能在普通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;
}

你能用＃34;这个＆＃34;关于HTML标签的onclick的属性？

3 个答案: