关于事件的简单汇总

Posted 2022-09-21 goodboyzjm

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

事件委托：
事件源
事件冒泡

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