高级js底层

• 创建，添加，移除节点

var para = document.createElement("p");//createElement
    var node = document.createTextNode("这是一个新段落。");//createTextNode
    para.appendChild(node);//appendChild
    var element = document.getElementById("mydiv");
    element.appendChild(para);//appendChild
    setTimeout(() => {
      para.parentNode.removeChild(para);//element.removeChild(para)
    }, 3000);

• 原生事件(聚焦后，on监听才起效)

 document.getElementById("ondblclick").ondblclick = function () {
      console.log("ondblclick");
    };
    document.getElementById("onmousedown").onmousedown = function () {
      console.log("onmousedown");
    };
    document.getElementById("onmouseup").onmouseup = function () {
      console.log("onmouseup");
    };
    document.getElementById("onmouseover").onmouseover = function () {
      console.log("onmouseover");
    };
    document.getElementById("onmousemove").onmousemove = function () {
      console.log("onmousemove");
    };
    document.getElementById("onmouseout").onmouseout = function () {
      console.log("onmouseout");
    };
    document.getElementById("onkeypress").onkeypress = function () {
      console.log("onkeypress"); //点击该元素，使该元素出现蓝色边框也就是聚焦后，该on监听才起效
    };
    document.getElementById("onkeydown").onkeydown = function () {
      console.log("onkeydown"); //点击该元素，使该元素出现蓝色边框也就是聚焦后，该on监听才起效
    };
    document.getElementById("onkeyup").onkeyup = function () {
      console.log("onkeyup"); //点击该元素，使该元素出现蓝色边框也就是聚焦后，该on监听才起效
    };
    document.getElementById("οnclick").addEventListener("click", () => {
      //w3c标准，ie不支持，ie用attachEvent和detachEvent，事件 要加on
      console.log("click");
    });

onmouseover 相当于vue中的mouseenter，只有在进入元素的时候才触发