码迷,mamicode.com
首页 > 其他好文 > 详细

事件基础---初

时间:2016-06-04 10:30:52      阅读:171      评论:0      收藏:0      [点我收藏+]

标签:

什么是event对象
用来获取事件的详细信息:鼠标位置、键盘按键
–例子:获取鼠标位置:clientX
–document的本质:document.childNodes[0].tagName
l获取event对象(兼容性写法)
•var oEvent=ev||event;
技术分享
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>event</title>
<script>
document.onclick=function (ev)
{
     //兼容的写法
    var oEvent=ev||event;
    
    alert(oEvent.clientX+‘, ‘+oEvent.clientY);
    //IE下兼容的写法
    //alert(event.clientX+‘, ‘+event.clientY);
    
    //FF兼容的写法
    //alert(ev.clientX+‘, ‘+ev.clientY);
    
    /*if(ev)
    {
        alert(ev.clientX+‘, ‘+ev.clientY);
    }
    else
    {
        alert(event.clientX+‘, ‘+event.clientY);
    }*/
};
</script>
</head>

<body>
</body>
</html>
client
技术分享
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
document.onkeydown=function (ev)
{
    var oEvent=ev||event;
    
    alert(oEvent.keyCode);
};
</script>
</head>

<body>
</body>
</html
View Code
事件流
事件冒泡
–取消冒泡:oEvent.cancelBubble=true;
–例子:仿select控件
技术分享
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html onclick="alert(‘html‘);" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body onclick="alert(‘body‘);">
<div style="width:300px; height:300px; background:red;" onclick="alert(this.style.background);">
    <div style="width:200px; height:200px; background:green;" onclick="alert(this.style.background);">
        <div style="width:100px; height:100px; background:#CCC;" onclick="alert(this.style.background);">
        </div>
    </div>
</div>
</body>
</html>
bubbled up

oEvent.cancelBubble=true;差入到以上函数执行内部则终止则实现终止冒泡!

DOM事件流

鼠标位置
可视区位置:clientX、clientY
–例子1:跟随鼠标的Div
»消除滚动条的影响
技术分享
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#div1 {width:100px; height:100px; background:red; position:absolute;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
document.onmousemove=function (ev)
{
    //获取客户端  get Oevent
    var oEvent=ev||event;
    //获取div   get div
    var oDiv=document.getElementById(‘div1‘);
         //获取滚动条滚动时的高和左边距
        var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
        var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
    //动态赋予div左和高
    oDiv.style.left=oEvent.clientX+scrollLeft+‘px‘;
    oDiv.style.top=oEvent.clientY+scrollTop+‘px‘;
};
</script>
</head>

<body>
<div id="div1">
</div>
</body>
</html>
followed mouse
滚动条的意义——可视区与页面顶部的距离
获取鼠标在页面的绝对位置
技术分享
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
document.onclick=function ()
{
    //处理兼容问题
    var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
    //输出滚动后离浏览器上边距
    alert(scrollTop);
    
    
};
</script>
</head>

<body style="height:2000px;">
</body>
</html>
scroll
封装函数
–例子2:一串跟随鼠标的Div
技术分享
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body{background:#333;}
div {width:10px; height:10px; background:#FFF; position:absolute;}
</style>
<script>
window.onload=function()
{

    var aDiv=document.getElementsByTagName(‘div‘);
    var i=0;

  document.onmousemove=function(ev)
  {
      var oEvent=ev||event;
        for(i=aDiv.length-1; i>0; i--)
        {   //数组左边的div等于离客户端最近的div 左上边距
            aDiv[i].style.left=aDiv[i-1].style.left;
            aDiv[i].style.top=aDiv[i-1].style.top;
            }
            //adv的左上等于客户端点击的边距;
            aDiv[0].style.left=oEvent.clientX+‘px‘;
            aDiv[0].style.top=oEvent.clientY+‘px‘;
      }
    }
</script>
</head>

<body><div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</ht
pull along client

 

•获取用户按下键盘的哪个按键
•例子:键盘控制Div移动
技术分享
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#div1{ width:100px; height:100px; position:absolute; background:#F00; top:0; left:0;}
</style>
<script>
window.onload=function(){
    var oDiv=document.getElementById(‘div1‘);
    //把键值默认为假
    var i=r=t=b=false;
    //监听  键盘按下
document.addEventListener(‘keydown‘,function(ev){
    var oEvent=ev||event;
   // 判断键值数字 如何是则为真
    switch(oEvent.keyCode){
        case 37: i=true; break;
        case 38: r=true; break;
        case 39: t=true; break;
        case 40: b=true; break;
        
        }
        },false);
    //监听  键盘抬起
document.addEventListener(‘keyup‘,function(ev){
       var oEvent=ev||event;
      //判断键值 是真则为假
      switch(oEvent.keyCode){
          case 37: i=false; break;
          case 38: r=false; break;
          case 39: t=false; break;
          case 40: b=false; break;
         
          }
    
    },false);
    
    setInterval(function(){
        //分配写入各个键值的作用
        if(i) oDiv.style.left=oDiv.offsetLeft-10+‘px‘;
        if(t) oDiv.style.left = oDiv.offsetLeft + 10 + "px";
        if(r) oDiv.style.top = oDiv.offsetTop - 10 + "px";
        if(b) oDiv.style.top = oDiv.offsetTop + 10 + "px";
        },1)
    
    
    };
</script>
</head>

<body>
<div id="div1">
</div>
</body>
</html>
Continuous movement
l其他属性
ctrlKey、shiftKey、altKey
•例子:仿空间提交留言
–回车 提交
技术分享
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload=function ()
{
    var oBtn=document.getElementById(‘btn1‘);
    var oTxt1=document.getElementById(‘txt1‘);
    var oTxt2=document.getElementById(‘txt2‘);
    
    oBtn.onclick=function ()
    {
        oTxt1.value+=oTxt2.value+‘\n‘;
        oTxt2.value=‘‘;
    };
    
    oTxt2.onkeydown=function (ev)
    {
        var oEvent=ev||event;
        
        if(oEvent.keyCode==13)
        {
            oTxt1.value+=oTxt2.value+‘\n‘;
            oTxt2.value=‘‘;
        }
    };
};
</script>
</head>

<body>
<textarea id="txt1" rows="10" cols="40"></textarea><br />
<input id="txt2" type="text" />
<input id="btn1" type="button" value="留言" />
</body>
</html>
Enter getup

 

–ctrl+回车 提交
技术分享
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload=function ()
{
    var oBtn=document.getElementById(‘btn1‘);
    var oTxt1=document.getElementById(‘txt1‘);
    var oTxt2=document.getElementById(‘txt2‘);
    
    oBtn.onclick=function ()
    {   
        oTxt1.value+=oTxt2.value+‘\n‘;
        oTxt2.value=‘‘;
    };
    
    oTxt2.onkeydown=function (ev)
    {
        var oEvent=ev||event;
        
        if(oEvent.ctrlKey && oEvent.keyCode==13)
        {
            oTxt1.value+=oTxt2.value+‘\n‘;
            oTxt2.value=‘‘;
        }
    };
};
</script>
</head>

<body>
<textarea id="txt1" rows="10" cols="40"></textarea><br />
<input id="txt2" type="text" />
<input id="btn1" type="button" value="留言" />
</body>
Ctrl+Enter

 

知识点
l获取事件对象
l冒泡、取消冒泡
lDOM事件流
l鼠标事件
l键盘事件
 

事件基础---初

标签:

原文地址:http://www.cnblogs.com/hack-ing/p/5558250.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!