JavaScript学习第十五天

DOM的鼠标事件

事件：允许js在html文档元素注册不同的事件处理程序，驱动函数/方法

- 鼠标事件
- 键盘事件
- 表单事件
- 剪切板事件
- 拖拽事件
- 打印事件
- 媒体事件
- 框架事件
- 动画事件
- 过渡事件
- 鼠标事件
-鼠标点击事件

---

- onclick 鼠标左键点击触发
- ondblclick 鼠标左键双击触发
- onmousedown 鼠标按键按下时触发（左中右键均可以）
- onmouseup 鼠标按键松开时触发（左中右键均可以）
- 鼠标移动事件
- onmouseover 鼠标悬浮在元素上面时触发（如果从父元素再进入子元素，会再次触发）
- onmouseout 鼠标离开元素上面时触发（从父元素移动到子元素，或者从子元素再移动到父元素，都会再次触发）
- onmouseenter 鼠标进入元素时触发（如果从父元素再进入子元素，不会再次触发）
- onmouseleave 鼠标离开元素时触发（从父元素移动到子元素，或者从子元素再移动到父元素，都不会再次触发）
- onmousemove 鼠标移动时触发
- onmousewheel 鼠标滚轮事件，已废弃，由onwheel代替
- onwheel 鼠标滚轮事件，鼠标滚轮出现动作以后触发
- oncontextmenu 鼠标右键菜单事件，鼠标点击右键时触发

---

获取元素
    var aBox = document.getElementsByClassName("box");

    onclick  当用户点击某个对象是调用的事件句柄  左键单击
    aBox[0].onclick = function (event) {
        console.log("onclick事件");
        console.log(event);
    }

     ondblclick  当用户双击某个对象是调用的事件句柄  左键双击
    aBox[1].ondblclick = function (event) {
        console.log("ondblclick事件");
        console.log(event);
    }

     onmousedown  鼠标按钮被按下
    aBox[2].onmousedown = function (event) {
        console.log("onmousedown事件");
        console.log(event.which);
    }

     onmouseup  鼠标按钮被松开
    aBox[3].onmouseup = function (event) {
        console.log("onmouseup事件");
        console.log(event);
    }

    // 鼠标的移动事件
     onmouseover  鼠标指针移入到某个元素上   进入到子元素会触发
    aBox[4].onmouseover = function (event) {
        console.log("onmouseover事件");
        console.log(event);
    }
     onmouseout  鼠标指针从某个元素上移出   进入到子元素会触发
    aBox[5].onmouseout = function (event) {
        console.log("onmouseout事件");
        console.log(event);
    }

    onmouseenter  鼠标指针移入到某个元素上  
    aBox[6].onmouseenter = function (event) {
        console.log("onmouseenter事件");
        console.log(event);
    }
     onmouseleave  鼠标指针从某个元素上移出  
    aBox[7].onmouseleave = function (event) {
        console.log("onmouseleave事件");
        console.log(event);
    }

     onmousemove  鼠标指针在某个元素上移动  
    aBox[8].onmousemove = function (event) {
        console.log("onmousemove事件");
        console.log(event);
    }

     onmousewheel  鼠标滚轮事件   已废弃  使用onwheel替换
    aBox[9].onmousewheel = function (event) {
        console.log("onmousewheel事件");
        console.log(event);
    }

     onwheel  鼠标滚轮事件 
    aBox[10].onwheel = function (event) {
        console.log("onwheel事件");
        console.log(event);
    }

     oncontextmenu  当用户点击鼠标右键打开上下文菜单时触发
    aBox[11].oncontextmenu = function (event) {
        console.log("oncontextmenu事件");
        console.log(event);
    }