鼠标事件

<div>我是div

        <h1>我是h1</h1>

    </div>

    <script>

        // 鼠标事件

        // 鼠标事件,可以绑定给标签对象,也可以绑定给真个文档

        // 鼠标事件绑定给标签对象--div

        // 只有绑定的标签可以触发事件处理函数

        var oDiv = document.querySelector('div');

        // 鼠标点击,是按下和抬起两个动作都完成才会触发

        oDiv.onclick = function(){

            console.log('鼠标点击');

        }

        // 鼠标事件绑定给整个文档--document

        // 整个文件都会触发事件处理函数

        // document.onclick = function(){

        //     console.log(456);

        // }

        

        // 1, click        鼠标左键单击  执行完鼠标按下和抬起两个动作,才会触发

        // 2, dblclick     鼠标左键双击

        // 3, contextmenu  鼠标右键单击 

        // 4, mousedown    鼠标按下  永远只会执行一次

        // 5, mouseup      鼠标抬起  

        // 6, mousemove    鼠标移动

        // 6, mouseover    鼠标移入

        // 7, mouseout     鼠标移出

        //    经过当前绑定事件的标签,以及标签的子级元素,都会触发事件

        //    经过当前标签,只触发移入或者移出

        //    经过子级标签:移入子级,触发,先移出当前标签,再进入子级标签

        //                移出子级,触发,先移出子级标签,再进入父级标签

        // 8, mouseenter   鼠标移入

        // 9 ,mouseleave   鼠标移出

        //    只有经过当前标签的边界线时会触发程序的执行

        //    经过子级标签时,不会触发

        

        // 3, contextmenu  鼠标右键执行效果

        // 浏览器一般都有右键点击,默认执行内容

        // 我们可以阻止默认事件执行

        // 默认事件指定的浏览器默认执行的事件效果