浅析javascript中的Event事件
1、焦点：当一个元素有焦点的时候，那么他就可以接受用户的输入(不是所有元素都能接受焦点)
给元素设置焦点的方式：
1、点击
2、tab
3、js
2、（例子：输入框提示文字）
onfocus:当元素获取焦点时触发：
element.onfocus=function(){};
onblur:当元素失去焦点时触发：
element.onblur=function(){};
obj.focus()给指定的元素设置焦点
obj.blur()取消指定元素的焦点
obj.select()选择指定元素里面的文本内容
3、（例子：方块随着鼠标移动）
event:事件对象。
当一个事件发生时，和当前这个对象发生的事件所有有关的信息都会临时保存在一个指定的地方-event对象，供我们需要时调用。就像是飞机的黑匣子。
事件对象必须在一个对象的事件调用函数中使用才有内容。
事件函数：事件调用的函数，一个函数是不是事件函数，不在定义时决定而是在调用的时候决定
4、兼容
element.onclick=fn1;
IE/Chrome浏览器:event是一个内置的全局对象（可以直接使用）
functionfn1(){
alert(event);
}
标准下：事件对象是通过事件函数的第一个参数传入
functionfn1(ev){
alert(ev);
}
兼容写法：
functionfn1(ev){
varev=ev||event;
}
clientX[Y]:当一个事件发生的时候，鼠标到页面可视区的距离
5、事件流（例子：仿select控件）
●事件冒泡：当一个元素接受到事件的时候，会把他接受到的事件传播给他的父级，一直到顶层window。
●事件捕获:一个元素要想接受到事件，它的父元素会首先接受到该事件，然后再传给它。
注意：在ie下是没有的事件捕获的。在事件绑定中，标准下有
6、事件绑定
●第一种：
element.onclick=fn1;
注意：oDiv.onclick=fn1;
oDiv.onclick=fn2;
这样fn2会覆盖fn1;
●第二种：
IE:obj.attachEvent(事件名称，事件函数)
1、没有捕获
2、事件名称有on
3、事件函数的执行顺序：标准》正序非标准》倒序
4、this指向window
element.attachEvent(onclick,fn1);
标准：obj.addEventListener(事件名称，事件函数，是否捕获)
1、有捕获
2、事件名称没有on
3、事件的执行顺序是正序
4、this指向触发该事件的对象
element.addEventListener(click,fn1,false);
bind函数
functionbind(obj,evname,fn){
if(obj.addEventListener){
obj.addEventListener(evname,fn,false);
}else{
obj.attachEvent('on'+evname,function(){
fn.call(obj);
});
}
}
事件取消绑定
●第一种
element.onclick=null;
●第二种
IE:obj.detachEvent(事件名称，事件函数);
document.detachEvent('onclick',fn1);
标准：obj.removeEventListener(事件名称，事件函数，是否捕获)；
document.removeEventListener('click',fn1,false);
8、键盘事件(例子：留言本)
●onkeydown:当键盘按键按下的时候触发
●onkeyup:当键盘按键抬起的时候触发
●event.keyCode:数字类型键盘按键的值键值
ctrlKey，shiftKey，altKey布尔值
当一个事件触发的时候，如果shift||ctrl||alt键没有按下，则返回false，否则返回true;
9、默认事件(例子：自定义右键菜单、键盘控制div运动)
●事件默认行为:当一个事件发生的时候浏览器默认会做的事。
●阻止默认事件：returnfalse;
oncontextmenu:右键菜单事件，当右键菜单（环境菜单）显示出来的时候触发。
案例：
方块随着鼠标移动：
onmouseover:当鼠标在一个元素上移动时触发
注意：触发的频率不是像素，而是间隔时间。在一个间隔时间内不论鼠标移动了多远只触发一次
<style>
body{
height:2000px;
}
#div{
width:100px;
height:100px;
background:red;
position:absolute;
}
</style>
<body>
<divid="div1"></div>
</body>
<script>
varoDiv=document.getElementById('div1');
document.onmouseover=function(ev){
varev=ev||event;
//如果当滚动条滚动了（页面的头部部分隐藏了），方块是以页面定位的，而鼠标是以可视区定位的，这样就会产生bug。所以我们要加上滚动条滚动的距离
varscrollTop=document.documentElement.scrollTop||document.body.scrollTop;
oDIv.style.top=ev.clientX+scrollTop+'px';
oDIv.style.left=ev.clientY+'px';
}
</script>
输入框文字提示:
<style></style>
<body>
<inputtype="text"id="text1"value="请输入内容"/>
<inputtype="button"id="btn"value="全选"/>
</body>
<script>
varoText=document.getElementById('text1');
varoBtn=document.getElementById('btn');
oText.onfocus=function(){
if(this.value=='请输入内容'){
this.value='';
}
}
oText.onblur=function(){
if(this.value==''){
this.value='请输入内容';
}
}
oBtn.onclick=function(){
oText.select();
}
</script>
仿select控件：
<style>
#div1{
width:100px;
height:200px;
border:1pxsolidred;
display:none;
}
</style>
<body>
<inputtype="button"value="按钮"id="btn"/>
<divid="div1"></div>
<p>ppppppppp</p>
<p>ppppppppp</p>
<p>ppppppppp</p>
<p>ppppppppp</p>
<p>ppppppppp</p>
</body>
<script>
window.onload=function(){
varoBtn=document.getElementById('btn');
varoDiv=document.getElementById('div1');
oBtn.onclick=function(ev){
varev=ev||event;
ev.cancelBubble=true;
oDiv.style.display='block';
}
document.onclick=function(){
oDiv.style.display='none';
}
}
</script>
留言本:
<style></style>
<body>
<inputtype="text"id="con"/>
<ulid="box"></ul>
</body>
<script>
varoUl=document.getElementById('box');
varoText=document.getElementById('con');
document.onkeyup=function(ev){
varev=ev||even;
if(ev.keyCode!=''){
if(ev.keyCode==13){
varoLi=document.createElement('li');
oLi.innerHTML=oText.value;
if(oUl.children[0]){
oUl.insertBefore(oLi,oUl.children[0]);
}else{
oUl.appendChild(oLi);
}
}
}
}
</script>
自定义右键菜单:
<style>
body{
height:2000px;
}
#box{
width:100px;
height:200px;
background:red;
display:none;
position:absolute;;
}
</style>
<body>
<divid="box"></div>
</body>
<script>
varoBox=document.getElementById('box');
document.oncontextmenu=function(ev){
varev=ev||event;
varscrollTop=document.documentElement.scrollTop||document.body.scrollTop;
varscrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
oBox.style.display='block';
oBox.style.top=scrollTop+ev.clientY+'px';
oBox.style.left=scrollLeft+ev.clientX+'px';
returnfalse;
}
document.onclick=function(){
oBox.style.display='none';
}
</script>
键盘控制div运动:
<style>
#box{
width:100px;
height:100px;
background:red;
position:absolute;
}
</style>
<body>
<divid="box"></div>
</body>
<script>
varoBox=document.getElementById('box');
vartimer=null;
varoLeft=false;
varoTop=false;
varoRight=false;
varoBottom=false;
//运动一直就绪，等待按键操作
timer=setInterval(function(){
if(oLeft){
oBox.style.left=oBox.offsetLeft-10+'px';
}elseif(oTop){
oBox.style.top=oBox.offsetTop-10+'px';
}elseif(oRight){
oBox.style.left=oBox.offsetLeft+10+'px';
}elseif(oBottom){
oBox.style.top=oBox.offsetTop+10+'px';
}
//防止溢出
limit();
},10);
//按键按下，开始运动
document.onkeydown=function(ev){
varev=ev||even;
switch(ev.keyCode){
case37:
oLeft=true;
break;
case38:
oTop=true;
break;
case39:
oRight=true;
break;
case40:
oBottom=true;
break;
}
}
//按键抬起，停止运动
document.onkeyup=function(ev){
varev=ev||even;
switch(ev.keyCode){
case37:
oLeft=false;
break;
case38:
oTop=false;
break;
case39:
oRight=false;
break;
case40:
oBottom=false;
break;
}
}
functionlimit(){
//控制左边
if(oBox.offsetLeft<=0){
oBox.style.left=0;
}
//控制上边
if(oBox.offsetTop<=0){
oBox.style.top=0;
}
//控制右边
if(document.documentElement.clientWidth-oBox.offsetLeft-oBox.offsetWidth<0){
oBox.style.left=document.documentElement.clientWidth-oBox.offsetWidth+'px';
}
//控制下边
if(document.documentElement.clientHeight-oBox.offsetTop-oBox.offsetHeight<0){
oBox.style.top=document.documentElement.clientHeight-oBox.offsetHeight+'px';
}
}
</script>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持毛票票！