我可以向 javascript 事件发送一个额外的对象并在事件中使用对象属性吗？答案

【问题标题】：Can i send an extra object to a javascript event and use the objects properties in the event?我可以向 javascript 事件发送一个额外的对象并在事件中使用对象属性吗？
【发布时间】：2021-06-26 11:56:57
【问题描述】：

我有一个包含多个 div 元素的简单 html。


<body onload="start()">
    <div id="image1"></div>
    <div id="image2"></div>
</body>

body 的 onload 事件触发一个名为 start() 的 JavaScript 函数，该函数从名为 img 的类创建两个对象。该类在它指向的 div 中创建一个画布（第一个参数），其宽度和高度在第二个和第三个参数中指定。


function start(){
    let img1 = new img("image1",640,480);
    let img2 = new img("image2",320,240);
}

下面的类创建画布和一个数组，它用 0-255 之间的随机数填充。它还向对象添加了一个 mousemove 事件。


class img{
    constructor(p_divid, p_w, p_h){ 
        this.divid = p_divid; //DIV id
        this.w = p_w; //width of the div        
        this.h = p_h; //height of the div
        this.pixels = []; //pixel values
        for (let index = 0; index < this.w*this.h; index++) {
            this.pixels[index] = Math.floor(Math.random()*255); //a random value up to 255
        }
        this.div = document.getElementById(this.divid); //div element
        this.div.innerHTML = "<canvas id='canvas-"+this.divid+"' width='"+this.w+"' height='"+this.h+"' style='background-color:red;'></canvas>"; //this creates a canvas
        this.canvas = document.getElementById("canvas-"+this.divid); //canvas element
        this.canvas.addEventListener("mousemove", this.mmove); //mouse move event           
    }

mousemove 事件获取鼠标相对于元素的坐标，并计算它想要到达的元素在对象像素中的位置。我想学习达到对象像素数组的最佳实践。


    mmove(e){
        var rect = e.target.getBoundingClientRect();
        var x = e.clientX - rect.left; 
        var y = e.clientY - rect.top;  
        var position_in_array = (y * 640) + x;
//******************************************************************************
        //THIS IS WHERE I WOULD LIKE TO GET THE VALUE OF THE PIXELS ARRAY AND 
        //WRITE IT ON THE CONSOLE. Something like:
        //let x = object.pixels[position_in_array];
//******************************************************************************
    }

您在上面看到的整个 html 文件是：


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>test</title>
    </head>
        <body onload="start()">
            <div id="image1"></div>
            <div id="image2"></div>
        </body>
    
        <script>
            function start(){
                let img1 = new img("image1",640,480);
                let img2 = new img("image2",320,240);
            }
    
            class img{
                constructor(p_divid, p_w, p_h){ 
                    this.divid = p_divid; //DIV id
                    this.w = p_w; //width of the div        
                    this.h = p_h; //height of the div
                    this.pixels = []; //pixel values
                    for (let index = 0; index < this.w*this.h; index++) {
                        this.pixels[index] = Math.floor(Math.random()*255); //a random value up to 255
                    }
                    console.log(this.pixels);
                    this.div = document.getElementById(this.divid); //div element
                    this.div.innerHTML = "<canvas id='canvas-"+this.divid+"' width='"+this.w+"' height='"+this.h+"' style='background-color:red;'></canvas>"; //this creates a canvas
                    this.canvas = document.getElementById("canvas-"+this.divid); //canvas element
                    this.canvas.addEventListener("mousemove", this.mmove); //mouse move event
                }
    
                mmove(e){
                    var rect = e.target.getBoundingClientRect();
                    var x = e.clientX - rect.left; 
                    var y = e.clientY - rect.top;  
                    var position_in_array = (y * 640) + x;
//******************************************************************************
        //THIS IS WHERE I WOULD LIKE TO GET THE VALUE OF THE PIXELS ARRAY AND 
        //WRITE IT ON THE CONSOLE. Something like:
        //let x = object.pixels[position_in_array];
//******************************************************************************
                }
            }
        </script>
    </html>

【问题讨论】：

什么是object.pixels？和this.pixels一样吗？
是的，像素对象是this.pixels，它是img类的一部分。
你需要使用bind()来改变this的调用上下文.....addEventListener("mousemove", this.mmove.bind(this));

标签： javascript oop

【解决方案1】：

您可以使用bind 方法传递额外的参数，例如

this.mmove.bind(null,this.pixels);

mmove(pixels, e){

这是一个示例代码，说明如何使用 bind 传递额外参数

document.querySelector("#btn").addEventListener('click', a.bind(null,12));

function a(v,e){
  alert(e.target.textContent);
  alert(v);
}

&lt;button id="btn"&gt;Click&lt;/button&gt;

【讨论】：

【解决方案2】：

感谢 'charlietfl' 为我指明了正确的方向。

将我的 addeventlistener 行更改为：

                this.canvas.addEventListener("mousemove", this.mmove.bind(this));

和 mmove 函数到

    mmove(e){
                    var rect = e.target.getBoundingClientRect();
                    var x = e.clientX - rect.left; 
                    var y = e.clientY - rect.top;  
                    var position_in_array = (y * 640) + x;
                    let value = this.pixels[position_in_array];
                    console.log(value);
    }

解决了我的问题。

【讨论】：