事件基础---初

Posted 2020-07-20 distant-遥远

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了事件基础---初相关的知识，希望对你有一定的参考价值。

什么是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键盘事件

以上是关于事件基础---初的主要内容，如果未能解决你的问题，请参考以下文章

vs code初体验

js初接触

Android 事件分发事件分发源码分析 ( Activity 中各层级的事件传递 | Activity -＞ PhoneWindow -＞ DecorView -＞ ViewGroup )(代码片段

vue3.0 Composition API 上手初体验构建 vue 基础代码

零基础JavaScript编码