webAPI编程-03

4.节点操作

• 删除节点

  node.removeChild(child)
  

  • node.removeChild()方法从DOM中删除一个子节点，返回删除的节点

• 阻止链接跳转需要添加javascriptvoid(0);或者javascript:;

  • <a href = 'javascript:;'></a>;
    

• 复制节点（克隆节点/拷贝节点）

  node.cloneNode()
  

  • 该方法返回调用该方法的节点的一个副本
  • 如果括号参数为空或者为false,则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点；如果括号里面为true，则是深拷贝，会复制节点本身以及里面所以的子节点

• 三种动态创建元素区别

• document.write() //是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘

• element.innerHTML /是讲内容写入某个DOM节点，不会导致页面全部重绘；创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂

• document.createElement() //创建多个元素效率稍低一点点，但是结构更清晰

5.注册事件（绑定事件）

• addEventListener事件监听方式

  eventTarget.addEventListener(type,listener[,useCapture])
  

  eventTarget.addEventListener()方法将指定的监听器注册到eventTarget(目标对象)上，当该对象触发指定的事件时，就会执行事件处理函数

  • 该方法接收三个参数：
    • type：事件类型字符串，要加引号，比如：click、mouseover
    • listener：事件处理函数，事件发生时，会调用该监听函数
    • useCapture：可选参数，是一个布尔值，默认是false

• attachEvent事件监听方式（非标准，ie9以前的版本支持）

  eventTarget.attachEvent(eventNameWithon,callback)
  

  eventTarget.attachEvent()方法将指定的监听器注册到eventTarget(目标对象)上，当该对象触发指定的事件时，指定的回调函数就会被执行

  • 该方法接收两个参数：
    • eventNameWithOn:事件类型字符串，比如onclick、onmouseover
    • callback：事件处理函数，当目标触发事件时回调函数被调用

6.删除事件（解绑事件）

• 删除事件的方式

  • 1.传统注册方式

    eventTarget.onclick = null;
    

  • 2.方法监听注册方式

    eventTarget.removeEventListener(type,listener[,useCapture]);
    

7. 阻止事件冒泡

• 事件冒泡：开始时由最具体的元素拒收，然后逐级向上传播到DOM最顶层节点

• 标准写法：利用事件对象里面的stopPropagation()方法

  e.stopPropagation();
  

• 非标准写法：ie6-8,利用事件对象cancelBubble属性

  e.cancelBubble = true;
  

8.常用的鼠标事件

• 1.禁止鼠标右键菜单

  contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单

  document.addEventListener('contextmenu',function(e) {
      e.preverntDefault();
  })
  

• 2.禁止鼠标选中（selectstart开始选中）

  document.addEventListener('selectstart',function(e) {
      e.preventDefault();
  })