A.我今天学了啥子

1.简单计算器的实现

    <script type="text/javascript">
        // target 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口。
    var txt = document.getElementById("text")
    var box = document.querySelector(".box")
    var inps = document.querySelectorAll("input")
    box.addEventListener("click",function(ev){
        var e = ev || window.event
        var tar = e.target;
        txt.innerHTML += tar.value;
        // console.log(e)
        // console.log(tar)
      
    })
    for(var i =0;i<inps.length;i++){
        inps[i].onclick = function(e){
            var e = e || event;
            e.stopPropagation()
        }
    }
 

      // eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。

      btn.addEventListener("click",function(){
          var equal = eval(txt.innerHTML) ;
          txt.innerHTML = equal
          console.log(equal)
      })
    </script>

2.拖拽一个div

    var div = document.querySelector("div")
    // documentElementwidth
    div.onmousedown = function (e){
        var e = e || event;
        // 鼠标落下获取盒子内在坐标
        var divX = e.clientX-div.offsetLeft;
        var divY = e.clientY-div.offsetTop;
        // console.log(divX,divY)
         div.style.left = e.clientX - divX + "px"
            div.style.top = e.clientY - divY + "px"
        document.onmousemove = function(e){
            var e = e || event;
            // var divX = e.clientX;
            // var divY = e.clientY;
            div.style.left = e.clientX - divX + "px"
            div.style.top = e.clientY - divY + "px"
        }
        document.onmouseup = function (){
            document.onmousemove = null;
            document.onmouseup = null;

            // document.onmousedown = null;
        }
    }

3.事件冒泡

onmousemove 事件在鼠标移动到 div 元素上时触发。
  
mouseenter 事件在鼠标指针进入 div 元素时触发。
  
onmouseover 事件在鼠标指针进入 div 元素时触发,唯一的区别是 onmouseenter 事件不支持冒泡 ,在子元素上也会触发(p 和 span)。

4.阻止事件冒泡

谷歌下：
stoppropagation

IE下：
canceBubble = true


preventDefault

5.阻止事件默认行为

        // 最简单的 阻止默认行为的方法

        var a = document.getElementsByTagName("a")[0]
        a.onclick = function (e){
            var e = e||event;
            alert(1)
             // e.preventDefault();
    
            //  return false;

           
        }
         // preventDefault（HTML DOM Event 对象方法）通知浏览器不要执行与事件关联的默认动作。