js事件中级、高级应用

js事件中级

·  自定义右键菜单

//浏览器右键菜单功能
document.oncontextmenu=function(ev)
{
var oEvent = ev||event;
var oDiv = document.getElementById('div1');

//自定义事件添加
oDiv.style.display='block';
oDiv.style.left=oEvent.clientX+'px';
oDiv.style.top=oEvent.clientY+'px';

//阻止默认事件
return false;
};
//点击其他地方菜单消失
document.onclick=function ()
{
var oDiv = document.getElementById('div1');

oDiv.style.display='none';
};· 只能输入数字的文本框
oTxt.onkeydown=function (ev)
{
var oEvent = ev||event

//除了退格（8），左右键（37，39），数字（48-57），小键盘数字（96-105），其他的都阻止默认，也就是不能输入
if(oEvent.keyCode!=8 && oEvent.keyCode!=37 && oEvent.keyCode!=39 && (oEvent.keyCode<48||oEvent.keyCode>57) && (oEvent.keyCode<96||oEvent.keyCode>105) )
{
return false;
}

};·  拖拽
//鼠标按下事件
oDiv.onmousedown=function (ev)
{
var oEvent = ev||event;

//定义变量disX,disY存放鼠标到div之间的（左/上）边距
disX= oEvent.clientX - oDiv.offsetLeft;
disY= oEvent.clientY - oDiv.offsetTop;

//鼠标移动事件
document.onmousemove=function(ev)
{
var oEvent = ev||event;

//定义（l/t）存放div变化的（左/上）边距
var l=oEvent.clientX-disX;
var t=oEvent.clientY-disY;

//如果div左边距小于0，就让他等于0，这样就不会拖拽出浏览器
if(l<0)
{
l=0;
}
//如果div的左边距大于最大左边距，就让他等于最大左边距，这样就不会拖拽出浏览器
else if(l>document.documentElement.clientWidth-oDiv.offsetWidth)
{
l=document.documentElement.clientWidth-oDiv.offsetWidth;
}

//如果div上边距小于0，就让他等于0，这样就不会拖拽出浏览器
if(t<0)
{
t=0;
}
//如果div的上边距大于最大上边距，就让他等于最大上边距，这样就不会拖拽出浏览器
else if(t>document.documentElement.clientHeight-oDiv.offsetHeight)
{
t=document.documentElement.clientHeight-oDiv.offsetHeight;
}

oDiv.style.left=l+'px';
oDiv.style.top=t+'px';
};

//鼠标抬起事件
document.onmouseup=function()
{
//把鼠标移动、抬起事件都清空
document.onmousemove=null;
document.onmouseup=null;
};
//阻止默认事件（解决FF拖拽有影子的BUG）
return false;
};

笔记：
JS事件中级

·默认行为

1.浏览器自带的行为叫默认行为，例如右键菜单

2.contex环境 ，document.oncontextmenu 鼠标右键事件

3.return false 阻止默认事件

4.onkeydown也是默认事件，可以阻止

例子：自定义右键菜单 ，只能输入数字的数字框（keyCode48-57、退格、左右键）

·拖拽

1.鼠标按下：onmousedown，鼠标抬起:onmouseup，鼠标移动：onmousemove

2.火狐拖拽BUG，会有影子 （加内容就没有），可以阻止默认事件解决 

3.防止拖拽拖出浏览器，判断左/上边距小于0就让他等于0 ,判断左边距大于可视区的宽减去div的宽document.documentElement.clientWidth-oDiv.offsetWidth，就让他相等。

js事件高级

·  onload

window.onload=function ()
{
alert('a');
};

window.onload=function ()
{
alert('b');
};
//两个window.onload ，会执行下面的，就像定义变量 a=1;a=2,a=2会把a=1顶下去·  事件绑定
var oBtn = document.getElementById('btn1');

//绑定事件，多个函数一起执行

//IE attachEvent(事件名(onclick)，函数)
/*oBtn.attachEvent('onclick',function()
{alert('a');};);
oBtn.attachEvent('onclick',function()
{alert('b');};);*/

//FF addEventListener(事件名（click），函数，false)
oBtn.addEventListener('click',function()
{
alert('a');
},false)
oBtn.addEventListener('click',function()
{
alert('b');
},false)·  事件绑定兼容
if(oBtn.attachEvent)
{
oBtn.attachEvent('onclick',function()
{
alert('a');
});
oBtn.attachEvent('onclick',function()
{
alert('b');
});
}
else
{
oBtn.addEventListener('click',function()
{
alert('a');
},false)
oBtn.addEventListener('click',function()
{
alert('b');
},false)
}·  事件绑定函数封装调用
function myAddEvent(obj,ev,fn)
{
if(obj.attachEvent)
{
obj.attachEvent('on'+ev,fn);
}
else
{
obj.addEventListener(ev,fn,false);
}
}

