javascript - 在 JS 函数中传递“this”和“event”

Question

我有一个带有 onclick 事件的按钮，如下所示：

<button type="button" onclick="captions(event)">
     <img src="someimg.png">
</button>

我需要能够在不使用 ID 来引用它的情况下更改 img src。我想传递“this”和事件（我需要做一些其他需要传递事件的事情），但我无法让它工作。JS示例如下：

function captions(event) {
             this.src = this.src.replace("img2.png");
}

谢谢！

Answer 1

我建议不要使用内联事件处理程序。您应该使用 JavaScript“不显眼地”绑定事件。

首先给按钮一个类：

<button type="button" class="captions">
     <img src="someimg.png">
</button>

然后绑定事件：

window.onload = function(){
    var captions = document.getElementsByClassName('captions');
    for(var i = 0, len = captions.length; i < len; i++){
        captions[i].addEventListener('click', function(event){
            // this is your button, what you clicked on
            // you need to get the image
            var image = this.getElementsByTagName('img')[0];

            // this.src.replace("img2.png") doesn't do what you think it does
            // String.replace takes 2 parameters
            image.src = '/your/new/image';
        });
    }
};

演示：http: //jsfiddle.net/WcFzq/

Answer 2

您可以使用 event.target 属性 ( http://www.w3schools.com/jsref/event_target.asp )获取被单击的元素。

function captions(event) {
         event.target.src = "img2.png";
}

这是一个jsfiddle。

Answer 3

以下将解决您的问题。

function captions(event) {
   var img = this.childNodes[0];
   img.src = img.src.replace("img2.png");
}

Answer 4

If you want to do an inline onclick event, you should simply be able to pass a new variable that captures the element into the function, like this:

function captions(element, event) {
    . . . do stuff . . .
}

Then you would call it, passing this in for the element parameter, like this:

<button type="button" onclick="captions(this, event);">
    <img src="someimg.png">
</button>