dom事件

document.style.可经修改css属性值

classList

可以拿到class值

.classList.item(0)

.classList[0]来访问

.add 

.remove

不会操作底层的dom，但是要了解

类与类之间空格可以有很多

className

会以字符串返回

divdom.insertAdjacentElement("afterEnd",ntpdom);


const ntpdom = tpdom.cloneNode(true);//克隆
divdom.appendChild(ntpdom);// 放到标签下面

dom事件的加载方式

<!--

  onclick   当用户点击某个对象时调用的事件句柄。

  ondblclick 当用户双击某个对象时调用的事件句柄。

  onmousedown 鼠标按钮被按下。

  onmousemove 鼠标被移动。

  onmouseout 鼠标从某元素移开。

  onmouseover 鼠标移到某元素之上。

  onmouseup 鼠标按键被松开。

-->

event.target.style.backgroundColor="yellow";

//取消右键弹出菜单

      input.addEventListener("contextmenu",function(event){
        console.log("click");
        event.preventDefault();//右键没有行为
      })

form.addEventListener("submit",function(event){
        alert("submit >");
        event.preventDefault();//停止默认行为，不跳转。还在当前页面



const cont = document.querySelector("body>div");//外
      const sub = cont.querySelector("div");//内

      cont.addEventListener("click",function(){
        console.log("continer blue div click")
      })

      sub.addEventListener("click",function(event){
        event.stopPropagation();//父级的事件不会触发
        console.log("sub yellow div click");
      })

——addeventListener的行为

 //第三个参数决定执行次序，true从外往里，false默认从里往外冒泡的执行顺序。

  //stopPropagation 从外往里的时候，会不执行里。 从里往外，会不执行外。

加上true先执行外，再内。不填，则是冒泡行为，先执行子元素，执行父元素。

cont.addEventListener("click",function(){
        console.log("continer blue div click")
      },true)

      sub.addEventListener("click",function(event){
        // event.stopPropagation();//父级的事件不会触发
        console.log("sub yellow div click");
      },true)