JavaScript学习笔记（七）：事件

最新推荐文章于 2024-05-17 13:52:13 发布

红毛乌龟

最新推荐文章于 2024-05-17 13:52:13 发布

阅读量55

点赞数 1

分类专栏： Web开发文章标签： javascript

本文链接：https://blog.csdn.net/daishabby2486/article/details/130470629

版权

Web开发专栏收录该内容

11 篇文章 1 订阅

订阅专栏

一、事件

1.1 事件对象

onmousemove

该事件将会在鼠标在元素中移动时被触发

事件对象：

当事件的响应函数被触发时，浏览器每次都会将一个事件作为实参传递进响应函数

- 在事件对象中，封装了当前事件相关的一切信息，比如鼠标的坐标，键盘在哪个位置按下，鼠标滚轮滚动的方向。。。

        window.onload = function () {
            let areaDiv = document.getElementById("")
            areaDiv.onmousemove = function (event) {
                /*
                 * clientX可以获取鼠标指针的水平坐标
                 * clientY可以获取鼠标指针的垂直坐标
                 */
                let x = event.clientX;
                let y = event.clientY;

                alert("x = "+x+" , y = "+y);
            }
        };

在IE8中，响应函数被触发时，浏览器不会传递事件对象，在IE8及以下的浏览器中，是将事件对象作为window对象的属性保存的

// 处理兼容性的问题
if (!event) {
    event = window.event;
}

event = event || window.event;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box1 {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            /*
             * 使div可以跟随鼠标移动
             */
            let box1 = document.getElementById("box1");
            document.onmousemove = function (event) {
                // 获取滚动条滚动的距离
                /*
                 * chrome认为浏览器的滚动条是body的，可以通过body.scrollTop来获取
                 * 火狐则认为浏览器的滚动条是HTML的
                 */
                let str = document.body.scrollTop || document.documentElement.scrollTop;
                let sl = document.body.scrollLeft || document.documentElement.scrollLeft;
                /*
                 * clientX可以获取鼠标指针的水平坐标
                 * clientY可以获取鼠标指针的垂直坐标
                 * 
                 * clientX和clientY用于获取鼠标在当前的可见窗口的坐标
                 * div的偏移量是相对于整个页面的
                 * 
                 * pageX和pageY可以获取鼠标相对于当前页面的坐标
                 * 但是这两个在IE8中不支持
                 */
                let x = event.clientX;
                let y = event.clientY;

                box1.style.left = x + str + "px";
                box1.style.top = y + sl + "px";

            };
        };
    </script>
</head>
<body>

<div id="box1"></div>

</body>
</html>

1.2 事件的冒泡

事件的冒泡（Bubble）指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发

在开发中，大部分冒泡是有用的，如果不希望发生事件冒泡，可以通过事件对象来取消冒泡。

event.cancelBubble = true;

1.3 事件的委派

指将事件统一绑定给元素共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件

事件的委派是利用了冒泡，通过委派可以减少事件的绑定次数，提高程序的性能

event.target表示触发事件的对象

ul.onclick = function (event) {
    if (event.target.className == "link") {
        alert();
    }
};

1.4 事件的绑定

使用对象.事件=函数的形式绑定响应函数，它只能同时为一个元素的一个事件绑定一个响应函数，不能绑定多个，如果绑定多个，则后边的会覆盖掉前面的

addEvebtListener()

通过这个方法也可以为元素绑定响应函数

参数：

- 事件的字符串，不要on

- 回调函数，当事件触发时该函数被调用

- 是否在捕获阶段触发事件，需要一个布尔值，一般传false

btn.addEventListener("click", function () {}, false);

使用这个方法可以同时为一个元素的相同事件同时绑定多个响应函数，这样当事件被触发时，响应函数将会按照函数的绑定顺序执行。

但是该方法不支持IE8及以下的浏览器

在IE8中可以使用attachEvent()来绑定事件

参数

- 事件的字符串，要on

- 回调函数

这个方法可以为一个事件绑定多个处理函数

不同的是它是后绑定，先执行，执行顺序和addEventListener相反

function bind (obj, eventStr, callback) {
    if (obj.addEventListener) {
        obj.addEventListener(eventStr, callback, false);
    } else {
        obj.attachEvent("on"+eventStr, function () {
            callback.call(obj);
        });
    }
};

1.5 事件的传播

关于事件的传播，网景公司和微软公司有不同的看法

