JS基础

JS:基础 + Web APIs 获取元素 document.querySelector DOM事件流：冒泡阶段 附加： javascript:; 等

JS的组成

JavaScript语法(ECMAScript) + 页面文档对象模型(DOM) + 浏览器对象模型(BOM)

前者1 是js基础 后者2 3 是 Web APIs

获取元素的方法

1 方法:

document.getElementById("div1")
document.getElementsByTagName("p")
// H5新增的方法
//一个
document.querySelector("#div1")
document.querySelector("p")
document.querySelector(".header")
//数组
document.querySelectorAll("p")

2 举例：

<div id="div1" style="border: solid red 3px">
      <p>Some div2 text</p>
      <p>Some div2 text</p>
</div>

document.getElementById("div1")
var div1 = document.getElementById("div1");
var div1Paras = div1.getElementsByTagName("p");
var num = div1Paras.length;
alert("There are " + num + " paragraph in #div1");

事件的执行

var div1 = document.getElementById("div1");
div1.onClick = function(){
//...
}

操作元素

// 返回元素上一个指定的属性值
element.getAttribute(attributeName);
//设置
element.setAttribute(name, value);
//H5 中 自定义的属性名 data- 开头

1 区别:

element.属性名
element.getAttribute("属性名") ： 可以获取自定义的属性名

2 举例:

<button>Hello World</button>

var b = document.querySelector("button");
b.setAttribute("name", "helloButton");
b.setAttribute("disabled", "");

// 自定义属性名 data-
b.setAttribute("data-index","1");
//结果：
<button data-index="1">Hello World</button>

节点操作

为什么是 使用 节点操作:
上述中 利用DOM提供的方法获取元素，但是逻辑性不强，繁琐；
利用节点层级关系获取元素，逻辑性强 但是兼容性差；

Node.firstChild
Node.parentNode

document.getElementById("b1").nextSibling;
//返回当前节点的前一个兄弟节点，没有则返回null.
// <a><b1 id="b1"/><b2 id="b2"/></a>
document.getElementById("b1").previousSibling; // null
document.getElementById("b2").previousSibling.id; // "b1"

动态创建元素节点

1 创建节点 document.createElement("li")
2 添加节点 node.appendChild(child) node.inserBefore(child,指定元素);

//1、创建节点元素节点
let li  = document.createElement("li");
let ul = document.querySelector("ul");
//2.1、添加节点 node.appendChild(child) 是追加元素 类似于push
ul.appendChild(li);
//2.2 node.inserBefore(child,指定元素);
let lili = document.createElement("li");
ul.inserBefore(lili,ul.children[0]);

添加节点内容createTextNode

<div id="content">
  <p id="p1">111 <span>111</span></p>
  <!-- 在这个位置添加h3节点 结果如下:-->
  <!-- <h3>text text text</h3> -->
</div>

let h3 = document.createElement("h3")
let txt = document.createTextNode("text text text");
h3.appendChild(txt);
content.appendChild(h3)

删除节点removeChild

element.removeChild(child);

克隆复制节点cloneNode

//是否采用深度克隆，如果为 true，则该节点的所有后代节点也都会被克隆，如果为 false，则只克隆该节点本身。
var dupNode = node.cloneNode(deep);

注册事件 、删除事件 的两种方法

var btns = document.querySelectorAll("button");
//1.传统方式
//同一个按钮 不可以有两个function 会被最新的一个覆盖
btns[0].onclick = function(){
//...
//删除事件
btns[0].onclick = null ;
}

//2.事件侦听注册事件 addEventListener
//里面的类型是字符串 带引号 且不带on
//同一个元素 同一个事件 可以添加多个侦听器
btns[1].addEventListener("click",fn);

function fn(){
//...
btns[1].removeEventListener("click");
}

DOM 事件流

事件发生时会在元素节点之间按照特定的顺序传播，这个传播的过程就是DOM事件流

• 事件捕获阶段

