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级(监听式)

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

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

  • 相关阅读:
    软件系统的稳定性
    项目从.net 2.0 升级到。.net 4.0项目以后发现网站运行十分缓慢
    学习英语小助手(阅读粘贴的英文,使用MVVM)
    如何在IIS6,7中部署ASP.NET网站
    基于 IOCP 的通用异步 Windows Socket TCP 高性能服务端组件的设计与实现
    面向对象软件设计原则—— 软件实体的设计原则
    Django实战
    聊聊豆瓣阅读kindle版
    多线程的基本概念
    nopCommerce的源代码结构和架构
  • 原文地址:https://www.cnblogs.com/goodboyzjm/p/11439676.html
Copyright © 2011-2022 走看看