javascript考点 —— 事件

最新推荐文章于 2021-10-14 09:25:59 发布

zhanghuali2019

最新推荐文章于 2021-10-14 09:25:59 发布

阅读量170

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/zhanghuali0210/article/details/82154818

版权

javascript 专栏收录该内容

22 篇文章 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')
})

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

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

建议对IE低版本的兼容性：了解即可，无需深究

如果遇到对IE低版本要求苛刻的面试，果断放弃

二、事件冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<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>
</body>
</html>

点击p1，显示激活，阻止了body的冒泡，而偶我们点击除了p1以外的按钮显示取消，假设点击p2，p2不断地冒泡，冒泡到body上面，显示了取消。

三、代理

事件冒泡地应用，代理。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="div1">
    <a href="#">a1</a>
    <a href="#">a2</a>
    <a href="#">a3</a>
    <a href="#">a4</a>
</div>
<script>
    var div1 = document.getElementById('div1')
    div1.addEventListener('click', function(e){
        var target = e.target    //e.target可以告诉你事件是从哪里触发的
        if(target.nodeName === 'A'){
            alert(target.innerHTML)
        }
    })
</script>
</body>
</html>

代理的好处：代码简洁、减少浏览器内存占用

五、题目解答：

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

解答：

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

描述事件冒泡流程

解答：按照DOM树形结构，开始事件冒泡，阻止冒泡，冒泡的应用（代理）

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

解答：使用代理。代理的有点：代码简洁、减少浏览器内存占用

zhanghuali2019

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript考点 —— 事件

一、通用事件绑定var btn = document.getElementById('btn1')btn.addEventListener('click', function(event){ console.log('clicked')})function bindEvent(elem, type, fn){ elem.addEventListener(type, fn...
复制链接

扫一扫

专栏目录