事件对象

最新推荐文章于 2024-05-21 19:09:41 发布

weixin_46370563

最新推荐文章于 2024-05-21 19:09:41 发布

阅读量60

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_46370563/article/details/104722334

版权

什么是事件？行为就是事件，事件的绑定方式有内联和外联，内联就是html的属性，在执行js中定义的函数，但是不推荐使用。外联就是在js代码中，使用选择器，选择元素后，通过on+事件名的方式，给定一个无名函数的方式。

事件对象
事件就是在事件发生时，事件处理函数内部，产生的一个对象。

event
在触发的事件的函数里面我们会接收到一个event对象,通过该对象获取我们需要的一些参数，下面是event对象的兼容写法：

 <body>
    <div id="box"></div>
</body>
<script>
    var obox = document.getElementById("box");

    obox.onclick = function(eve){
         console.log(eve);
         console.log(window.event);

        var e = eve || window.event;

        console.log(e);
    }

Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。以下是event对象常用的一些属性和方法：

鼠标属性：

<body>
    <div id="box"></div>
</body>
<script>
    var obox = document.getElementById("box");
	obox.onclick = function(eve){
        var e = eve || window.event；
        
        // 事件发生时，鼠标相对于当前元素的坐标，有兼容，谷歌有，火狐没有
        console.log(e.offsetX, e.offsetY);

        // 事件发生时，鼠标相对于页面的可视区域的坐标
        console.log(e.clientX, e.clientY);

        // 事件发生时，鼠标相对于页面的坐标
        console.log(e.pageX, e.pageY);
        
        // 事件发生时，鼠标相对于显示器的坐标
        console.log(e.screenX, e.screenY);
    }
</script>

键盘属性：

<body>
    <div id="box"></div>
</body>
<script>
    // 键盘事件不能随便加，因为不是每个元素都有焦点

    var obox = document.getElementById("box");

    // 此时，键盘事件要加给整个页面
    document.onkeydown = function(eve){
        var e = eve || window.event;
        // console.log(e.keyCode);

        // 获取键盘的ASC码的兼容写法：
        var code = e.which || e.keyCode;
        
 		 console.log(e.ctrlKey);      //CTRL
         console.log(e.shiftKey);     //SHIFT
         console.log(e.altKey);       //ALT

       if(e.ctrlKey && code == 13){           //CTRL+ENTER
            console.log("ctrl+回车");
        } 
    }
</script>

weixin_46370563

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
事件对象

什么是事件？行为就是事件，事件的绑定方式有内联和外联，内联就是html的属性，在执行js中定义的函数，但是不推荐使用。外联就是在js代码中，使用选择器，选择元素后，通过on+事件名的方式，给定一个无名函数的方式。事件对象事件就是在事件发生时，事件处理函数内部，产生的一个对象。event在触发的事件的函数里面我们会接收到一个event对象,通过该对象获取我们需要的一些参数，下面是event对...
复制链接

扫一扫