JavaScript学习的第十七天

最新推荐文章于 2024-10-02 05:39:15 发布

十点差三分️

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量54

点赞数

文章标签： javascript 学习前端

本文链接：https://blog.csdn.net/cs_laomanong/article/details/124603839

版权

本文深入探讨了DOM的事件对象，包括键盘事件和鼠标事件的属性，如altKey、ctrlKey、shiftKey、keyCode等，并展示了如何获取鼠标坐标及键盘按键信息。同时，文章还介绍了如何处理事件冒泡和取消冒泡，以及如何设置函数参数的默认值。通过实例代码，阐述了在实际编程中如何利用这些特性进行事件处理。

摘要由CSDN通过智能技术生成

###DOM的事件对象

document.onclick=function(e){
        // console.log(e);
        // 浏览器兼容   IE 
        e=e||window.event;
        // window.event  IE浏览器
        console.log(e);
    }
document.onkeydown=function(e){
        console.log(e)
    }

给函数的参数设置默认值

    function func(a){
        a=a||10;
        console.log(a)
    }
    func();
    func(20);

###DOM的事件对象（键盘）

altKey 返回当事件被触发时,"ALT"是否被按下。

ctrlKey 返回当事件被触发时,"CTRL"是否被按下。

shiftKey 返回当事件被触发时,"SHIFT"是否被按下。

metaKey 返回当事件被触发时,"MATE"是否被按下（Mac系统）。

code 返回键盘的编码

key 返回按键的标识符

keyCode 返回按键的字符代码针对IE8以下的浏览器

which 返回按键的字符代码

target 返回事件作用的目标元素

bubbles 是否具有冒泡属性

cancelBubble 是否取消冒泡

type 返回事件类型

    document.getElementsByTagName("input")[0].onkeydown=function(e){
        var e=e||window.event;
        console.log(e)
        // e.cancelBubble=true
    }

###DOM的事件对象（鼠标）

altKey 返回当事件被触发时,"ALT"是否被按下。

ctrlKey 返回当事件被触发时,"CTRL"是否被按下。

shiftKey 返回当事件被触发时,"SHIFT"是否被按下。

metaKey 返回当事件被触发时,"MATE"是否被按下（Mac系统）。

type 返回事件类型

target 返回触发事件的目标元素

bubbles 是否具有冒泡属性

cancelBubble 是否取消冒泡

button

buttons

which 返回按下的键的编码(1左 2中 3右)

clientX

clientY

offsetX

offsetY

###鼠标事件中不同坐标的区别

clientX，clientY: 返回鼠标指针的坐标(可视区域)

    oBox.onmousedown=function(e){
        var e=e||window.event;
        console.log(e); 
        // console.log(e.clientX,e.clientY);
    }

pageX，pageY: 返回鼠标指针的坐标(整个网页) =clentX+滚动条卷去的部分

    oBox.onmousedown=function(e){
        var e=e||window.event;
        // console.log(e); 
        console.log(e.pageX,e.pageY);
        console.log(e.clientX,e.clientY);
    }

screenX，screenY:: 返回鼠标指针的坐标(整个屏幕区域)

    oBox.onmousedown=function(e){
        var e=e||window.event;
        // console.log(e); 
        console.log(e.screenX,e.screenY);
    }

offsetX，offsetY: 返回鼠标指针的坐标(触发事件的元素)

    oBox.onmousedown=function(e){
        var e=e||window.event;
        // console.log(e); 
        console.log(e.offsetX,e.offsetY);
        console.log(e.pageX,e.pageY);
    }