[JavaScript知识库][js] JavaScript常见的事件类型

浏览器的事件类型 window 绑定的

            scroll      页面滚动监听事件
            resize      视窗窗口大小监听事件
            load        html加载事件

DOM操作 标签绑定的事件

点击类

                click           鼠标左键单击
                dblclick        鼠标左键双击
                contextmenu     鼠标右键单击

                mousedown       鼠标按键按下
                mouseup         鼠标按键抬起

                mousemove       鼠标移动

                mouseover       鼠标移入
                mouseout        鼠标移出

                mouseenter      鼠标移入
                mouseleave      鼠标移出

键盘事件

                keydown         键盘按键按下
                keyup           键盘按键抬起
                keypress        

表单事件

                focus           获取焦点
                blur            失去焦点
                input           输入数据
                change          失去焦点并且数据改变
                submit          表单提交

触摸事件

                touchstart      触摸开始
                touchend        触摸结束
                touchmove       触摸移动
                只对 移动端 有效 三阶段 再介绍

特殊事件

                transitionstart 过渡开始
                transitionend   过渡结束

                animationstart  动画开始
                animationend    动画结束

        // 点击整个页面都可以触发事件
        document.addEventListener('click' , function(){console.log(1111)});


        // 鼠标的按下抬起
        oDiv.addEventListener( 'mousedown' , function(){console.log('鼠标按下了')})
        oDiv.addEventListener( 'mouseup' , function(){console.log('鼠标抬起了')})
        // 鼠标点击 本质上 是 鼠标 按下 和 鼠标抬起 两个过程完成的
        oDiv.addEventListener( 'click' , function(){console.log('鼠标点击了')})

        // 鼠标的移动
        // 在 标签的范围内 一直移动 一直触发
        oDiv.addEventListener( 'mousemove' , function(){console.log('鼠标移动了')})