JavaScript面试题

最新推荐文章于 2024-03-16 18:56:25 发布

今天晚上一定要早睡

最新推荐文章于 2024-03-16 18:56:25 发布

阅读量84

点赞数 1

分类专栏：面试题文章标签： javascript

本文链接：https://blog.csdn.net/qq_48192192/article/details/120260298

版权

面试题专栏收录该内容

3 篇文章 0 订阅

订阅专栏

对this ,call, apply,bind的理解

1.在浏览器里，在全局范围内this指向window对象
2.在函数中，this永远指向最后调用他的那个对象
3.构造函数中，this指向new出来的那个新的对象
4.call，apply，bind中的this被绑定在指定的那个对象上
5.箭头函数中this比较特殊，箭头函数this为父作用域的this，不是调用时的this，要知道前四种方式
6.apply，call，bind都是js给函数内置的一些API，调用他们可以为函数指定this的执行，同时也可以

数据检测类型判断：

1.Object.prototype.toString.call();

var test='hello';
console.log(Object.prototype.toString.call(test));  //  [object,String ]

2.constructor
3.instanceOf
4.typeOf

介绍下事件代理，主要解决什么问题，有什么优缺点

委托（代理）事件是那些被绑定到父级元素的事件，但是只有当满足一定匹配条件时才会被挪。
原理：利用冒泡的原理,把事件添加到父元素上,委托它们父级代为执行事件
好处：提高性能,减少内存,对于新添加的元素也会有之前的事件
坏处：1.事件委托基于冒泡，不冒泡的事件不支持
2.层级过多，冒泡剁成中可能被中间层阻止
3.如果把所有事件都用事件委托，可能会出现事件误判，即不该触发事件的被绑定了

写一个点击li弹出内容，并且动态添加li之后有效的demo

	<!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>
	</head>
	<style>
	<body>
	    <ul id="myul">
	        <li>《喜羊羊与灰太狼》</li>
	        <li>《熊出没》</li>
	        <li>《猪猪侠》</li>
	    </ul>
	    <script>
	        var lis=document.getElementsByTagName('li');
	        var lis_length=lis.length;
	        for(var i=0;i<lis_length;i++){
	            lis[i].onclick=function(){
	                alert('动画片');
	            }
	        }
	        var t=document.createTextNode('《樱桃小丸子》');
	        var li=document.createElement('li');
	        var ul=document.getElementById('myul');
	        li.appendChild(t);
	        ul.appendChild(li);
	        ul.onclick=function(){
	            alert('动画片');
	        }
	    </script>
	</body>
	</html>

如何让事件先冒泡后捕获
根据w3c标准，应先捕获再冒泡。若要实现先冒泡后捕获，给一个元素绑定两个addEventListener，其中一个第三个参数设置为false（即冒泡），另一个第三个参数设置为true（即捕获），调整它们的代码顺序，将设置为false的监听事件放在设置为true的监听事件前面即可。

	<!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>
	</head>
	<style>
	    #a{
	        width: 100px;
	        height: 100px;
	        background-color: pink;
	    }
	    #b{
	        width: 50px;
	        height: 50px;
	        background-color: green;
	    }
	</style>
	<body>
	    <div id="a">
	        <div id="b"></div>
	    </div>
	    <script>
	        var a=document.getElementById('a');
	        var b=document.getElementById('b');
	        a.addEventListener('click',function(){
	            alert('a');
	        },false)  //先冒泡
	        a.addEventListener('click',function(){
	            alert('aa');
	        },true)  //后捕获
	        b.addEventListener('click',function(){
	            alert('b');
	        },false)
	        b.addEventListener('click',function(){
	            alert('bb')
	        },true)
	
	    </script>
	</body>
	</html>

什么是事件流
事件流是指从页面接收事件的顺序
包括事件捕获，事件触发，事件冒泡
事件捕获：不具体的节点较早接收事件，具体的节点最后接收事件（从外向内）
事件触发：处理事件
事件冒泡：事件由最具体的节点先进行接收，再逐渐向上级传播到不具体的节点进行接收（从内向外）

如何阻止事件冒泡
e=e||window.event;
If(e.stopPropagation){
e.stopPropagation();
}else{
e.cancleBubble=true; //兼容IE
}

target和currentTarget的区别
两者在没有冒泡的情况下是一样的，但是用了事件委托之后就不一样了
1.Target在事件流的目标阶段；currentTarget在事件流的捕获，目标及冒泡阶段；
2.currentTarget指事件所绑定的元素，而target指触发事件的具体元素；
3.事件真正的发送者是target，注册监听器的是currentTarget（不会改变）
移动端存在点击穿透的可能
在点击关闭按钮后关闭遮罩层后面的元素如果有点击事件会点击穿透问题

移动端与pc端点击事件的不同:
pc端你点击之后，长按不放，松开时，他会跳转执行方法。
移动端如果是上述情况，它则不会跳转从而执行方法。