day11 鼠标/键盘事件/事件流

day11

1. 事件对象

（1）事件：对某个元素的某种操作

（2）事件对象：当某个事件触发时产生的对象，就是事件对象。

注意：event使用前提，必须有事件；也就是说没有事件，就没有事件对象；

​ 不同的对象产生的事件不同。

　 事件对象的兼容： var e = evt || event;

事件的三要素:

• 元素（div）
• 事件类型 (onclick)
• [事件对象] (event)

案例：小老虎跳一跳

2. 鼠标事件对象的属性

坐标属性：

• pageX/ pageY 鼠标相对于整个文档左侧和顶部的坐标。 常用
• clientX / clientY 鼠标相对于局部窗口的左侧和顶部的坐标。

• offsetX /offsetY 鼠标相对于内部元素的距离左侧和顶部的坐标。

  • 鼠标距离最近的父元素左顶点的坐标
  • 常用于拖拽

案例：图片跟随鼠标移动

3. 键盘事件

• 键盘事件对象都是通过document来触发的

• 键盘事件：

  • （1）keyUp: 用户释放某一个按键时发生

        document.onkeydown = function(){
            console.log('haha');
        }

  • （2）keyDown: 用户按下按键时发生

        document.onkeyup = function(){
            console.log('xixi');
        }

  • （3）keyPress: 用户按下按键，并且产生一个字符时发生（意思就是说按ctrl这样的按键没有效果的）

        document.onkeypress = function(){
            console.log('xixihaha');
        }

• 键盘对象

  • （1）keyCode:键盘录入时字母所对应ASCII码

    • A:65
      a:97

      0:48

      回车:13

      ctrl+回车:10

  • (2) ctrlKey 返回当事件被触发时，"Ctrl" 是否被按下,返回值为true or false

  //键盘检测兼容写方法
  var key = e.keyCode || e.which || e.charCode;

4. 事件流

（1）概念：

• 当某个事件执行时，从子元素向父元素触发 或 从父元素向子元素触发 称为事件流

（2）事件流的两种模式：

事件冒泡

• 从子元素向父元素触发 --->当某个事件触发时，同样的事件会向父元素触发。
• 注意：但并不是所有事件都会产生冒泡问题 onfocus onblur onload不会产生冒泡问题。

事件的冒泡：

文档结构： window document.body body元素

阻止事件冒泡

//兼容写法
e.stopPropagation?e.stopPropagation():e.cancelBubble='true';

    
        
        
        
    
    
        显示
        

            
抓鸭子
            
抓几只
            
抓1万只
            
抓到了
            
嘎嘎嘎嘎嘎
        
    

阻止事件的默认行为

//兼容写法
e.preventDefault?e.preventDefault():e.returnValue = false;
//或者简化的兼容写法
return false;

• 阻止鼠标右键

• 阻止超链接

  
  
      
          
          
      
      
          跳转
      
  
  

事件捕获

• 从父元素向子元素触发