- 微软公司认为事件的传播应该由内向外传播，也就是当事件触发时，应该先触发当前元素上的事件，然后再向当前元素的祖先元素传播，也就是说事件应该在冒泡阶段执行

- 网景公司认为事件的传播应该由外向内传播，也就是当事件触发时，应该先触发当前元素的祖先元素，然后向该元素传播

W3C综合了两个公司的方案，将事件传播分为了三个阶段：

- 第一阶段：捕获阶段

在捕获阶段时，从最外层的祖先元素，向目标元素进行事件的捕获，，但是默认此时不会触发事件

- 第二阶段：目标阶段

事件捕获到目标元素，捕获结束开始在目标元素上触发事件

- 第三阶段：冒泡阶段

事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件

如果希望在捕获阶段就触发事件，可以将addEventListener()的第三个参数设置为true

IE8及以下的浏览器没有捕获阶段

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box {
            height: 100px;
            width: 100px;
            background-color: red;
            position: absolute;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            /*
             *  拖拽box元素
             *  - 拖拽流程
             *      1.当鼠标在被拖拽元素上按下时，开始拖拽 onmousedown
             *      2.当鼠标移动时，被拖拽元素跟随鼠标移动 onmousemove
             *      3.当鼠标松开时，被拖拽元素固定在当前位置 onmouseup
             */
            let box = document.getElementById("box");
            box.onmousedown = function (event) {
                let ol = event.clientX - box.offsetLeft;
                let ot = event.clientY - box.offsetTop;

                document.onmousemove = function (event) {
                    let left = event.clientX - ol;
                    let top = event.clientY - ot;

                    box.style.left = left + "px";
                    box.style.top = top + "px";
                };

                document.onmouseup = function () {
                    document.onmousemove = null;
                    document.onmouseup = null;
                }
            };
            /*
             *  当我们拖拽应该网页中的内容时，浏览器会默认去搜索引擎中搜索内容，
             *  此时会导致拖拽功能的异常，这个是浏览器提供的默认行为，
             *  如果不希望发生这个行为，则可以通过return false来取消默认行为
             *
             *  但是这招对IE8不起作用
             */
            return false;
        };
    </script>

</head>
<body>

<div id="box"></div>

</body>
</html>

1.6 滚轮的事件

onmousewheel

鼠标滚轮滚动事件，会在鼠标滚动时触发，但是火狐不支持。

在火狐中使用DOMMouseScroll来绑定滚动事件，注意该事件需要通过addEventListener()函数来绑定

event.wheelDeta

可以获取鼠标滚轮滚动的方向，向上滚是正值，向下滚是负值

但是该属性火狐依旧不支持，在火狐中，我们使用event.detail，向上滚为负，向下滚为正

滚轮滚动时，如果浏览器有滚动条，滚动条会随之滚动，这是浏览器的默认行为，如果不希望发生，可以取消默认行为return fasle

使用addEventListener()方法绑定响应函数，取消默认行为时，不能使用return fasle，需要使用event.preventDefault()行为

不过IE8不支持这个

1.7 键盘事件

onkeydown

按键被按下

对于onkeydown来说，如果按着不松手，事件会连续被触发

- 第一次和第二次被触发时，时间间隔会稍微长一点，第二次以后会非常迅速。

onkeyup

按键被松开

键盘事件一般会绑定给可以获取焦点的对象，或者是document

document.onkeydown = function () {
    console.log();
};

keyCode

通过其获取案件的编码，通过它可以判断哪个案件被按下

除了keyCode，事件对象中还提供了几个属性

- altKey

- ctrlKey

- shiftKey

来判断alt，ctrl，shift是否被按下

在文本框中输入内容，属于onkeydown的默认内容，如果使用return false来取消默认行为，那么输入的内容不会出现在文本框中。

学习的是B站尚硅谷的视频课程：

尚硅谷JavaScript基础&实战丨JS入门到精通全套完整版

红毛乌龟

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习笔记（七）：事件

JavaScript学习笔记（七），记录了事件的一些常用方法。
复制链接

扫一扫

专栏目录

JavaScript学习笔记（七）：事件

一、事件

1.1 事件对象

1.2 事件的冒泡

1.3 事件的委派

1.4 事件的绑定

1.5 事件的传播

1.6 滚轮的事件

1.7 键盘事件

“相关推荐”对你有帮助么？