JS事件对象

最新推荐文章于 2022-05-26 21:09:04 发布
最新推荐文章于 2022-05-26 21:09:04 发布
阅读量168 收藏 1
点赞数
分类专栏： JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45722135/article/details/108262769
版权

事件对象----event=ev。

 

常用的属性：

1 screenX和screenY是以屏幕为基准进行测量；当前元素距离屏幕的尺寸。

2 clientX和clientY是以当前文档（绝对定位）为基准，不合适用于IE6-8.

3 pageX和pageY是以当前可视区域为基准，类似于固定定位。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
<div></div>
<script>
    document.addEventListener('click',function (ev) {
        var e=ev || window.event;

        //alert(e.screenX +',' + e.screenY);
        alert(e.clientX +',' + e.clientY);
       // alert(e.pageX +',' + e.pageY);


    })
</script>

</body>
</html>

 

案例：结合scroll对象和事件对象，做出放大镜案例。

 

电商平台，购物网页经常有的将商品进行放大，便于观察。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
            border: none;
        }
        #box{
            width: 350px;
            height: 350px;
            /*background-color: red;*/
            margin:100px 0 0 100px;
            position: relative;
        }
        #small_box{
            width: 100%;
            height: 100%;
            border: 1px solid #cccccc;
            box-sizing: border-box;
            position: relative;
        }
        #small_box img{
            width: 100%;
            height: 100%;
        }
        #mask{
            width: 100px;
            height: 100px;
            background-color: rgba(255,255,0, .4);
            position: absolute;
            left: 0;
            top: 0;
            cursor: move;
            /*隐藏*/
            display: none;
        }
        #big_box{
            width: 600px;
            height: 600px;
            border: 1px solid #cccccc;
        /*    定位*/
            position: absolute;
            left: 360px;
            top: 0;
            overflow: hidden;
            display: none;

        }
        #big_box img{
            position: absolute;
            left: 0;
            top: 0;
        }
        #list{
            margin: 20px 0 0 100px;
        }
        #list ul li{
            float: left;
            margin: 5px;
            cursor: pointer;

        }
    </style>
</head>
<body>
<div id="box">
    <div id="small_box">
        <img src="images/pic001.jpg" alt="">
        <span id="mask"></span>
    </div>
    <div id="big_box">
        <img src="images/pic01.jpg" alt="" style="position: absolute;left:0;top:0;">
    </div>
</div>
<div id="list">
    <ul>
        <li><img src="images/pic0001.jpg" alt=""></li>
        <li><img src="images/pic0002.jpg" alt=""></li>
        <li><img src="images/pic0003.jpg" alt=""></li>
    </ul>
</div>

<script>
    window.addEventListener('load',function (ev) {
        //1获取标签
        var box=document.getElementById('box');
        var small_box=box.children[0];
        var big_box=box.children[1];
        var mask=small_box.children[1];
        var big_img=big_box.children[0];
        var list_lis=document.getElementById('list').getElementsByTagName('li');

        //2监听鼠标进入小盒子
        small_box.addEventListener('mouseover',function () {

            //2.1 显示隐藏内容
            mask.style.display='block';
            big_box.style.display='block';

            //2.2监听鼠标移动
            small_box.addEventListener('mouseover',function (ev) {
                var e=ev || window.event;

                //2.3求出鼠标坐标
                var pointX=e.pageX-box.offsetLeft - mask.offsetWidth*0.5;
                var pointY=e.pageY-box.offsetTop - mask.offsetHeight*0.5;

                //2.4边界检测
                if (pointX<0){//左右
                    pointX=0;
                }else if(pointX>=small_box.offsetWidth - mask.offsetWidth ){
                    pointX=small_box.offsetWidth - mask.offsetWidth
                }

                if (pointY<0){//上下
                    pointY=0;
                }else if(pointY>=small_box.offsetHeight - mask.offsetHeight ){
                    pointY=small_box.offsetHeight - mask.offsetHeight
                }


                //2.5让放大镜走起来
                mask.style.left=pointX+'px';
                mask.style.top=pointY+'px';

                //2.6让大盒子中图片走起来
                /**
                 * 公式：
                 smallX / bigX = Box.width / 大盒子宽度
                 bigX=smallX / (Box.width / 大盒子宽度)
                 */
                big_img.style.left= -pointX / (small_box.offsetWidth / big_box.offsetWidth)+'px';
                big_img.style.top=-pointY / (small_box.offsetHeight / big_box.offsetHeight)+'px';


            })
        });

        //3监听鼠标离开小盒子
        small_box.addEventListener('mouseout',function () {
            //3.1 显示隐藏内容
            mask.style.display='none';
            big_box.style.display='none';
        });
        //4遍历列表图片
        for (var i=0;i<list_lis.length;i++){
            (function (i) {
                var img=list_lis[i];
                img.onmouseover=function () {
                    small_box.children[0].src='images/pic00'+ (i+1) +'.jpg';
                    big_box.src='images/pic0'+ (i+1) +'.jpg';

                }

            })(i)
        }
    })
