【基础知识】HTML5 Canvas中Canvas鼠标事件（两种方法）

我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。

教程介绍、教程目录等能在README里查阅。

传送门：https://github.com/827652549/CanvasStudy

方法一

可以这样做

var canvas = document.getElementById('canvas'),
        context = canvas.getContext('2d');
    
    canvas.onmousedown = function (e) {
        //处理canvas的按下鼠标事件
    }

类似的还有onmousemove、onmouseup、onmouseout等

方法二

通过更通用的addEventListener()方法来注册监听器

canvas.addEventListener('mousedown',function (ev) {
        //处理canvas的按下鼠标事件
    })

应用场景

使用onmousedown这样的方式来注册监听器，比addEventListener()稍微简单一些，但如果要注册许多个监听器的话，那么就需要使用addEventListene()了