10 2020 档案
摘要：window.onresize 是调整窗口大小加载事件, 当触发时就调用的处理函数。 注意： 只要窗口大小发生像素变化，就会触发这个事件。 我们经常利用这个事件完成响应式布局。 window.innerWidth 当前屏幕的宽度 <!DOCTYPE html> <html lang="en"> <h
阅读全文
摘要：页面（窗口）加载事件（2种） 第1种 window.onload 是窗口 (页面）加载事件，当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS 文件等), 就调用的处理函数。 第2种 DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等。
阅读全文
摘要：BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。 BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。 BOM 缺乏标准，JavaScript 语法的标准化组织是 ECMA，DOM 的标准
阅读全文
摘要：要求：当我们在文本框中输入内容时，文本框上面自动显示大字号的内容。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, in
阅读全文
摘要：当我们按下 s 键， 光标就定位到搜索框（文本框获得焦点）。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initi
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv
阅读全文
摘要：事件冒泡本身的特性，会带来的坏处，也会带来的好处。 什么是事件委托 把事情委托给别人，代为处理。 事件委托也称为事件代理，在 jQuery 里面称为事件委派。 说白了就是，不给子元素注册事件，给父元素注册事件，把处理代码在父元素的事件中执行。 生活中的代理： <!DOCTYPE html> <htm
阅读全文
摘要：事件冒泡本身的特性，会带来的坏处，也会带来的好处。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sc
阅读全文
摘要：html中一些标签有默认行为，例如a标签被单击后，默认会进行页面跳转。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,
阅读全文
摘要：e.target 和 this 的区别 this 是事件绑定的元素（绑定这个事件处理函数的元素） 。 e.target 是事件触发的元素。 常情况下terget 和 this是一致的，但有一种情况不同，那就是在事件冒泡时（父子元素有相同事件，单击子元素，父元素的事件处理函数也会被触发执行）， 这时候
阅读全文
摘要：什么是事件对象 事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象。 比如： 谁绑定了这个事件。 鼠标触发事件的话，会得到鼠标的相关信息，如鼠标位置。 键盘触发事件的话，会得到键盘的相关信息，如按了哪个键。 事件对象的使用 事件触发发生时就会产生事件对象，并且系统会
阅读全文
摘要：html中的标签都是相互嵌套的，我们可以将元素想象成一个盒子装一个盒子，document是最外面的大盒子。当你单击一个div时，同时你也单击了div的父元素，甚至整个页面。 那么是先执行父元素的单击事件，还是先执行div的单击事件 ？？？ 比如：我们给页面中的一个div注册了单击事件，当你单击了di
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv
阅读全文
摘要：事件监听 eventTarget.addEventListener()方法将指定的监听器注册到 eventTarget（目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv
阅读全文
摘要：<ul> <li>1111</li> <li>2</li> <li>3</li> </ul> <script> var ul = document.querySelector('ul'); // 1. node.cloneNode(); 括号为空或者里面是false 浅拷贝 只复制标签不复制里面的内
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv
阅读全文