Java教程

事件参数event总结（JavaScript）

本文主要是介绍事件参数event总结（JavaScript），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

当我们使用属性绑定事件时如果需要事件参数e，需要传入event这个实参。

event事件信息对象，包含了事件目标和坐标信息
event.type事件类型

event.target

事件触发目标，谁触发了事件（不确定是谁）

event.currentTarget

事件目标本身，谁绑定了事件（总是指向事件目标）
this

this指向事件目标 == event.currentTarget

关于参数e的坐标问题

event.screenX, event.screenY

鼠标相对于电脑屏幕左上角的坐标

event.pageX, event.pageY

鼠标相对于网页左上角的坐标

event.clientX, event.clientY

鼠标相对于显示窗口左上角的坐标

event.layerX, event.layerY

鼠标相对于非静态定位的父级元素左上角的坐标,类似于绝对定位

event.offsetX, event.offsetY

鼠标相对于event.target出发事件的目标左上角的坐标

<div><button>点我</button></div>
    <!-- 使用属性绑定事件时, 如果需要事件参数e, 需要传入event这个实参 -->
    <script>
        // var data = prompt("提示")
        var div = document.querySelector("body div")
        div.onclick = function(event){
            // 每一个事件被触发时,都会向事件函数中传入一个参数, 这个参数是事件信息对象, 里边包含了事件目标,和坐标等信息
            console.log(event)
            // 获取事件类型
            console.log(event.type)
            // 获取事件触发目标, 谁触发了事件, 可以是事件目标div的子元素
            console.log(event.target)
            // 获取事件目标本身, 谁绑定了事件, 总是事件目标div
            console.log(event.currentTarget)
            // 在事件函数中this指向事件目标 == event.currentTarget
            console.log(this)

            // 关于坐标
            // 1, 鼠标相对于电脑屏幕左上角的坐标
            console.log(event.screenX, event.screenY)
            // 2, 鼠标相对于网页左上角的坐标
            console.log(event.pageX, event.pageY)
            // 3, 鼠标相对于显示窗口左上角的坐标
            console.log(event.clientX, event.clientY)
            // 4, 鼠标相对于非静态定位的父级元素左上角的坐标,类似于绝对定位
            console.log(event.layerX, event.layerY)
            // 5, 鼠标相对于event.target出发事件的目标左上角的坐标
            console.log(event.offsetX, event.offsetY)

        }
    </script>

这篇关于事件参数event总结（JavaScript）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航