dom0 与 dom2

一.用法区别

dom0

// 获取can的dom
let can = document.getElementById("canvas")
// 创建一个2Dcanvas画布
let context = can.getContext('2d')
// dom0
can.onclick = (e) => {
    console.log(e.offsetX, e.offsetY);
}

dom2

// 获取can的dom
let can = document.getElementById("canvas")
// 创建一个2Dcanvas画布
let context = can.getContext('2d')
// dom2
can.addEventListener("mousedown", (e) => {
    console.log(e.offsetX, e.offsetY);
})

二.逻辑区别

        dom0 相当于是直接绑定 onclick 事件，有开发经验的朋友就明白了，这个是可以直接覆盖的，例如：在canvas画布上有点击标点的事件  但是现在不要他标了

// 获取can的dom
let can = document.getElementById("canvas")
// 创建一个2Dcanvas画布
let context = can.getContext('2d')
can.onclick = (e) => { // dom0级  添加点击事件
    console.log(e.offsetX, e.offsetY);
    // 开始画图
    context.beginPath();
    // 画圆 坐标在当前鼠标位置，半径为8px的圆
    context.arc(e.offsetX, e.offsetY, 8, 0 * Math.PI / 180, 360 * Math.PI / 180)
    context.strokeStyle = 'red' // 圆边框颜色
    context.fillStyle = 'red'  // 圆内填充色
    context.fill(); // 内部填充绘制
    this.num++ // 当前标了几个点
    if (this.num == 2) { // 当标了两个点的时候
        can.onclick = () => { // dom0级 直接将点击事件置空

        }
        this.num = 0  // 当前点击数置为0
    }
}

        dom2 是通过 addEventListner() 方法为元素设置事件监听函数，而这个 新添加一个事件是不会覆盖上一个事件的， 只能通过 removeEventListener()方法来删除事件

注：以上主要是个人对其的理解，可能不是很全面，但是也可以以此来选择使用，解决一些开发当中碰到的问题了