window.onload=function ()
{
var oBtn = document.getElementById('btn1');

myAddEvent(oBtn,'click',function()
{
alert('a');
});
myAddEvent(oBtn,'click',function()
{
alert('b');
});
};·  拖拽磁性吸附
//鼠标按下事件
oDiv.onmousedown=function (ev)
{
var oEvent = ev||event;

//定义变量disX,disY存放鼠标到div之间的（左/上）边距
disX= oEvent.clientX - oDiv.offsetLeft;
disY= oEvent.clientY - oDiv.offsetTop;

//鼠标移动事件
document.onmousemove=function(ev)
{
var oEvent = ev||event;

//定义（l/t）存放div变化的（左/上）边距
var l=oEvent.clientX-disX;
var t=oEvent.clientY-disY;

//如果div左边距小于50，就让他等于0，实现吸附效果
if(l<50)
{
l=0;
}
else if(l>oDiv2.offsetWidth-oDiv.offsetWidth-50)
{
l=oDiv2.offsetWidth-oDiv.offsetWidth;
}

//如果div上边距小于50，就让他等于0，实现吸附效果
if(t<50)
{
t=0;
}
else if(t>oDiv2.offsetHeight-oDiv.offsetHeight-50)
{
t=oDiv2.offsetHeight-oDiv.offsetHeight;
}

oDiv.style.left=l+'px';
oDiv.style.top=t+'px';
};

//鼠标抬起事件
document.onmouseup=function()
{
//把鼠标移动、抬起事件都清空
document.onmousemove=null;
document.onmouseup=null;
};
//阻止默认事件（解决FF拖拽有影子的BUG）
return false;
};·  事件捕获
oBtn.onclick=function()
{
alert('a');
};
//IE下 点浏览器所有的东西都变成弹出a ，把所有地方都捕获
oBtn.setCapture();·  拖拽兼容
oDiv.onmousedown=function (ev)
{
var oEvent=ev||event;

disX=oEvent.clientX-oDiv.offsetLeft;
disY=oEvent.clientY-oDiv.offsetTop;

//解决IE中拖拽会选中文字的问题
if(oDiv.setCapture)
{
//IE
oDiv.onmousemove=function (ev)
{
var oEvent=ev||event;
var l=oEvent.clientX-disX;
var t=oEvent.clientY-disY;

oDiv.style.left=l+'px';
oDiv.style.top=t+'px';
};

oDiv.onmouseup=function ()
{
oDiv.onmousemove=null;
oDiv.onmouseup=null;

oDiv.releaseCapture();
};

oDiv.setCapture();
}
else
{
//Chrome、FF
document.onmousemove=function (ev)
{
var oEvent=ev||event;
var l=oEvent.clientX-disX;
var t=oEvent.clientY-disY;

oDiv.style.left=l+'px';
oDiv.style.top=t+'px';
};

document.onmouseup=function ()
{
document.onmousemove=null;
document.onmouseup=null;
};
}

return false; //chrome、ff、IE9
};·  拖拽兼容函数封装化简

//鼠标按下事件
oDiv.onmousedown=function (ev)
{
var oEvent = ev||event;

disX= oEvent.clientX - oDiv.offsetLeft;
disY= oEvent.clientY - oDiv.offsetTop;

//解决IE中拖拽会选中文字的问题
if(oDiv.setCpature)
{
//IE
div.onmousemove=mouseMove;
div.onmouseup=mouseUp;
oDiv.setCpature();
}
else
{
//FF
document.onmousemove=mouseMove
document.onmouseup=mouseUp;
}

function mouseMove(ev)
{
var oEvent = ev||event;
var l=oEvent.clientX-disX;
var t=oEvent.clientY-disY;

oDiv.style.left=l+'px';
oDiv.style.top=t+'px';
};
function mouseUp()
{
this.onmousemove=null;
this.onmouseup=null;
if (oDiv.releaseCapture())
{
oDiv.releaseCapture();
}
};

return false;
};

·  带框拖拽
var disX=0;
var disY=0;

