一、事件

事件是电脑输入设备（鼠标、键盘）与页面进行交互的响应

事件对象

• 除IE8及以下版本的浏览器：当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数，在事件对象中封装了当前事件相关的一切信息，比如：鼠标的坐标、键盘哪个按键被按下，鼠标滚轮滚动的方向…
  clientX可以获取鼠标指针的水平坐标 event(形参).clientX
  clientY可以获取鼠标指针的垂直坐标
• 除了火狐浏览器：事件对象是作为window的一个属性，直接window.event(形参).clientX
  解决兼容性问题：event=event||window.event
• clientX和clientY用于获取鼠标在当前的可见窗口的坐标 而div的偏移量是相对于整个页面的
• pageX和pageY可以获取鼠标相对于当前页面的坐标（IE8及以下版本不可用）

事件的冒泡

• 所谓的冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发（一定是相同事件onclick等）
• 在开发中大部分情况冒泡都是有用的，如果不希望发生事件冒泡，可以通过事件对象来取消冒泡：给函数设置一个事件对象形参，在代码末尾 event.cancelBubble=true;

事件的委派

• 给每一个元素依次添加事件，或者每新建一个元素都添加一个事件比较麻烦，并且性能低，直接给这些元素共同的父元素绑定事件，可参考博文：事件委派详解
• 使用event.target.className==\"link\"来判断触发对象是不是我们期望的元素，是则执行（target获取触发事件的对象）

事件的绑定/注册

告诉浏览器，当事件响应后要执行哪些操作代码

• 静态注册事件：
  将事件写在标签中，一般都只写一句代码或者直接调用一个已经写好的函数
• 动态注册（绑定）：
  一般在window.onload页面加载完成时执行的函数里进行动态绑定事件代码）
  先通过js代码得到标签的DOM对象，再通过DOM对象.事件名=function(){}
• 使用 对象.事件=函数 的形式绑定响应函数，它只能同时为一个元素的一个事件绑定一个响应函数，不能绑定多个，会出现函数的覆盖
• (1) addEventListener() 通过这个方法为元素绑定响应函数（IE8及以下版本不支持）
  (2) 对象.addEventListener(“事件的字符串去掉on”，function(){…},false) 最后一个参数：是否在捕获阶段触发事件，需要一个bool值，一般传false
  (3) 使用addEventListener可以同时为一个元素的相同事件绑定多个响应函数，当事件被触发时，响应函数会按照函数绑定顺序依次执行（在IE8及以下版本中： 对象.attachEvent(“事件的字符串要on”,function(){…});
  也可以为一个对象的相同事件绑定多个响应函数，只不过执行顺序是先绑定后执行）
• 浏览器的兼容：
  自己设置函数 参数：obj要绑定事件的对象 eventStr事件的字符串（不要on） callback回调函数
  function(obj,eventStr,callback){
  if(obj.addEventListener){
  obj.addEventListener(eventStr,callback,false);(回调函数中的this是obj对象)
  }
  else{
  obj.attachEvent(eventStr+“on”,callback);（回调函数中的this是window对象）
  将window对象准换为obj对象：callback---->function(){ callback.call(obj);} 浏览器调用的函数我们不能改调用对象，但是自己调用的函数可以更改，第二种浏览器调用匿名函数function，我们再用自己想用的调用方式调用callback函数
  }
  }

常用事件

• onload:加载完成事件 页面加载完成之后，常用于做页面js代码初始化操作
  (1)静态：写在body标签中
  (2)动态：window.onload = function(){};

