Good programmers to share front-end web front-end javascript tutorial exercises, event delegation mechanism ---------- important
eg: Click the button to add li ul in the li also added the same event
var obtn = document.getElementById ( "BTN");
var olist = document.getElementById ( "List"); // Get UL
var OLI = olist.children; // Get the child node li ul
olist.onclick = function (E) {
var EVT = E event ||;
var = evt.target the tar || evt.srcElement; // Get event source
if (tar.nodeName.toLowerCase () == "li ") { event source is not determined that the execution target
console.log ( tar.innerHTML); // this case can not be used, because this point is UL
}
}
obtn.onclick = function () {
for (var I = 0; I <. 4; I ++) {
var LLI = document.createElement ( "Li");
lli.innerHTML = "AAAA";
olist.appendChild (LLI);
}
}
drag effect
var odiv = document.getElementsByTagName("div")[0];
odiv.onmousedown = function (e) {// press the mouse event
var = E || EVT Event;
var LF = evt.offsetX;
var TP = evt.offsetY;
document.onmousemove = function (E) {// mouse mobile event
var = E || EVT event;
var X = evt.clientX-LF; // mouse has been pressed so that the position
var Y = evt.clientY-TP;
// disposed only within the viewable area of the element mobile
IF (X <= 0) {
X = 0;
}
IF (X> = document.documentElement.clientWidth odiv.offsetWidth-) {
X = document.documentElement.clientWidth-odiv.offsetWidth
}
IF (Y <= 0) {
0 = Y;
}
IF (Y> = document.documentElement.clientHeight-odiv.offsetHeight) {
Y = document.documentElement.clientHeight-odiv.offsetHeight;
}
odiv.style.left = X + "PX"; // make follow element mouse movement
odiv.style.top = y + "px";
}
Document.onmouseup = function () {// mouse up event
document.onmousemove = null;
}}
squared
js code:
var = Obox document.getElementById ( "Box");
// Create a structure
for (var i = 0; i <3; i ++) { // controlling the outer row number
for (var j = 0; j <3; j ++) {// inner control
var odiv = document.createElement ( "div");
obox.appendChild ( odiv);
/ var = R & lt Math.floor (Math.random () 256);
var Math.floor G = (Math.random () 256);
var B = Math.floor (Math.random () 256); /
= odiv.style.backgroundColor "RGB (" + Math.floor (Math.random () 256) + ',' + Math.floor (Math.random () 256) + ',' + Math.floor (Math.random () 256) + ")"; // string concatenation
odiv.style.left=j(odiv.offsetWidth + 10) + 'px';
odiv.style.top = i (odiv.offsetHeight + 10) + 'px';
}
}
var strarr=["a","b","c","d","e","f","g","h","i","m"];
var child=obox.children;
//给每个小块加上文字
for(var i=0;i<child.length;i++){
child[i].innerHTML=strarr[i];
}
//拖拽
for(var i=0;i<child.length;i++){
child[i].onmousedown=function(e){
var evt=e||event;
var lf=evt.offsetX;
var tp=evt.offsetY;
var current=this; //将this保存current中 ，因为上下指向的this不同
//因为拖动的时候原位置，还需要有东西，所以才克隆
var clone=current.cloneNode(); //克隆一个当前的元素，并添加到盒子里
clone.style.border="1px dashed #000";// obox.appendChild(clone); //因为添加之后克隆的索引在最后，// 后面需要进行距离比较，所以需要将克隆节点和当前节点进行替换
obox.replaceChild(clone,current); //用克隆的节点替换当前节点
obox.appendChild(current); //把当前节点加到盒子里
current.style.zIndex=1;
document.onmousemove=function(e){
var evt=e||event;
var x= e.clientX-lf-obox.offsetLeft;
var y= e.clientY-tp-obox.offsetTop;
//当前对象的坐标：随着鼠标移动
current.style.left=x+"px";
current.style.top=y+"px";
return false; //取消默认行为
}
document.onmouseup=function(){
//将当前的这个和剩下所有的进行比较，找出距离最近的
//将当前放到距离最近的位置，最近的那个放到克隆的位置
var arr=[];
var newarr=[];
//以为此时当前节点的索引在最后，不需要和自身比较，所以去掉最后一个索引
for(var i=0;i<child.length-1;i++){
var wid=current.offsetLeft-child[i].offsetLeft;
var hei=current.offsetTop-child[i].offsetTop;
var juli=Math.sqrt(Math.pow(wid,2)+Math.pow(hei,2));
arr.push(juli);
newarr.push(juli);
}
arr.sort(function(a,b){
return a-b;
})
var min=arr[0];
var minindex=newarr.indexOf(min);
//交换位置：当前的坐标为最小距离对应的位置，最小值的放在克隆所在的位置
current.style.left=child[minindex].style.left;
current.style.top=child[minindex].style.top;
child[minindex].style.left=clone.style.left;
child[minindex].style.top=clone.style.top;
obox.removeChild(clone); //交换位置之后将克隆的节点删除
document.onmousemove=null;
document.onmouseup=null;
}
}
}Track
js code:
var = odiv document.getElementsByTagName ( "div") [0]; var ARR = []; // coordinate position for holding the mouse moves
document.onmousedown = function (E) {
var EVT1 = E | | Event;
var X = evt1.clientX;
var Y = evt1.clientY;
arr.push ({pageX: X, pageY: Y});
document.onmousemove = function (E) {
var = E || EVT Event;
var evt.clientX = X;
var Y = evt.clientY;
arr.push ({pageX: X, pageY: Y}); // object-storage array, because the coordinate pair good operating
return false; // cancel browser the default behavior
//console.log(arr);
}
document.onmouseup = function () {
var Timer = the setInterval (function () {
odiv.style.left ARR = [0] + .pagex "PX";
odiv.style. = arr Top [0] + .pagey "PX";
arr.splice (0, 1); // let the element coordinates always start at 0, splice will change the original length of the array
if (arr.length == 0) {// when the array length is zero, indicating that the coordinates of the saved execution over
the clearInterval (Timer);
}
}, 20 is);
document.onmousemove = null;
}}