• 冒泡阶段 ：开始有具体的元素接收，然后逐级向上传播到DOM最顶层节点。

  <div class="container">
      <div class="container-content">
      </div>
  </div>

    let container = document.querySelector(".container");
    let content = document.querySelector(".container-content");
    // 1、onclick 只有冒泡事件
    container.onclick = function () {
      console.log("父盒子点击");
      alert("父盒子点击");
    }
    // 点击子盒子的时候 先触发子盒子再触发父盒子
    content.onclick = function () {
      console.log("子盒子点击");
      alert("子盒子点击");
    }
    // 2、addEventListener可以有捕获阶段和冒泡阶段 
    // true 表示捕获阶段 先触发父盒子再触发子盒子
    container.addEventListener("click", function () { alert("父盒子点击"); }, true)
    content.addEventListener("click", function () { alert("子盒子点击"); }, true)
    // 3、false，或者不写 是冒泡阶段 先触发子盒子再触发父盒子
    container.addEventListener("click", function () { alert("父盒子点击"); })
    content.addEventListener("click", function () { alert("子盒子点击"); }, false)

• onclick只有冒泡阶段
• addEventListener true是捕获阶段 false是冒泡阶段
• 有些事件是没有冒泡的：onblur onfocus onmouseenter onmouseleave

事件对象

有事件才有事件对象

    content.onclick = function (event) {
      //event里面会有对应事件的信息
      console.log(event);
    }

（1）阻止默认行为e.preventDefault()

  content.onclick = function (e) {
  //方式1 这是一个方法
  e.preventDefault();
  //方式2 只限于现在 传统的注册方式
  return false;
  }
  //上述 就会阻止此方法的执行了

（2）事件类型 e.type

（3）阻止冒泡 e.stopPropagation()

    content.onclick = function (e) {
    //...
  e.stopPropagation();
    }

(4)事件委托:

给父节点添加侦听器，利用事件冒泡影响每一个子节点

本来是需要获取没有li 给每个li绑定事件，但是这样子的话，影响程序性能。

    <ul>
      <li>111</li>
      <li>222</li>
      <li>333</li>
      <li>444</li>
      <li>555</li>
    </ul>

    let ul = document.querySelector("ul");
    ul.onclick = function (e) {
      alert("点击");
      // e.target 是点击的对象 这个效果是将点击的li的文字颜色改为红色
      e.target.style.color = "red";
    }

鼠标事件： 禁止鼠标右键菜单 禁止鼠标选中

    // 禁止鼠标右键菜单
    document.addEventListener("contextmenu", function (e) {
      e.preventDefault();
    })
    // 禁止鼠标选中
    document.addEventListener("selectstart", function (e) {
      e.preventDefault();
    })

鼠标事件

鼠标事件参考文档 (opens new window)

    document.addEventListener("click", function (e) {
      // console.log("鼠标事件:", e);
      // 相对于 窗口的可视区域
      console.log("clientX:", e.clientX);
      console.log("clientY:", e.clientY);
      // 相对于 文档的整个页面 （页面很长 有滚动条 折叠的区域也算）
      console.log("pageX", e.pageX);
      console.log("pageY", e.pageY);
      // 相对于 电脑屏幕的
      console.log("screenX", e.screenX);
      console.log("screenY", e.screenY);
    })

例子： 盒子跟着鼠标动mousemove

  let box = document.querySelector("#box");
  document.addEventListener("mousemove", function (e) {
  box.style.top = e.pageY - 25 + "px";
  box.style.left = e.pageX - 25 + "px";
 })

键盘事件

onkeyup onkeydown onkeypress

键盘按下的时候 onkeydown 和 onkeypress 触发 键盘弹起的时候 onkeyup 触发

• 按下触发的onkeypress 和 onkeydown 在键盘没有弹起的时候 一直触发
• 且在文字没有落入文本框中触发；
• onkeypress 和 onkeydown 的区别： <1> onkeypress 不能识别ctrl shift 箭头等功能键；
• 三个事件的执行顺序: onkeydown -- onkeypress -- onkeyup;

键盘事件对象： event.keyCode:

• onkeydown onkeyup 都是不区分字母大小写的 a A 都是65
• onkeypress 区分字母的大小写：A 65 ; a 97 （ASCII编码 (opens new window)）;

附加

1. javascript:void(0) 或者 javascript:； 阻止链接的跳转

<a href="javascript:;">  </a>