Web前端入门第 74 问:JavaScript 事件冒泡与事件捕获-牛翰网

Web前端入门第 74 问:JavaScript 事件冒泡与事件捕获

在讨论冒泡和捕获之前,先看这么一段代码: <style> .bd { border: 1px solid #000; padding: 8px; } </style> <div id="container1" class="bd"
Web前端入门第 77 问:JavaScript 由程序触发绑定事件的几种方式-牛翰网

Web前端入门第 77 问:JavaScript 由程序触发绑定事件的几种方式

开发中经常会遇这样的需求:点击 A 元素的时候,需要触发 B 元素的事件,比如:点击一个 div 元素,然后触发 input:file 的 click 事件,用来选择文件上传。 click 方法 以上需求可通过元素的 c...
Web前端入门第 68 问:JavaScript 事件循环机制中的微任务与宏任务-牛翰网

Web前端入门第 68 问:JavaScript 事件循环机制中的微任务与宏任务

JS 是单线程语言。这句话对不对? 按照目前的情况来看,JS 自从支持了 Web Worker 之后,就不再是单线程语言了,但 Worker 的工作线程与主线程有区别,在 Worker 的工作线程中无法直接操作 DOM...
Web前端入门第 51 问:移动端适配的视口元标签(meta)常见使用场景-牛翰网

Web前端入门第 51 问:移动端适配的视口元标签(meta)常见使用场景

经常查看网页源码的同学应该都有注意到,基本上面向移动端的所有网站都有个 <meta name="viewport" xxx> 这样的HTML元素。 为什么需要 meta 标签? 在移动端刚起步的时候,默认...
Web前端入门第 78 问:JavaScript 比较少见的模版字符串用法-牛翰网

Web前端入门第 78 问:JavaScript 比较少见的模版字符串用法

在 ES6 之前,JS 的多行字符串一直是开发难题,在处理多行字符串时,各种各样的方案都有~~ 在 JS 中,如果直接这样写多行字符串: const str1 = '第一行 第二行'; 那浏览器转过来就打脸...
Web前端入门第 52 问:JavaScript 的应用领域-牛翰网

Web前端入门第 52 问:JavaScript 的应用领域

截至目前,您应该对前端的 HTML + CSS 应该有了很清楚的认知,至少实现一个静态网页已经完全不在话下了。 当然,CSS 功能绝不止这些,一些不太常用的 CSS 相关知识,后续将通过案例进行分享。 ...
Web前端入门第 75 问:JavaScript 性能优化之事件委托(事件代理)原理-牛翰网

Web前端入门第 75 问:JavaScript 性能优化之事件委托(事件代理)原理

如今 Vue 大行其道,大部分开发场景直接使用 @click 就实现了事件绑定,可能都没思索过 JS 中的事件性能优化。 事件委托原理 事件委托 其主要是利用了事件冒泡这个特性。 以点击事件 click 为例...
Web前端入门第 76 问:JavaScript 鼠标事件(mouse) enter/leave 和 over/out 区别-牛翰网

Web前端入门第 76 问:JavaScript 鼠标事件(mouse) enter/leave 和 over/out 区别

题外话 在考察事件基础的时候,会经常被问及 click、mousedown、mouseup 它们三者执行的先后顺序是怎样的? 如果平时没太注意,这细节可能就会忽略,毕竟很少会在同一个元素上面同时绑定这三个...
Web前端入门第 69 问:JavaScript Promise 提供的方法都使用过吗?-牛翰网

Web前端入门第 69 问:JavaScript Promise 提供的方法都使用过吗?

Promise 这个 API 曾在 JS 领域掀起过血雨腥风,以前的大佬们都喜欢手搓一个自己的 Promise 用以理解 Promise 的原理。 Promise 的诞生,应该多少都有受到 jQuery 的异步方法 $.Deferred() 影响...
Web前端入门第 49 问:CSS offset 路径动画演示-牛翰网

Web前端入门第 49 问:CSS offset 路径动画演示

什么是路径动画? 随手画一条不规则的线,让元素按照这条不规则的线运动起来,这就是所谓的路径动画。 前面说过的动画都只能针对某一个 CSS 属性,要想实现路径动画可没办法,路径动画必须借助 ...