JavaScript 实战3

来源：互联网发布：全国复杂网络大会编辑：程序博客网时间：2024/06/05 15:25

下面是事件部分：

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;

阅读全文

0 0