码迷,mamicode.com
首页 > 其他好文 > 详细

关于事件的简单汇总

时间:2019-09-02 09:20:42      阅读:93      评论:0      收藏:0      [点我收藏+]

标签:距离   cti   类型   offsetx   node   ntc   font   page   方式   

事件:主要有三个部分。
    事件源:出发事件的源头 例如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级(监听式)

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

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

关于事件的简单汇总

标签:距离   cti   类型   offsetx   node   ntc   font   page   方式   

原文地址:https://www.cnblogs.com/goodboyzjm/p/11439676.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!