• onclick:单击事件 常用于按钮的点击响应操作
  (1)静态：一般写在button标签中
  (2)动态：var btn=document.getElementById(\"\");
  btn.onclick = function(){};

• onblur：失去焦点事件 常用于输入框失去焦点后验证其输入内容是否合法

• onchange:内容发生改变事件 常用于下拉列表和输入框内容发生改变后的操作

• onsubmit:表单提交事件 常用于表单提交前，验证所有表单项是否合法
  return false 可以阻止表单提交，在验证到不合法时就return false
  < form action=“http://localhost:8080” method=“get” οnsubmit=“return fun()”> //一定要写一个return
  < input type=“submit” value=“静态注册”>
  < /form>
  function fun(){
  alert(“静态注册页面”);
  return false;
  }

• 键盘事件
  1.键盘事件一般都会绑定给一些可以获取到焦点的对象或者是document（输入框）
  2.onkeydown:一直按着某个键事件会一直触发，连续触发时，第一次和第二次之间会间隔稍微长一些，其他的会非常快
  3.onkeyup:按键被松开
  4.event.keycode判断哪个按键被按下
  event.altKey ctrlKey shiftKey判断对应是否被按下
  5.return false 取消默认行为（向焦点框里自动添加输入按键）可以实现规定哪些按键能被按下
  6.在使用时可以先输出按下键的编码来帮助 写代码

事件的传播

1.由内往外传播、冒泡传播
2.三个阶段：捕获阶段（由外向内捕获事件），目标阶段，冒泡阶段（由内向外执行事件）（在IE8及以下版本没有捕获阶段）

二、DOM对象

1.DOM查找

• 对网页进行增删改查：查找节点，读取节点，修改节点，创建节点，删除节点
  节点：文档节点、元素节点、属性节点、文本节点

• 按id属性，精确查找一个元素对象
  var elem=document.getElementById(“id”);效率非常高 只能用在document上 不是所有元素都有id（不加就不会执行）

• 按标签名查找
  varelems=parent.getElementsByTagName(‘tag’); 注意是单引号，返回一个数组，需要通过下标访问
  查找指定parent节点下的所有标签为tag的子代节点
  （1）.可用在任意父元素上
  （2）.不仅查直接子节点，而且查所有子代节点
  （3）.返回一个动态集合，即使只找到一个元素，也返回集合必须用[0]，取出唯一元素
  var elems =ul.getElementsByTagName(‘li’);

• 通过name属性查找
  var elem = document.getElementsByName (‘name属性值’);
  可以返回DOM树中具有指定name属性值的所有子元素集合

• 通过class查找
  查找父元素下指定class属性的元素
  var elems = parent.getElementsByClassName(‘class’); 有兼容性问题 IE8以下版本不支持

• 通过css选择器查找
  元素、类、Id、后代、子代、群组选择器
  var elems = parent.querySelector(“selector”); Selector支持一切css中选择器，如果选择器匹配的有多个，只返回第一个
  var elsms = parent.querySelectorAll(“seletor”);查找多个选择器，返回的是非动态集合

• innerHTML用于获取元素内部的HTML代码，对于自结束标签，这个属性没有意义，读取元素节点属性：元素.属性名(class标签用className)
  innerText 获取元素内部的文本，纯文本，不含元素

• 根据属性查找父元素下的所有子节点：
  父元素.childNodes 获取所有节点，根据DOM标准标签间写的空白也是节点（IE8及以下版本除外）
  ------换成用children属性，获取当前元素的所有子元素，不会包含空白文档
  父元素.firstChild 获取父元素下第一个节点（包含空白文本）
  ------换成用firstElementChild获取第一个子元素（不支持IE8及以下版本）
  父元素.lastChild 获取父元素下的最后一个节点

• 找父节点：子节点.parentNode;
  找前兄弟节点：子节点.previousSibling; (会获取空白处) 子节点.previousElementSibling; (会获取前一个节点，不包含空白) 找兄弟节点：

• document.body------body标签
  document.documentElement------html标签
  document.all------页面中所有的元素，返回值为一个数组 相当于getElementByTagName(\"*\")

• confirm()用于弹出一个有确认和取消的提示框---------有bool型的返回值

DOM修改

• DOM标准：
  核心DOM：可操作一切结构化文档的AOI，包括HTML和XML（万能、繁琐）
  HTML DOM：专门操作HTML文档简化版DOM API仅对常用的复杂的API进行了简化（不是万能，简单的）

• 修改属性四个操作：
  读取属性值
  （1）先获得属性节点对象，再获得节点对象的值： elem.attributes[下标/属性名] elem.getAttributeNode[属性名] attrNode.value-----属性值；；
  （2） 直接获得属性值：elem.getAttribute(“属性名”)
  修改属性值
  （3）elem.setAttribute(“属性名”,value)
  判断是否包含指定的属性：
  element.hasAttribute(‘属性名’) 返回值为bool类型
  移除属性
  elem.removeAttribute(“属性名”)

• 修改样式:（修改的是内联样式，具有较高的优先级，改后立即显示，但如果在样式中写了!important,则此时样式会有最高优先级，js修改代码会失效）
  (1)内联样式：elem.style.属性名（也可以用来读取样式，读取的也是内联样式，如果内联样式没有就为空）
  （2）属性名：去横线，变驼峰 （background-color-----backgroundColor ）

• 获取元素的当前显示样式(都是只读的,修改只能用style)
  元素.currentStyle.样式名-----可以获取当前元素正在显示的样式（如果没有设置样式就获取默认样式（宽度：auto），只有IE浏览器支持，其他的都不行）
  （除IE8及以下版本的）浏览器通用：getComputedStyle() 这个方法是window的方法，可以直接使用
  需要两个参数：
  1.需要获取样式的元素
  2.传递一个伪元素，一般为null
  该方法会返回一个对象，对象中封装了当前元素对应的样式，访问：对象.样式名，如果没有设置样式，会获取真实的值，而不是默认值，比如宽度：auto(默认值)—>具体宽度；颜色—>rgb值

  兼容所有浏览器（自己创建一个判断方法）：(兼容性问题都是一个思路，先判断有没有，有就用，没有就不用)

  function getStyle(obj,name){
  if(window.getComputedStyle) (在IE8中直接用getComputedStyle会报错，因为不存在这个变量，但是用Window.getComputedStyle属性会返回undefined,不会报错)
  return getComputedStyle(obj,null)[name];(不写.name，写了表示访问name属性，写死了)
  else
  return obj.currentStyle[name];
  或者 return window.getComputedStyle?getComputedStyle(obj,null)[name]:obj.currentStyle[name];
  }

样式的相关属性

都是只读属性，修改只能修改style

1. clientWidth clientHeight------这两个属性可以获取元素的可见宽度和高度，不带px，返回数字可直接进行计算
2. offsetWidth offsetHeight—获取元素的整个宽度和高度，包括内容区、paddig、border
3. offsetParent—用来获取当前元素的定位父元素，获取到离当前元素最近的开启了定位的祖先元素，如果都没开则返回body
4. offsetLeft offsetTop—获取当前元素相对于其定位父元素的水平、垂直偏移量
5. scrollWidth scrollHeight-----可以获取元素的滚动区域高度和宽度
6. scrollLeft scrollTop—获取滚动条水平和垂直滚动的距离
   当满足scorllHeight - scorllTop ==clientHeight 时说明垂直滚动条滚动到底了
   当满足scorllWidth - scorllLeft = clientWidth时说明水平滚动条滚动到底了

DOM添加

1. 创建空元素
   var elem = document.createElement(“元素名”) var table = document.ceateElement(“table”);

2. 设置关键属性
   elem.属性名=“属性值”
   elem.innerHTML=“go to tmooc” a.href=“http…”

3. 设置关键样式
   元素.style.样式名=样式值
   elem.style.opacity=“1”;
   elem.style.cssText=“width:100px;height:100px”;(可添加多个样式)

4. 将元素添加到DOM树 parentNode.appendChild(childNode); 添加在最后一个父元素
   parentNode.insertBefore(newChild,existingChild) 在父元素中的指定子节点之前添加一个新的子节点，指定子字节通过查找得到
   添加元素优化：尽量少的操作DOM树，每次修改DOM树，都导致重新layout，先构建好小树，再挂到DOM树上
   （1）如果同时创建父元素和子元素时，建议在内存中先将子元素添加到父元素，再将父元素一次性挂到页面上
   （2）如果只添加多个平级子元素时，就要将所有子元素，临时添加到文档片段中，再将文档片段整体添加到页面
   文档片段： 内存中，临时保存多个平级元素的虚拟父元素，用法和普通父元素完全一样
   步骤：
   （1）创建片段： var frag =document.createDocumentFragment()
   （2）将子元素临时追加到frag中 frag.appendChild(child);
   （3）将frag追加到页面 parent.appendChild(frag);
   append之后，frag自动释放，不会占用空间
   注意：
   DOM操作中如果涉及父元素，直接元素.parentNode就行，不用管是谁

   使用innerHTML也可以实现增删改查，直 接改html代码，但是要避免不直接操作DOM树

三、BOM对象

• 专门操作浏览器窗口的API,BOM可以使我们通过js来操作浏览器
• BOM常见对象：
  （1）Window–代表整个浏览器的窗口，也是网页中的全局对象，网页中的变量–window的属性，网页中的函数–window的方法
  （2）Navigator–代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器
  （3）Location–代表当前浏览器的地址栏信息，可以获取地址信息，或者操作浏览器跳转页面
  （4）History–代表浏览器的历史记录，可通过其来操作浏览器的历史记录，由于隐私问题，该对象不能获取到具体的历史记录，只能操作浏览器向前向后翻页，而且该操作只能在当次访问时有效
  （5）Screen–代表用户的屏幕信息，通过该对象可以获取用户的显示器的相关信息
  （6）其他：document、event

Window

• 使用：直接使用或者作为window的属性使用

• 获取当前窗口大小：完整窗口大小：window.outerWidth/outerHeight
  文档显示区大小：window.innerWidth/innerHeight

• 定时器：让程序按指定时间间隔自动执行任务，实现网页动态效果、计时功能等
  分类：
  （1）周期性定时器：setinterval(ex p,time)
  exp:执行语句
  time:时间周期，单位为毫秒
  注：在开启下一个定时器时要先关闭当前元素的上一个定时器，不然会出现定时器重复开启（加速）
  停止定时器：（1）给定时器取名：var timer =setinterval(…)
  （2）停止定时器：clearinterval(timer);
  clearinterval()可以接受任何参数，包括null,undefined,如果参数有效则执行，无效则什么都不做
  （2）一次性定时器 ：让程序延迟一段时间执行 setTimeout(exp,time)
  time:时间间隔，单位为毫秒

Navigator

（1）由于历史原因，Navigator对象中的大部分属性都不能帮助我们识别浏览器了，一般我们只会使用userAgent来判断浏览器的信息，userAgent是一个字符串，这个字符串中包含有用来描述浏览器的信息，不同浏览器有不同的userAgent，配合正则表达式（是否含有浏览器名字关键字）来判断是什么浏览器
（2）由于IE11没有MSIE关键字，所以IE浏览器不能这样操作，但是IE有很多自己特有的对象和属性，我们可以通过判断是否存在来看
if(“ActiveXObject” in winodw）一个特殊的对象（即window的属性）

History

（1）length属性，可以获取到当前访问的链接数量
（2）back（）可以回退到上一个页面，与返回按钮一样
（3）forward（）可以跳转到下一个页面，作用与前进按钮一样
（4）go()可以跳转到指定页面，它需要一个整数作为参数：
1–向前跳转一个页面
2–向前跳转两个页面
-1–向后跳转一个页面
-2–向后跳转两个页面

Location

• 直接打印，可以获取当前页面的完整路径

• 可以直接修改Location为相对路径或者绝对路径，并且会生成历史记录

• Location.assign(\"…\")------>跳转到其他页面

• Location.reload()------->刷新页面
  传一个参数true:强制清空缓存（与ctrl+f5是一个效果，完全清空文本框内容）

• Location.replace(\"…\")用新的页面替换当前页面，但是不会生成历史记录，不能使用回退按钮回退

补充知识

原型对象

1. 相当于一个公共的区域，所有同一个类的实例都可以访问到这个原型对象，可以将对象中公有的内容，统一设置到原型对象中
2. 我们每创建一个函数，解析器都会向函数添加一个属性prototype，这个属性对应原型对象，这个属性对于普通函数没有任何作用
3. 当函数以构造函数的形式调用时，它所创建的对象都会有一个隐含的属性，指向该构造函数的原型对象，通过_proto_来访问
4. 使用对象的hasOwnProperty来检查对象自身是否含有该属性
5. 原型对象也是对象，也有原型，当使用一个对象的属性和方法时，会在自身中寻找，自身如果有就直接使用，没有就去原型对象中找，直到找到Object对象的原型，Object对象的原型没有原型，如果在Object中依然没有找到，则返回undefined
6. 使用obj.hasOwnProperty(属性名)检查对象自身是否有这个属性
7. 我们打印对象时打印的对象的tostring()方法，我们可以通过修改对象的prototype属性来设置原型对象

类的操作

1. 在js中同时修改多个样式属性：
   box.className = “b2”;
   不采用一个一个样式地修改，直接修改元素的class属性（设置一个新的class），浏览器只需要重新渲染一次，性能高，可以将行为和表现分开
2. 添加多的样式，或者修改部分样式：
   box.className+=\" b2\" ;注意加一个空格
3. 自己设置addClass 、hascClass(利用正则表达式判断是否有某个类和removeClass三个函数)

来源：https://blog.csdn.net/m0_58642116/article/details/123040042
本站部分图文来源于网络，如有侵权请联系删除。