事件对象和绑定事件

YourLie_in_April

已于 2022-05-18 17:32:54 修改

阅读量212

点赞数 1

分类专栏： #JavaScript 文章标签： javascript

于 2022-05-18 17:32:17 首次发布

本文链接：https://blog.csdn.net/YourLie_in_April/article/details/124847056

版权

#JavaScript 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

事件对象：

event事件对象：每一个事件方法都有一个默认的参数，表示事件对象。（IE8的适配：let e = ev || window.event）

获取鼠标位置：

clientX和clientY：相对于浏览器可视窗口左上角原点

screenX 和screenY：相对于电脑屏幕的左上角

pageX 和 pageY：相对于页面文档流左上角原点

offsetX 和 offsetY：相对于触发事件的元素

事件绑定有两种方式：

1、传统绑定事件方式：on...

// 同一个元素，同一个事件，只能处理最后一个绑定的一个事件
// 之前的会被覆盖
btn[0].onclick = () => {
     console.log('大家好，我是渣渣辉！');
}
btn[0].onclick = () => {
     console.log('是兄弟就来砍我');
}

2、监听绑定事件方式：addEventListener（‘事件类型名(无on)’，函数）

// 同一个元素，同一个事件，可以绑定多个监听事件，而且会依次执行
btn[1].addEventListener('click', function () {
     console.log('我信你个鬼');
})
btn[1].addEventListener('click', function () {
     console.log('你个糟老头子坏得很');
})
// 删除监听函数     removeEventListener
// 注：想要删除，就不要写匿名函数
// 是在运行一次后再次触发时才会进行删除

小练习：鼠标移动提示框

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鼠标移动提示框</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        a {
            display: block;
            width: 100px;
            margin: 50px;
            text-align: center;
            background-color: yellowgreen;
        }

        #div_js {
            width: 200px;
            height: 200px;
            background-color: aqua;
            display: none;
            position: absolute;
        }
    </style>
</head>

<body>
    <a href="#">简介1</a>
    <a href="#">简介2</a>
    <a href="#">简介3</a>
    <a href="#">简介4</a>
    <div id="div_js"></div>
    <script>
        let arr_js = ['我是简介1的内容', '我是简介2的内容', '我是简介3的内容', '我是简介4的内容'];
        let as = document.querySelectorAll('a');
        let div = document.getElementById('div_js');
        for (let i = 0; i < as.length; i++) {
            // 获取下标
            as[i].index = i;
            // 移入显示
            as[i].onmouseover = function () {
                // 数组中的内容添加到div中
                div.innerHTML = arr_js[this.index];
                div.style.display = 'block';
            }
            // 移出消失
            as[i].onmouseout = () => {
                div.style.display = 'none'
            }
            // 事件对象，添加鼠标移动事件
            as[i].onmousemove = function (ev) {
                let e = ev || window.event
                // 让div跟着鼠标移动，让div和鼠标的位置有点间距
                div.style.left = e.clientX + 10 + 'px';
                div.style.top = e.clientY + 10 + 'px';
            }
        }
    </script>
</body>

</html>

YourLie_in_April

关注

1
点赞
踩
0

收藏

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

事件对象：ev事件对象：每一个事件方法都有一个默认的参数，表示事件对象。（IE8的适配：let e = ev || window.event）获取鼠标位置：clientX和clientY：相对于浏览器可视窗口左上角原点screenX 和screenY：相对于电脑屏幕的左上角pageX 和 pageY：相对于页面文档流左上角原点offsetX 和 offsetY：相对于触发事件的元素事件绑定有两种方式：1、传统绑定事件方式：on...// 同一个元素，同一个事件，只能..
复制链接

扫一扫