前端JavaScript面试技巧笔记（9）

最新推荐文章于 2020-09-01 09:03:00 发布

三回啊三回

最新推荐文章于 2020-09-01 09:03:00 发布

阅读量205

点赞数

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

本文链接：https://blog.csdn.net/remmine/article/details/87366367

版权

JavaScript 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

知识点：

#通用事件绑定

var btn = document.getElementById('btn1');
btn.addEventListner('click',function(event){
    console.log('clicked');
})

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

var a = document.getElementById('link1');
bindEvent(a,'click',function(e){
    e.preventDefault();//阻止默认行为，对于a标签，阻止它跳转
    alert('clicked');
})

#IE低版本兼容性

IE低版本使用attachEvent绑定事件，和W3C便准不一样
IE低版本使用量很少，很多网站都已经不支持
这部分了解即可，无需深究

#事件冒泡

<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>

需求：点击p1提示激活，点击别的取消段落提示取消；
事件冒泡是从下级往父级冒，先显示子节点的绑定事件，再不断往父级寻找绑定事件；
所以这里可以给p1绑定激活函数，然后给body绑定取消函数，这里就符合了所有取消的功能，但是激活按钮会在
提示激活之后又冒泡到body提示取消，所以要阻止冒泡方法stopPropatation()；

var p1 = document.getElementById('p1');
var body = document.body;
bindEvent(p1,'click',function(e){
    e.stopPropatation();
    alert('激活');
})
bindEvent(body,'click',function(e){
    alert('取消');
})

#代理

对于一个节点内子节点数量不确定，随时可能增加的情况，用代理的方法给所有子节点绑定事件；
给父级绑定事件，用target寻找触发节点；
如：
<div id="div1">
    <a href="#">a1</a>
    <a href="#">a2</a>
    <a href="#">a3</a>
    <a href="#">a4</a>
</div>

var div1 = document.getElementById("div1");
div1.addEventListener('click',function(e){
    var target = e.target;    //target返回的是触发该事件的节点
    if(target.nodeName === 'A'){
        alert(target.innerHTML);
    }
})

代理的有点：
1、代码简洁，不用对每个节点都绑定事件
2、给浏览器的压力小

#完善绑定事件函数

完善后的绑定事件，多了一个selector参数来给代理使用
function bindEvent(elem,type,selector,fn){
    if(fn == null){            //这一块判读针对没有用到代理的情况，第三个参数传进来的会是function，所以把第三个参数赋值给fn，把selector赋值为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);
        }
    })
}

有代理的情况使用this，就可以用call把触发事件的节点传进来；
var div1 = document.getElementById('div1');
bindEvent(div1,'click','a',function(e){
    console.log(this.innerHTML);
})

三回啊三回

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端JavaScript面试技巧笔记（9）

知识点： #通用事件绑定var btn = document.getElementById('btn1');btn.addEventListner('click',function(event){ console.log('clicked');})function bindEvent(elem,type,fn){ elem.addEventListener(...
复制链接

扫一扫