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

Passing "this" and "event" in JS function

本文关键字：this event JS 函数      更新时间：2023-09-26

我有一个带有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");
}

谢谢！

我建议不要使用内联事件处理程序。 您应该使用 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/

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

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

这是一个jsfiddle。

下面将解决您的问题。

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

如果你想做一个内联onclick事件，你应该能够简单地将一个捕获元素的新变量传递到函数中，如下所示：

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

然后，您将调用它，为 element 参数传递this，如下所示：

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