前端面试题集锦(三)

target和currentTarget区别于联系:

target是指一个触发对象的引用,currentTarget是用来标识事件的当前目标

例如:

<body>
<ul>
    <li>demo1</li>
    <li>demo2</li>
    <li>demo3</li>
    <li>demo4</li>
    <li>demo5</li>
</ul>
<script>
  var oUl = document.querySelectorAll('ul')[0];
  oUl.addEventListener('click',function(e){
    var oLi = e.target;
    var oLi2 = e.currentTarget;
    console.log(oLi1。innerHTML); //demo1,demo2
    console.log(oLi2.innerHTML); //点击一个出来全部的<li>demo1</li>.......<li>demo5</li>
    console.log(oLi1 == oLi2); //false
})
</script> </body>

e.target可以用来实现事件委托,原理是通过事件冒泡(或事件捕获)给父元素添加事件监听,e.target指向触发元素的事件,例如在上述的例子中,e.target指向用户点击的li,由于事件冒泡,li的点击事件冒泡到了ul上,用过给ul添加监听事件而达到了给每一个li添加监听事件的效果,而e.currentTarget指向的是给绑定事件监听的那个对象,即ul,不难发现e.currentTarget === this 返回true,而e.target === this 返回的是false

当li标签中含有子元素的时候(假如是span),e.target指的是触发事件的元素,可能是span,也可能是li,e.currentTarget指向li

在事件冒泡阶段,e,target和e.currentTarget是不相等的,但在事件目标阶段,两者是相等的。

<ul>
    <li>demo1</li>
    <li>demo2</li>
    <li>demo3</li>
    <li>demo4</li>
    <li>demo5</li>
</ul>
<script>
    var ul = document.querySelectorAll('ul')[0];
    var aLi = document.querySelectorAll('li');
    for(var i = 0;i < aLi.length;i++){
        aLi[i].addEventListener('click',function (e) {
            var oLi1 = e.target;
            var oLi2 = e.currentTarget;
            console.log(oLi1.innerHTML); //点击一次出现demo1,demo2,demo3
            console.log(oLi2.innerHTML); //同
            console.log(oLi1 === oLi2); //true
        })
    }
</script>

在本例中,事件的目标阶段即li,由于e.currentTarget 始终指向添加监听事件的那个对象,即aLi[i],也就是HTML中的li,而e.target指向触发事件监听的那个对象。也是li,所以两者此时相等。

数字向上取整:math.ceil(5/2)

数字向下取整:math.floor(5/2)

四舍五入:math.round(5/2)

丢弃小数部分,保留整数部分:parseInt(5/2)

原文地址:https://www.cnblogs.com/fanfan0916/p/9391822.html