前端开发知识点以及相关面试题(二)

最新推荐文章于 2025-05-13 20:33:05 发布

趁着年轻吃点苦

最新推荐文章于 2025-05-13 20:33:05 发布

阅读量189

点赞数

分类专栏：前端面试文章标签：前端面试

本文链接：https://blog.youkuaiyun.com/g1197410313/article/details/86773965

版权

前端面试专栏收录该内容

1 篇文章

订阅专栏

事件

事件绑定

普通的事件绑定如下

var btn = document.getElementById('btn1');
btn.addEventListener('click', function(event) {
    event.preventDefault()  // 阻止默认行为
    event.stopPropagation()    // 阻止事件传播
    console.log('clicked')
})

先封装一个绑定事件的函数，现在看起来是有一些简单

function bindEvent(elem, type, fn) {
    elem.addEventListener(type, fn)
}

事件冒泡

<body>
    <div id="div1">
        <p id="p1">激活</p>
        <p id="p2">取消</p>
        <p id="p3">取消</p>
        <p id="p4">取消</p>
    </div>
    <div id="div2">
        <p id="p5">取消</p>
        <p id="p6">取消</p>
    </div>
</body>

现在我们要想实现点击id为p1的按钮弹出激活，点击其他任何一个p都弹出取消。

var body = docuemnt.body;

var p1 = document.getElementById('p1');

bindEvent(body, 'click', function() {
    alert('取消')
});

bindEvent(p1, 'click', function(e) {
    e.stopPropagation();  //  阻止向上冒泡
})

因为DOM中body是p的上级节点，绑定在p标签上面的事件会沿着DOM树一层一层向上冒泡，这就是事件冒泡。

事件代理

假设现在有这么一个场景：一个div里有很多个a标签，并且a标签的数量还可以动态的增加，那么我们如何快速的给每一个a都添加点击事件呢？

<div id="div1">
  <a href="#">我是按钮1</a>
  <a href="#">我是按钮2</a>
  <a href="#">我是按钮3</a>
  <a href="#">我是按钮4</a>
  <a href="#">我是按钮5</a>
</div>
<button>添加一个a</button>

这个时候我们就用到了事件代理，给a标签的父级元素也就是div添加点击事件，借助事件对象来给a标签添加点击事件

var div = document.getElementById('div1');
div.addEventListener('click', function(e) {
    var target = e.target;
    if (target.nodeName === 'A') {
        alert(target.innerHTML)
    }
})

来完善一下之前的绑定事件的函数

function bindEvent(elem, type, selector, fn) {
    if (fn == null) {
        fn = selector
        selector = null
    }
    
    elem.addEventListener(type, function(e) {
        var target
        if (selector) {
            target = e.target
            if (target.matches(selector)) {
                fn.call(target, e)
            }
        } else {
            fn(e)
        }
    })
}

然后按照下面这样使用，代码会简单很多

// 使用代理
var div = document.getElementById('div1');
bindEvent(div, 'click', 'a', function(e) {
    console.log(this.innerHTML)
})

//不使用代理
var a = document.getElementById('a1');
bindEvent(div, 'click', function(e) {
    console.log(a.innerHTML)
})

使用事件代理的优点：

代码简洁不少；
减少浏览器的内存占用。

Ajax

手写xhr，不借助任何库。

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
        if (xhr.status === 200) {
            alert(xhr.responseText)
        }
    }
}
xhr.open('GET', '/api', false)
xhr.send(null)

xhr.readyState的状态码说明：