JS面试—JS-Web-API（二）

最新推荐文章于 2022-02-15 22:56:23 发布

We_jia

最新推荐文章于 2022-02-15 22:56:23 发布

阅读量226

点赞数

分类专栏： JavaScript知识点总结

本文链接：https://blog.csdn.net/We_jia/article/details/90137532

版权

JavaScript知识点总结专栏收录该内容

12 篇文章 0 订阅

订阅专栏

一、题目

1、编写一个通用的事件监听函数

2、描述事件冒泡流程

3、对于一个无限下拉加载图片的页面，如何给每一个图片绑定事件

一、题目

1、编写一个通用的事件监听函数

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

2、描述事件冒泡流程

DOM树形结构
事件冒泡
阻止冒泡
冒泡的应用

3、对于一个无限下拉加载图片的页面，如何给每一个图片绑定事件

使用代理

二、知识点

2.1 通用事件绑定

  var btn=document.getElementById("btn1");
    btn.addEventListener('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();
        alert('clicked')
    })

改进版

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 div1=document.getElementById('div1')
    bindEvent(div1,'click','a',function(e){
        console.log(this.innerHTML)
    })

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

关于IE低版本的兼容性

IE低版本使用attachEvent 绑定事件，和W3C不一样

IE低版本使用量非常少，很多网站已经不支持

2.2 事件冒泡

参考文章 http://blog.sina.com.cn/s/blog_c112a2980102xks8.html

<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>
<script>
    function bindEvent(elem,type,fn){
         elem.addEventListener(type,fn)
    }
  var p1=document.getElementById('p1');
  var body=document.body
    bindEvent(p1,'click',function(e){
        e.stopPropagation()   //阻止冒泡  避免弹出激活以后  又弹出取消
        alert('激活')
    })
    bindEvent(body,'click',function(e){
        alert('取消')
    })
</script>

2.3 代理

<body>
 <div id="div1">
     <a href="#">a1</a>
     <a href="#">a2</a>
     <a href="#">a3</a>
     <a href="#">a4</a>
     <!--会随时新增更多的a标签-->
 </div>
<script>
var div1=document.getElementById('div1')
    div1.addEventListener('click',function(e){
        var target= e.target
        if(target.nodeName==='A'){
            alert(target.innerHTML)
        }
    })
</script>

使用代理的好处

代码简洁
减少浏览器内存占用

We_jia

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS面试—JS-Web-API（二）

目录一、题目1、编写一个通用的事件监听函数2、描述事件冒泡流程3、对于一个无限下拉加载图片的页面，如何给每一个图片绑定事件二、知识点2.1 通用事件绑定2.2 事件冒泡2.3 代理一、题目1、编写一个通用的事件监听函数function bindEvent(elem,type,selector,fn){ if(fn==null){ ...
复制链接

扫一扫