事件的三要素

1.事件源 div标签

        // 点击div标签,设定随机颜色
        var oDiv = document.querySelector('div');

on 是绑定事件类型的语法

也可以是一个定义好的函数名称

匿名函数形式,等于是将整个匿名函数,绑定在事件上,触发事件,就会触发执行函数中的程序

类似于 var abc = function(){} 将整个函数赋值给这个变量

        oDiv.onclick = function(){
            oDiv.style.color = setColor();
        }

fun这个函数名称中,存储的是已经定义好的函数的内存地址

触发事件,通过内存地址, 找到函数的存储空间,调用执行函数

如果绑定是 fun() 等于绑定的是函数的执行结果 return 的内容

触发时间时就不是通过函数地址,调用函数了

绑定函数名称,必须没有();

        oDiv.onclick = fun;
        function fun(){
            oDiv.style.color = setColor();
        }

        oDiv.onclick = function(){
            console.log('我是单击事件的执行内容')
        }

        oDiv.ondblclick = function(){
            console.log('我是双击事件的执行内容')
        }

        oDiv.oncontextmenu = function(){
            console.log('我是鼠标右键单击事件')
        }

        oDiv.onmousedown = function(){
            console.log('我是鼠标按键按下事件')
        }

        oDiv.onmouseup = function(){
            console.log('我是鼠标按键抬起事件')
        }

在标签范围内移动触发的是 mousemove 事件

        oDiv.onmousemove = function(){
            console.log('鼠标在div上移动了')
        }

        oDiv.onmouseenter = function(){
            console.log('我进去了')
        }

移入移出事件,只有在经过标签范围边界线时才会触发

在标签范围内移动不会触发事件

经过子级标签边界线时 mouseover mouseout 也会被触发

经过子级标签边界线时 onmouseenter mouseleave 不会被触发

        oDiv.onmouseleave = function(){
            console.log('我出来了')
        }