原生js学习笔记6——事件

事件对象

鼠标事件

event.clientX在可视区中，鼠标点击的x坐标
event.clientY在可视区中，鼠标点击的y坐标

示例：

示例：一个跟随鼠标指针移动的红色块

demo.gif

示例：一串跟着鼠标走的div

demo.gif

键盘事件

• keyCode获取用户按下键盘的哪个按键

如：键盘控制DIV移动

• ctrlKey 返回boolean值，按下时为true
• shiftKey 返回boolean值，按下时为true
• altKey 返回boolean值，按下时为true

示例：用提示框将用户按的按键提示出来：

demo.gif

示例：通过上下左右按键控制DIV的移动

demo.gif

示例：按住control+enter键，提交留言框中的文字到留言板中

demo.gif

事件冒泡

子标签发生事件后，向父级发送该事件，一直追溯到document。如：点击一个嵌套在body中的button，则该button的onclick事件也会传递给body、document中，触发他们的onclick里触发的函数.

示例：

取消冒泡

由于事件冒泡会触发父级的相关方法，所以我们经常会“取消事件冒泡”。

取消事件冒泡的方法:event.cancelBubble=true

事件的默认行为

浏览器自带的行为就是默认行为

阻止默认行为

只要将默认的事件return false，就可以组织默认行为的执行。

示例：自定义右键菜单：默认的右键菜单是系统提供的选项，我们可以阻止默认的右菜单，来自定义新右键菜单样式

    
    
    
    



    
    

        
首页
        
登录
        
注册
    
    

示例：输入框中只能输入数字和退格

拖拽

拖拽时，鼠标经历三个事件：

• onmousedown 鼠标按下时，存储当前鼠标距离拖拽对象左上角的距离
• onmousemove 鼠标移动时，根据鼠标移动的距离移动拖拽对象的位置
• onmouseup 鼠标抬起时，停止拖拽

示例：鼠标拖拽一个div

demo.gif