javaScript：什么是事件对象？事件原对象？如何获取坐标点？

目录

前言

 事件对象（***重要***）

事件对象的常见用处

 相关代码

事件原对象

获取事件源对象的方式

获取坐标点

clientX  clientY（常用）

screenX screenY

pageX pageY 

兼容写法 （ie8以下）

其他坐标 

获取鼠标点坐标 

---

前言

       在JavaScript中，事件对象是与事件相关的对象，它包含了与事件触发相关的信息。事件对象提供了访问事件的属性和方法，以便在事件处理程序中对事件进行操作和响应。

事件原对象是指触发事件的对象，也称为事件的目标对象或事件的源对象。它是触发事件的元素或节点，可以是文档中的任何元素，如按钮、输入框、链接等。事件原对象是事件的直接触发者，通过它可以获取事件发生的具体位置、状态和其他相关信息。

        在JavaScript中，当事件被触发时，会自动创建一个事件对象，并将其作为参数传递给事件处理函数。通过事件对象，我们可以获取事件的类型、触发元素、鼠标位置、键盘按键等信息。通过事件原对象，我们可以进一步操作触发事件的元素，例如修改元素的样式、获取或设置元素的属性值等。

       了解事件对象和事件原对象的概念对于前端开发非常重要。它们使我们能够在事件发生时获取事件的相关信息，并根据需要对页面进行相应的操作和交互。通过使用事件对象和事件原对象，我们可以实现各种交互效果，例如表单验证、按钮点击、鼠标悬停等。

 事件对象（***重要***）

       每一个事件都具有一个事件对象，可以在绑定事件的执行函数当中获取该事件对象，事件对象是一个名为 event的全局变量，通过 event 就可以获取当前事件的事件对象。

       一些低版本浏览器中，没有event变量，可以通过 参数代替

事件对象的常见用处

事件对象的常见用处

    1.获取事件源对象

    2.获取该触发点的坐标

    3.结合鼠标和键盘准确的知道鼠标的按键和键盘的按键具体是哪一个

 相关代码

let wp = document.querySelector('.wp')
    wp.onmouseenter = function(){  //鼠标移入事件
        console.log(event);
    }
    //传入参数，表示事件对象，参数是形参，名字可以任意命名，一般为ev
    wp.onmouseenter = function(ev){  //鼠标移入事件
        // console.log(event);
        console.log(ev,'参数');
    }
    //火狐的低版本中没有event变量，因此可以通过以下方式设置兼容写法
    wp.onmouseleave = function(ev){
        let e = event || ev;
        console.log(e,'火狐兼容');
    }

事件原对象

事件原对象，指的是 真正触发该事件的元素对象

获取事件源对象的方式

1.标准浏览器中 通常使用 event.target 获取

2.ie中通常使用 event.srcElement 获取

谷歌都支持

let li = document.querySelectorAll('li')
for (let i = 0; i < li.length; i++) {
    li[i].onclick = function(){
        //获取事件源对象
        console.log(event.srcElement);
        event.target.style = `
        font-size:40px;
        color:#f00;
        `
        event.srcElement.style.background = 'pink'
        // li[i].style.fontSize = '40px'
        // li[i].style.color = '#f00'
    }
}

获取坐标点

clientX  clientY（常用）

clientX  clientY

    他们的兼容性很好，所有浏览器都支持

    clientX 当前触发点距离浏览器左边的距离

    clientY 当前触发点距离浏览器上边的距离

screenX screenY

screenX screenY

    他们的兼容性很好，所有浏览器都支持

    screenX 当前触发点距离屏幕左边的距离

    screenY 当前触发点距离屏幕上边的距离

pageX pageY 

 pageX pageY

    ie8 及其以上浏览器支持，所有非ie浏览器支持

    pageX 当前触发点距离页面左边的距离

    pageY 当前触发点距离页面上边的距离

兼容写法 （ie8以下）

    如果在ie8及其以下，还要获取当前点击的最高点距离页面顶部的距离，可以使用兼容写法

    ev.clientY + (document.doumentElement.scrolltop||document.body.scrolltop)

其他坐标 

    x,y  他们的值和 clientX  clientY 一致

    offsetX  offsetY  他们的值和 pageX pageY 一致

    layerX   layerY   他们的值和 pageX pageY 一致

    以上三个属性浏览器的兼容性不好，因此不常用

获取鼠标点坐标 

 document.onclick = function(ev){
        ev = event||ev;
        console.log('浏览器',ev.clientX,ev.clientY);
 
        console.log('屏幕',ev.screenX,ev.screenY);
 
        console.log('页面',ev.pageX,ev.pageY);
 
        console.log(ev);
    }