JavaScript 实战3

秒速五厘米 2022-06-04 05:35 190阅读 0赞

下面是事件部分：

let schCompModel = undefined;//存储选择的器件
    let schCompModelCopy = undefined;//存储的拷贝
    let schState = {
       //元器件元素的状态 原始状态0，被放置的状态1，移动状态2
      none: 0,
      placing: 1,
      moving: 2,
    };//statement structure 状态的结构体
    let schCurrent = schState.none;//元器件的当前状态
    let schPrevX = 0;
    let schPrevY = 0;//存储最后位置的鼠标坐标
    let keyList = undefined;//key值列表
    //let comp = undefined;

**用按钮和组件绑定事件：**

因为ev是事件的参数啊！在ev中包含了事件触发时的参数，比如click事件的ev中包含着.e.pageX,e.pageY,keydown事件中包含着ev.keyCode等，在ie中，ev是全局的可以通过window.event来获取，在其他浏览器中都是作为参数传入的。  
所以好多事件函数都是这样写：

mydiv.onclick = function(ev){
        
      if(!ev){ev = window.event;} //这句也可以简写成：ev=window.event||ev;
      alert(ev.pageX+","+ev.pageY);
    }

**mousedown(\[\[data\],fn\])**  
当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。  
mousedown 与 click 事件不同，mousedown 事件仅需要按键被按下，而不需要松开即可发生。  
data:mousedown(\[Data\], fn) 可传入data供函数fn处理。  
fn:在每一个匹配元素的mousedown事件中绑定的处理函数。

splice() 方法用于插入、删除或替换数组的元素  
注意：这种方法会改变原始数组！。  
array.splice(index,howmany,item1,…..,itemX)  
index 必需。规定从何处添加/删除元素。  
该参数是开始插入和（或）删除的数组元素的下标，必须是数字。  
howmany 必需。规定应该删除多少元素。必须是数字，但可以是 “0”。  
如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。  
item1, …, itemX 可选。要添加到数组的新元素

//这个js片段是我在用raphael画图的时候动态的确定鼠标的坐标时用到的。
    //适用场景：当你想动态的获取鼠标当前坐标时
    <script type="text/javascript">
      window.onload=function(){
          var mydiv = document.createElement("div"); 
          mydiv.setAttribute("id","hint"); 
          mydiv.style.position="absolute"; 
          mydiv.style.lineHeight="10px"; 
          mydiv.style.width="40px"; 
          mydiv.style.borderStyle="solid"; 
          mydiv.style.borderColor="#000000"; 
          mydiv.style.borderWidth="1px";   
          mydiv.style.height="20px"; 
          mydiv.style.display="none"; 
          document.body.appendChild(mydiv); 
          document.addEventListener("mousemove",function(e){
              var myhint = document.getElementById("hint");
              myhint.style.display= "block";
              myhint.style.left= e.clientX+"px";
              myhint.style.top= e.clientY+"px";
              myhint.innerHTML="x坐标："+e.clientX+"，y坐标： "+e.clientY;
          });
      }
    </script>

<!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title> 页面名称 </title>
    </head>
    <body>
    <canvas id="canvasId" width="400" height="400" style="background-color: #eee;"></canvas>
    <script type="text/javascript">
    var canvas = document.getElementById("canvasId");
    var ctx = canvas.getContext("2d");
    var flag = false;
    var tc = document.createElement("canvas");
    tc.width = canvas.width;
    tc.height = canvas.height;
    var tctx = tc.getContext("2d");
    var x = 0;
    var y = 0;
    canvas.onmousedown = function (e) {
        e = e || window.event;
        x = e.clientX - canvas.offsetLeft + (document.body.scrollLeft || document.documentElement.scrollLeft);
        y = e.clientY - canvas.offsetTop  + (document.body.scrollTop || document.documentElement.scrollTop);
        flag = true;
        tctx.drawImage(canvas,0,0,canvas.width,canvas.height);
    }
    canvas.onmousemove = function (e) {
        if (!flag) return;
        e = e || window.event;
        var gx = e.clientX - canvas.offsetLeft + (document.body.scrollLeft || document.documentElement.scrollLeft);
        var gy = e.clientY - canvas.offsetTop  + (document.body.scrollTop || document.documentElement.scrollTop);
        ctx.clearRect(0,0,canvas.width,canvas.height);
        ctx.drawImage(tc,0,0,canvas.width,canvas.height);
        ctx.beginPath();
        ctx.moveTo(x,y);
        ctx.lineTo(gx,gy);
        ctx.stroke();
    }
    canvas.onmouseup = function (e) {
        flag = false;