前端面试题精选（7）

阿峰_

已于 2022-10-17 14:10:13 修改

阅读量109

点赞数

文章标签：前端 javascript html5 面试开发语言

于 2022-06-17 10:46:44 首次发布

本文链接：https://blog.csdn.net/qq_43789598/article/details/125329373

版权

四十二：js 事件委托

四十三：ajax 请求的时候 get 和 post 方式的区别？

1、get 一般用来进行查询操作，url 地址有长度限制，请求的参数都暴露在 url 地址当中，如果传递中文参数，需要自己进行编码操作，

安全性较低。

2、post 请求方式主要用来提交数据，没有数据长度的限制，提交的数据内容存在于 http 请求体中，数据不会暴漏在 url 地址中。

四十四：解释 jsonp 的原理，以及为什么不是真正的 ajax

1、Jsonp 并不是一种数据格式，而 json 是一种数据格式，jsonp 是用来解决跨域获取数据的一种解决方案，

具体是通过动态创建 script 标签，然后通过标签的 src 属性获取 js 文件中的 js 脚本，该脚本的内容是一个函数调用，

参数就是服务器返回的数据，为了处理这些返回的数据，需要事先在页面定义好回调函数，本质上使用的并不是 ajax 技术。

四十五：我们给一个 dom 同时绑定两个点击事件，一个用捕获，一个用冒泡，你来说下会执行几次事件，然后会先执行冒泡还是捕获？

1、冒泡机制的执行顺序是自下往上的，当目标元素绑定的事件被触发时，事件会从目标元素自下向上依次执行。

2、捕获机制的执行顺序是自上往下的，当目标元素绑定的事件被触发时，事件会从 DOM 树最顶层自上向下依次执行，直到执行到目标元素为止。

四十六：想实现一个对页面元素的拖拽，请说说思路，以及用原生 JS 写一个相关案例

思路：

1. 给需要拖拽的节点绑定 mousedown, mousemove, mouseup 事件

2. mousedown 事件触发后，开始拖拽

3. mousemove 时，需要通过 event.clientX 和 clientY 获取拖拽位置，并实时更新位置

4. mouseup 时，拖拽结束

5. 需要注意浏览器边界的情况

实例代码：

<!DOCTYPE html>
<html lang="en">

<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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>
<script>
    var div_ = document.getElementsByTagName('div')[0];
    div_.onmousedown = function (e) {
        //获取当前的事件 window.event
        e = e || window.event;
        var offsetX_ = e.offsetX;
        var offsetY_ = e.offsetY;
        console.log(offsetX_, offsetY_);
        document.onmousemove = function (e) {
            e = e || window.event;
            console.log(e.clientX)
            div_.style.left = (e.clientX - offsetX_) + 'px';
            div_.style.top = (e.clientY - offsetY_) + 'px';
        }
    }
    div_.onmouseup = function () {
        document.onmousemove = '';
        // document.onmousemove = null;
    }
</script>