oDiv.onmousedown=function (ev)
{
var oEvent = ev||event;

disX= oEvent.clientX - oDiv.offsetLeft;
disY= oEvent.clientY - oDiv.offsetTop;

//鼠标按下的时候创建一个div名字为oBox，把他的className设为class
//他的宽、高、左边距、上边距都等于div1
//加入body里面
var oBox = document.createElement('div');
oBox.className='class';
oBox.style.width=oDiv.offsetWidth-2+'px';
oBox.style.height=oDiv.offsetHeight-2+'px';
oBox.style.left=oDiv.offsetLeft+'px';
oBox.style.top=oDiv.offsetTop+'px';

document.body.appendChild(oBox);

document.onmousemove=function(ev)
{
var oEvent = ev||event;
var l=oEvent.clientX-disX;
var t=oEvent.clientY-disY;

//鼠标移动的时候让oBox跟着移动
oBox.style.left=l+'px';
oBox.style.top=t+'px';
};

document.onmouseup=function()
{
document.onmousemove=null;
document.onmouseup=null;

//鼠标抬起的时候让div1的左边距上边距等于oBox，并且从body里面删除oBox
oDiv.style.left=oBox.offsetLeft+'px';
oDiv.style.top=oBox.offsetTop+'px';
document.body.removeChild(oBox);
};

return false;
};·  自定义滚动条改DIV的大小
window.onload=function()
{
var oParent = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
var oDiv3 = document.getElementById('div3');
var disX=0;

oDiv2.onmousedown=function (ev)
{
var oEvent = ev||event;

disX= oEvent.clientX - oDiv2.offsetLeft;

document.onmousemove=function(ev)
{
var oEvent = ev||event;

//oDiv2变化的左边距
var l=oEvent.clientX-disX;

//让div2移动不超出div1的范围
if(l<0)
{
l=0;
}
else if(l>oParent.offsetWidth-oDiv2.offsetWidth)
{
l=oParent.offsetWidth-oDiv2.offsetWidth;
}

oDiv2.style.left=l+'px';

//定义变量存储div2从左到右数值scale是0-1
var scale=l/(oParent.offsetWidth-oDiv2.offsetWidth)
document.title=scale;
//拖动div2的时候scale变化，div3的宽高也跟着变化。
oDiv3.style.width=400*scale+'px';
oDiv3.style.height=400*scale+'px';
};

document.onmouseup=function()
{
document.onmousemove=null;
document.onmouseup=null;
};

return false;
};
};·  自定义滚动条改DIV的透明度

window.onload=function()
{
var oParent = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
var oDiv3 = document.getElementById('div3');
var disX=0;

oDiv2.onmousedown=function (ev)
{
var oEvent = ev||event;

disX= oEvent.clientX - oDiv2.offsetLeft;

document.onmousemove=function(ev)
{
var oEvent = ev||event;

//oDiv2变化的左边距
var l=oEvent.clientX-disX;

//让div2移动不超出div1的范围
if(l<0)
{
l=0;
}
else if(l>oParent.offsetWidth-oDiv2.offsetWidth)
{
l=oParent.offsetWidth-oDiv2.offsetWidth;
}

oDiv2.style.left=l+'px';

//定义变量存储div2从左到右数值scale是0-1,在title显示出来
var scale=l/(oParent.offsetWidth-oDiv2.offsetWidth)
document.title=scale;
//拖动div2的时候scale变化，div3的透明度也跟着变化。
oDiv3.style.filter='alpha(opacity:'+100*scale+')';
oDiv3.style.opacity=scale;
};

document.onmouseup=function()
{
document.onmousemove=null;
document.onmouseup=null;
};

return false;
};
};

·  自定义滚动条改控制文字的滚动
window.onload=function()
{
var oParent = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
var oDiv3 = document.getElementById('div3');
var oDiv4 = document.getElementById('div4');
var disX=0;

oDiv2.onmousedown=function (ev)
{
var oEvent = ev||event;

disX= oEvent.clientX - oDiv2.offsetLeft;

document.onmousemove=function(ev)
{
var oEvent = ev||event;

//oDiv2变化的左边距
var l=oEvent.clientX-disX;

//让div2移动不超出div1的范围
if(l<0)
{
l=0;
}
else if(l>oParent.offsetWidth-oDiv2.offsetWidth)
{
l=oParent.offsetWidth-oDiv2.offsetWidth;
}

oDiv2.style.left=l+'px';

//定义变量存储div2从左到右数值scale是0-1,在title显示出来
var scale=l/(oParent.offsetWidth-oDiv2.offsetWidth)
document.title=scale;

//滚动条滚动的时候，让div4的top变小
oDiv4.style.top=-scale*(oDiv4.offsetHeight-oDiv3.offsetHeight)+'px'
};

document.onmouseup=function()
{
document.onmousemove=null;
document.onmouseup=null;
};

return false;
};
};笔记：
JS事件高级应用

·事件绑定

1.事件绑定，可以加很多个函数

IE用 ：attachEvent(事件名 (onclick)，函数)

FF：addEventListener(事件名 (click)，函数，false) 不带on

if判断解决兼容，IE7下绑定事件顺序会相反

2.函数封装，调用绑定事件

function myAddEvent(obj,ev,fn)

3.解除绑定 detachEvent、removeEventListener

4.绑定事件和this

·高级拖拽

1.限制范围，例子：不能拖出指定对象的div

2.磁性吸附，修改判断语句

3.解决拖拽会选中文字的问题：

事件捕获：setCapture，把所有的事件都抓过来，只有IE7兼容

释放捕获：releaseCapture

4.带框拖拽：创建一个box 给他一个边框，拖动的是box 然后再把div带到box的位置

·自定义滚动条

1.拖拽的应用 

2.改大小，透明度

3.控制文字的滚动

4.2和3主要是要用一个变量存放滚动条从左到右的数值变化，用0-1之间表示