</script>

</body>
</html>

 

junlingshiwo
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript常见事件对象与操作实例总结
12-09
本文实例讲述了JavaScript常见事件对象与操作。分享给大家供大家参考，具体如下： 触发 DOM 上的事件时，会生成一个事件对象 event，它包含着所有与事件有关的信息，诸如导致事件的元素、事件的类型以及其他与特定事件相关的信息。所有的浏览器都支持 event 对象，但支持的方式不同。 1 DOM 中的事件对象 兼容 DOM 的浏览器会将 event 对象传入事件处理程序（DOM0 级与 DOM2 级都支持）： var btn = document.getElementById("myBtn"); btn.onclick = function (event) { console.l
浅谈Javascript事件对象
10-20
本文主要介绍了Javascript事件对象的相关实例。具有一定的参考价值，下面跟着小编一起来看下吧
JS—事件对象
weixin_30488085的博客
01-21 62
在触发DOM上的某个事件时，会产生一个事件对象event。这个对象中包含着所有与事件有关的信息。包括导致事件的元素，事件的类型以及其他与特定事件相关的信息。 举例鼠标操作导致的事件对象中，会包含鼠标位置的信息，键盘操作导致的事件对象中，会包含按下的键有关的信息， 所有浏览器都支持event对象，event对象会传入DOM0级，DOM2级，HTML指定，的事件处理程序中，但支持的方式不同，所以也...
JS中的事件对象
clh386的博客
11-18 534
在触发DOM上的某个事件时，会产生一个事件对象event，这个对象包括着所有与事件有关的信息。包括导致事件的元素，事件的类型及其他与特定事件相关的信息。例如，鼠标操作导致的事件对象中，会包含鼠标位置的信息，而键盘操作导致的事件中，会包含与按下的键有关的信息。所有浏览器都支持event事件，但支持方式不同。包括this和target和currentTarget的区别分析。preventDefault()阻止默认行为。
事件对象——JS
mantou_riji的博客
04-07 307
文章目录事件对象简单介绍实例一：实现鼠标位置的记录实例二：div跟随鼠标移动 事件对象简单介绍 事件对象: 当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数. 在事件对象中封装了当前事件相关的一切信息，比如:鼠标的坐标键盘哪个按键被按下鼠标滚轮滚动的方向…… 验证： areaDiv.onmousemove = function(event){ alert(event); // alert("我移动了"); }
js 事件对象（一）
徐龙辉的博客
07-25 596
一、什么是事件对象 在触发DOM上的某个事件时，会产生一个事件对象event。这个对象中包含着所有与事件有关的信息。 包括导致事件的元素，事件的类型以及其他与特定事件相关的信息。 【举例】 鼠标操作导致的事件对象中，会包含鼠标位置的信息， 键盘操作导致的事件对象中，会包含按下的键有关的信息 二、事件对象的兼容性问题及解决方案 document.onclick = func
JavaScript 事件对象的实现
10-29
前我写过一篇关于JavaScript如何实现面向对象编程的文章。今天，我写这篇文章跟大家讨论一下，如何实现事件。
JavaScript学习笔记之JS事件对象
10-24
本文介绍了javascript的事件对象的相关资料,需要的朋友可以参考下
JavaScript 事件对象介绍
10-24
主要介绍了JavaScript 事件对象介绍,需要的朋友可以参考下
JavaScript事件对象event用法分析
10-18
主要介绍了JavaScript事件对象event用法,结合实例形式分析了事件对象event中常用的属性、方法、相关操作技巧与注意事项,需要的朋友可以参考下
JavaScript中的Event事件对象详解
weixin_34209406的博客
10-07 133
JavaScript事件【event】在JavaScript中对于事件来讲，首先，我们需要了解这样几个概念：事件；事件处理程序；事件类型；事件流；事件冒泡；事件捕获；事件对象；浏览器内核；事件绑定；事件方面的性能优化（事件委托、移除事件处理程序）；常见的浏览器兼容问题等。什么是事件event： JavaScript事件是：浏览器、文档（document）窗口中的发生的特定的...
【js基础】事件对象
在热爱技术的路上一直前行。
05-26 4055
1.什么是事件对象 官方解释：event 对象代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态等。 简单理解：事件发生后，跟事件有关的一系列信息数据的集合都放到整个对象里面，这个对象就是事件对象event，它有很多属性和方法。 结果： 可以将代码中的event换成e，当我们注册事件时，event对象会被系统自动创建，并以此传递给事件处理函数。我们不需要传递实参。 2. 事件对象的兼容性方案 3. 事件对象的常见属性和方法 事件对象属性和方法 说明 e.target 返
js中常见的事件对象
小枫的博客
12-18 668
js中常见的事件对象
⑦JavaScript 事件
一个努力学习的程序猿
04-09 240
JavaScript事件事件对象 Event ※例 ※ （clientX cilentY）练习 ※ （使div可以跟随鼠标移动）事件的冒泡 ※ （Bubble）例事件的委派 ※事件的绑定 ※事件的传播 ※总结 ※※ 本人是个新手，写下博客用于自我复习、自我总结。 如有错误之处，请各位大佬指出。 学习资料来源于：尚硅谷 事件 • 关于事件实际上我们已经初步接触过了，指的就是用户与浏览器交互的一...
js中事件对象event
热门推荐
冰雪为融的博客
03-06 1万+
一、Event对象 Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。 事件通常与函数结合使用，函数不会在事件发生前被执行！ 当一个事件发生的时候，和当前这个对象发生的这个事件有关的一些详细信息（包括导致事件的元素、事件的类型、以及其它与特定事件相关的信息等。这个对象是在执行事件时，浏览器通过函数传递过来的。）都会被临时保存到一个指定的地方...
js 事件对象
koromon的博客
08-17 292
任务要求效果预览事件理解事件流事件流描述页面接收事件的顺序 事件冒泡流（IE和现代浏览器），由最具体的元素传播到不具体的节点。建议使用 事件捕获流（现代浏览器），由不具体的节点到具体的节点 DOM2级事件规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。Tips: IE9及以上才全部实现 DOM2级 事件（事件流）。使用事件处理程序事件就是用户或者浏览器执行的某种动作，而响应某个事
js事件对象
m0_63400611的博客
12-09 153
事件对象简介 event对象代表时间的状态,比如键盘按键的状态,鼠标的位置,鼠标按钮的状态 事件发生后,跟事件相关的一系列信息数据的集合都放导这个对象里面,对象就是事件对象event <body> <div>123</div> <script> var div = document.querySelector('div'); div.onclick = function(e) { console.log(e); c
JavaScript事件对象(event)详解
总结来说，event对象在JavaScript事件处理中起着至关重要的作用，它提供了事件相关信息的访问接口。理解和熟练使用event对象是提升JavaScript事件处理能力的关键。通过阅读《Web前端开发精品课》这样的专业书籍，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值