canvas鼠标监听事件怎么点击没反应呢？？？

Question

window.onload = function(){
    
        var canvas = document.getElementById("logo");
        var context = canvas.getContext("2d");
        var logo = new Image();
        logo.src = "img/logo.gif";
        logo.onload = function() {
            context.drawImage(logo, 0, 0);
            //监听鼠标事件
            context.addEventListener("click",show= function(){alert("hehe");},false);
        };
          }
<canvas id="logo" width="410" height="60"></canvas>
问题出在哪嘞？？？？

Answer 1

换个位置试试：window.onload = function(){
    
        var canvas = document.getElementById("logo");
        var context = canvas.getContext("2d");
        var logo = new Image();
        logo.onload = function() {
            context.drawImage(logo, 0, 0);
            //监听鼠标事件
            canvas.addEventListener("click",show= function(){alert("hehe");},false); // 监听canvas而不是context
        };
        logo.src = "img/logo.gif"; // 最好先onload在前  }

Answer 2

事件是要绑定在元素canvas上，不是context上。。还有img最好是在绑定了onload事件后再给出src值window.onload = function(){
    
        var canvas = document.getElementById("logo");
        var context = canvas.getContext("2d");
        var logo = new Image();
        logo.onload = function() {
            context.drawImage(logo, 0, 0);
            //监听鼠标事件
            canvas.addEventListener("click",show= function(){alert("hehe");},false);
        };
        logo.src = "img/logo.gif";  }