var oDiv = document.querySelector('div');
oDiv.addEventListener('click' , function(){console.log(111)});

一个标签一个事件类型 可以绑定多个事件处理函数
匿名函数

// 绑定事件1
oDiv.addEventListener('click' , function(){console.log(111)});
// 绑定事件2
oDiv.addEventListener('click' , function(){console.log(222)});
// 绑定事件3
oDiv.addEventListener('click' , function(){console.log(333)});

这里的function(){console.log(111)}就是回调函数

可以在同一个标签中添加不同类型的事件。

document.getElementById("myBtn").addEventListener("mouseover", function(){console.log(111)});
document.getElementById("myBtn").addEventListener("click", function(){console.log(111111)});
document.getElementById("myBtn").addEventListener("mouseout", function(){console.log(11111111111)});

已经定义好的函数名称

oDiv.addEventListener( 'click' , fun1 );
function fun1(){
            console.log('我是已经定义好的函数1');
        }

这里的fun1 就是回调函数

on语法

// on语法
        // 赋值形式 后赋值的数据 会 覆盖之前存储的数据
        // 事件类型中 赋值存储的是 匿名函数的 内存地址
        // 后赋值的 匿名函数的内存地址 会 覆盖之前存储的函数的内存地址
        oDiv.onclick = function(){console.log(111)};
        oDiv.onclick = function(){console.log(222)};
        // 最终 事件类型中存储 最后一次赋值的内存地址
        // 调用执行时 只会 触发 最后一次赋值的函数程序
        oDiv.onclick = function(){console.log(333)};

赋值形式 后赋值的数据 会 覆盖之前存储的数据
事件类型中 赋值存储的是 匿名函数的 内存地址
后赋值的 匿名函数的内存地址 会 覆盖之前存储的函数的内存地址