event事件对象

1、梳理知识点
内置对象   
    Array 数组操作方法  数组扩展方法  forEach  filter   reduce  map   indexOf
          栈和堆  
          数组去重 : 
          数组排序   
    String
          操作方法 str.split    arr.join      
    Date    
          获取日期  设置日期   时间差  
    Math
          获取随机整数公式
DOM   
    增 : createElement()   appendChild()  insertBefore()
    删 :  remove()   removeChild()
    改 :
        改样式
            obj.style.样式 = 
            obj.style.cssText = ""
            obj.className = ""
        改属性
            obj.src = 
            obj.setAttribute( "" , "" )
            obj.getAttribute( "" );
        改内容
            obj.innerHTML =   innerText
            obj.value
    查 :
        getElementById()  ByTagName()  ByName()  ByClassName()  querySelector() 
BOM :
    window   document  location event  history  navigation  screen
 
 
2、事件对象event (重点) 
事件 : 对页面元素的某种操作(比如 :onclick  onmouseover....  )
事件对象 : 当对页面元素进行某种操作时,会产生一个对象,这个对象就是事件对象   
            不同类型的事件产生的事件对象就不同  比如 鼠标事件 就会产生鼠标事件对象   键盘事件  就会产生键盘事件对象
事件对象的兼容写法 :
    document.onclick = function(e){
        var evt = e || event;
    }
 
3、鼠标事件对象的属性(重点)
坐标属性 : 
    pageX  pageY       获取鼠标在文档中的位置 (相对于文档,有滚动条时算上滚动条滚动的距离)
    clientX  clientY   获取鼠标在文档中的位置 (相对于 window窗口,不算滚动条滚动距离)
            page 和 client 在没有滚动条时,值相等
    offsetX  offsetY   获取鼠标在某个对象内部的偏移量
 
限制用户操作鼠标
button (扩展) :  0 --左键   1---滚轮   2---右键
 
4、键盘事件对象的属性(重点)
获取键盘的按键值 :
    keyCode   字母以大写字母的编码值为准   
    兼容 :e.keyCode || e.which
ctrlKey 指的是 ctrl键   altKey  指的是 alt键    shiftKey 指的是  shift键   功能键 返回的都是布尔值  按下的是某个功能键 返回true
 
5、事件流
当触发某个事件时,事件从子元素到父元素 或 从父元素 到子元素的过程  称为事件流
事件流有两种模式 : (重点)
    事件冒泡:事件传递方式 --  从子元素 到 父元素 
    事件捕获: 事件传递方式 --  从父元素 到 子元素
 
6、事件冒泡  
当触发某个事件时,同样的事件会向父元素触发,这个过程称为 事件冒泡
高版本浏览器下 对象的包含关系 :  window -- document --- body -- div---img
不是所有的事件都会产生冒泡现象 : 比如 onload  onblur  onfocus..  
常见的事件冒泡所涉及的事件 :  onclick   onmouseover  
 
7 、阻止事件冒泡 (重点)
stopPropagation()  事件对象的方法 
事件冒泡兼容 :
e.stopPropagation?e.stopPropagation():e.cancelBubble = true        
 
8、事件捕获 
通过事件监听方法来实现   addEventListener()   
用法 : 
    对象.addEventListener("事件",function(){  
        注意 : 这里的事件 去掉on
    })  
    要想实现事件捕获  第三个参数是true,默认是false 冒泡
 
9、事件监听
为元素绑定事件  
1、obj.事件 = function(){}
2、在标签上直接添加事件 <input onclick> 
3、事件监听 addEventListener()
事件监听的作用 : 
    1、可以通过事件监听的方式实现捕获或冒泡的效果
    2、可以为同样的元素添加多次同样的事件   事件都会被触发
原文地址:https://www.cnblogs.com/tis100204/p/10302142.html