继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

【九月打卡】第14天 前端工程师2022版 就业必备基础技术面试分析

大龄前端菜鸟
关注TA
已关注
手记 42
粉丝 6
获赞 6

课程名称: JS-Web-API-BOM、JS-Web-API事件

课程章节:Javascript面试课

课程讲师: 双越

课程内容:

JS-Web-API

学习课程之前,我们先来看一下这节会遇到哪些面试题?
1、如何识别浏览器类型?
2、分析拆解url各各部分?

接下来,看看知识点吧

◆navigator ◆screen

http://img4.mukewang.com/632734e3000125c709780509.jpg


◆history ◆location

http://img2.mukewang.com/6327350e0001192010550514.jpg


最后看看面试题的答案吧:

1、如何识别浏览器的类型

http://img4.mukewang.com/632735490001a3b411460494.jpg

2、分析拆解url各个部分

http://img3.mukewang.com/632735dd0001c44912400565.jpg

JS-Web-API事件

学习课程之前,我们先来看一下这节会遇到哪些面试题?
1、编写一个通用的事件监听函数
2、描述事件冒泡流程
3、无限下拉图片列表,如何监听每个图片的点击?

接下来,看看知识点吧
1、事件绑定

http://img.mukewang.com/6327377c00011a4e09890214.jpg

http://img3.mukewang.com/632737f700015b0d08740516.jpg

2、事件冒泡

http://img1.mukewang.com/6327383500012f6614510536.jpg

3、事件代理

http://img3.mukewang.com/632738580001403814320433.jpg

◆代码简洁

◆减少浏览器内存占用

◆但是,不要滥用


最后看看面试题的答案吧:

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

function bindEvent(elem, type, selector, fn) {
    if (fn == null) {
        fn = selector
        selector = null
    }
    elem.addEventListener(type, event => {
        const target = event.target
        if (selector) {
            // 代理绑定
            if (target.matches(selector)) {
                fn.call(target, event)
            }
        } else {
            // 普通绑定
            fn.call(target, event)
        }
    })
}

// 普通绑定
const btn1 = document.getElementById('btn1')
bindEvent(btn1, 'click', function (event) {
    // console.log(event.target) // 获取触发的元素
    event.preventDefault() // 阻止默认行为
    alert(this.innerHTML)
})

// 代理绑定
const div3 = document.getElementById('div3')
bindEvent(div3, 'click', 'a', function (event) {
    event.preventDefault()
    alert(this.innerHTML)
})

2、描述事件冒泡的流程

◆基于DOM树形结构

◆事件会顺着触发元素往上冒泡

◆应用场景:代理

3、无限下拉的图片列表,如何监听每个图片的点击?

◆事件代理

◆用e.target获取触发元素

◆用matches来判断是否是触发元素



打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP