添加onClick事件动态DOM对象

Question

I'm coding basic balloon game. Balloons are created dynamically into the canvas. Everything is ok but I could not add onclick event to hide the balloon. First function to start game is " Baslat ()". Here is my codes

var canvas; 
var sev = 1;
var zorluk = 3;
var ctx;

function Baslat() {
    var x;
    for (x = 1; x <= sev*zorluk; x++) {
        BalonYap(x);
    }
}

function seviye(a) {
    sev = a.value;
}

function BalonYap(id) {

    var img = new Image();
    img.src = "balon.png";
    img.id = "balon_"+id;
    img.onload = BalonLoad(img); // works
    img.onclick = Patlat(id); // doesn't work

}

function BalonLoad(img) {
    var rnd1 = Math.floor(Math.random() * 750)+10;
    var rnd2 = Math.floor(Math.random() *350)+10;
    canvas = document.getElementById('myCanvas');
    context = canvas.getContext("2d");
    context.drawImage(img, rnd1, rnd2);
}

function Patlat(img) {
    alert();
}

Answer 1

You need to assign function to event handlers. If you give arguments to a function it's called. You can try this factory method (you can give arbitrary parameters to the wrapping function and use them inside the returned function's closure):

function BalonLoad(img) {
    return function() {
        var rnd1 = Math.floor(Math.random() * 750)+10;
        var rnd2 = Math.floor(Math.random() *350)+10;
        canvas = document.getElementById('myCanvas');
        context = canvas.getContext("2d");
        context.drawImage(img, rnd1, rnd2);
    }
}

Answer 2

Part of the issue here is that you are attempting to assign an event callback on an element that does not exist in the DOM. You are only drawing to the canvas. A click event will need to be applied to the canvas element. You will need to save the coordinates of each balloon, and use that to find the appropriate balloon when the canvas is clicked.