zoukankan      html  css  js  c++  java
  • 关于事件的简单汇总

    事件:主要有三个部分。
        事件源:出发事件的源头 例如obox、oul 等
        事件类型:通过什么行为触发事件   例如onclick、onmousedown 等
        事件处理函数: 触发这个行为,要做的事情  function。

    obox.onclick = function(){
            console.log(1)
        }
    点击 obox 在控制台会出现 1

      事件对象 

    事件对象的元素获取 

    var  obox =document.querySelector(".box")     //选中了一个class名为box的对象 可以加#选中id
    var op =document.querySelectorAll("p")    //选中了所有的p标签返回了一个叫做op的数组
    var obox=document.getElementById("kaka")  //选中了一个id为kaka的元素
    var obox=document.getElementsByClassName("xaxa") //选中了一个class为xaxa的元素
    var aspan =document.getElementByTagName("span") //拿到了span的标签名
    var auser=document.getElementsByName('user') //拿到name为user的的元素

      坐标属性

    坐标是定位对象和鼠标的移动

    可视区域的宽和高
                obox.clientWidth
                obox.clientHeight
    包括滚动区域的宽高(在有溢出自适应的情况下会产生滚动条,但也会产生距离)
           obox.scrollWidth
           obox.scrollHeight
    可视边框的区域的高度
           obox.offsetWidth
           obox.offsetHeight
    元素相对于包含块的偏移的位置
           obox.offsetTop
           obox.offsetLeft
    滚动时产生的left 和Top
           obox.scrollLeft
           obox.ScrollTop
    =============================================================================

    鼠标相对于事件源的坐标
          .offsetX
           .offsetY
    鼠标相对于可是页面的坐标
           .clientX
           .elientY
    鼠标相对于页面的坐标
           .pageX
           .pageY
    鼠标相对于整个屏幕的坐标
           .screenX
           .ScreenY


    事件对象的关系获取

      

    DOM的关系选择器
    父元素选子元素
                  obox.children             返回一个数组
    
    子元素选父元素
                 ~~~.parentNode        返回一个元素
    
    第一个子元素
                    obox.fristElementChild
    
    最后一个子元素
                    obox.ladtElementChild
    
    上一个兄弟元素
                    obox.previousElementSibling
    
    下一个兄弟元素
                    obox.nextElementSibling
    
    =========================================》
    这里是Dom的其他元素选择器
    父元素选子元素


    事件源
    事件类型
    按键的获取
    事件冒泡
    默认事件

    绑定事件的方式:
    DOM0级(赋值式)
    DOM2级(监听式)

    事件委托:
    事件源
    事件冒泡

    事件流的状态
    事件捕获
    目标
    事件冒泡

  • 相关阅读:
    3D游戏常用技巧Normal Mapping (法线贴图)原理解析——高级篇
    [工作积累] OpenGL ES3.0: glInvalidateFramebuffer
    引擎设计跟踪(九.14.2c) 最近一些小的更新
    引擎设计跟踪(九.14.2b) 骨骼动画基本完成
    最近在玩的游戏
    引擎设计跟踪(九.14.2a) 导出插件问题修复和 Tangent Space 裂缝修复
    [工作积累] Google/Amazon平台的各种坑
    [工作积累] NDK通过Java获取package name 和version
    [工作记录] Android OpenSL ES: references & AAC related
    [工作记录] Android OpenGL ES: non-square texture
  • 原文地址:https://www.cnblogs.com/goodboyzjm/p/11439676.html
Copyright © 2011-2022 走看看