zoukankan      html  css  js  c++  java
  • 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、可以为同样的元素添加多次同样的事件   事件都会被触发
  • 相关阅读:
    所谓经济现象
    高旻寺德林老和尚开示
    3Delight NSI: A Streamable Render API
    Play vue.js with constant value in SailsJS
    天魔心法之——识人篇
    对国内IoT的展望
    对国内AR产业的预言
    简评某中国工程师嫌疑窃取苹果自动驾驶技术
    评估人类的金三角模型
    Odoo 进销存报表现已开源
  • 原文地址:https://www.cnblogs.com/tis100204/p/10302142.html
Copyright © 2011-2022 走看看