初识javaScript（十四）事件

最新推荐文章于 2023-10-10 11:10:59 发布

打酱油的女孩子

最新推荐文章于 2023-10-10 11:10:59 发布

阅读量158

点赞数

分类专栏： js 文章标签： javascript html css

本文链接：https://blog.csdn.net/weixin_38341556/article/details/107971331

版权

js 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

初识JavaScript （十四）事件

1 事件对象的捕获

事件对象：event object
当文档中触发了一个事件，那么会产生一个针对该事件的事件对象。该事件对象由js引擎底层产生。
事件对象是一个非常重要的对象。事件对象中包含了事件的所有的信息。比如：鼠标点击的事件对象中，就包含了鼠标点击的坐标。
按键事件对象中就保存了按键的名称，按键的键值，可以获得用户按下的是哪个按键。
事件对象的捕获：对于谷歌火狐等浏览器，该事件对象是通过事件处理函数的实参传入的。直接给事件处理函数添加一个形参即可以捕获事件对象。 IE低版本（IE8及其以前的版本）不支持使用形参来接收事件对象。需要直接使用window.event 方式来获取当前事件对象。
删除线：不建议使用的方式，可能存在不稳定，不安全的情况。出现了更好的替代的方案。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <style>
       div {
           width: 50px;
           height: 50px;
           background-color: red;
           border: solid 1px;
       }
   </style>
</head>
<body>
<div id="box">谷歌火狐测试</div>
<div id="ie">IE测试</div>
<div id="all">兼容测试</div>
<script>
   var box = document.getElementById ("box");
   //事件处理函数添加形参e，用来接收底层传入的事件对象实参。
   box.onclick = function (e) {
       console.log (e);
   };

   var ieDiv = document.getElementById("ie");
   ieDiv.onclick = function () {
       console.log (window.event);
   };

   //捕获事件对象的兼容写法-1
   var div = document.getElementById("all");
   div.onclick = function (e) {
       e = e ? e :window.event;
       console.log (e);
   }
   //捕获事件对象的兼容写法-2
   div.onclick = function (e) {
       e = e || window.event;
       console.log (e);
   }

</script>
</body>
</html>

2 事件对象属性 type

    事件对象属性：type
    是string类型的数据，返回的是事件的名称。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 150px;
            height: 150px;
            background-color: red;
            border: solid 1px;
        }
    </style>
</head>
<body>
<div id="box"></div>
<script>
    var div = document.getElementById("box");
    div.onclick = function (e) {
        e = e || window.event;
        console.log (e.type);//click
        console.log (typeof e.type);//string
    }

    div.ondblclick = function (e) {
        e = e || window.event;
        console.log (e.type);//dblclick
    }

    div.onmouseover = function (e) {
        e = e || window.event;
        console.log (e.type);//mouseover
    }

</script>
</body>
</html>

3 事件对象属性 altKey，shiftKey、ctrlKey

事件对象属性：altKey、shiftKey、ctrlKey
altKey、shiftKey、ctrlKey 判断三个功能键是否被按下。
返回的值是布尔值。
如果按下了，返回true，否则返回false。
补充：一般情况下，按键事件都是给整个文档添加。
onkeydown : 可以响应所有的按键被按下。
onkeypress：不能响应功能键。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    document.onkeydown = function (e) {
        e = e || window.event;
        console.log (e.altKey);
        console.log (e.shiftKey);
        console.log (e.ctrlKey);
    }

    /*document.onkeypress = function (e) {
        e = e || window.event;
        console.log (e.altKey);
        console.log (e.shiftKey);
        console.log (e.ctrlKey);
    }*/
    //如果是多个功能键被按下
    document.onkeydown = function (e) {
        e = e || window.event;
        if(e.altKey && e.ctrlKey){//两个按键同时被按下。
            console.log ("alt+ctrl 同时被按下");
        }
    }
</script>
</body>
</html>

4 事件对象属性-keyCode

重要：
事件对象属性：keyCode
keyCode属性：
1：针对的按键的事件。
2：keyCode 返回的是按下的按键的键码值。
3：键盘中的每一个键，都有一个唯一的键码值。通过键码值可以知道按下的是哪个键。

常用键码值：
0:48
a：65
方向键：左上右下：37,38,39,40
enter:13

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
</head>
<body>
<script>
   document.onkeydown = function (e) {
       e = e || window.event;
       console.log (e.keyCode);
   }
</script>
</body>
</html>

5 事件对象属性-clientX、clientY、pageX、pageY

事件对象属性：
clientX、clientY：
鼠标点击的点距离浏览器窗口原点的x轴和y轴的距离。
pageX、pageY
鼠标点击的点距离页面原点的x轴和y轴的距离。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<script>
 document.onclick = function (e) {
     e = e || window.event;
     console.log ("cx = " + e.clientX);
     console.log ("cy = " + e.clientY);
     console.log ("px = " + e.pageX);
     console.log ("py = " + e.pageY);
 }
</script>
</body>
</html>

6 事件对象属性offsetX、offsetY、screenX、screenY

事件对象属性：
offsetX、offsetY:
鼠标点击的点距离事件响应对象的左边界的距离和上边界的距离。
screenX、screenY：
鼠标点击的点距离屏幕左边界的距离和屏幕上边界的距离。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <style>
       div {
           width: 150px;
           height: 150px;
           background-color: red;
           border: solid 1px;
       }
   </style>
</head>
<body>
<div></div>
<script>
   var div = document.querySelector('div');
   div.onclick = function (e) {
       e = e || window.event;
       console.log ("offsetX = " + e.offsetX);
       console.log ("offsetY = " + e.offsetY);
   }

   document.onclick = function (e) {
       e = e || window.event;
       console.log ("screenX = " + e.screenX);
       console.log ("screenY = " + e.screenY);
   }
</script>
</body>
</html>

7 事件对象属性-currentTarget

事件对象属性：currentTarget
currentTarget：是一个对象。是当前正在响应事件的元素对象。和在函数中的this是一致的对象。
而且该对象一定是绑定了事件处理函数的。
currentTarget === this

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<ul>
  <li>11111111</li>
  <li>222222222</li>
  <li>33333333</li>
  <li>4444444444</li>
  <li>555555555</li>
</ul>
<script>
  document.onclick = function (e) {
      e = e||  window.event;
      console.log (e.currentTarget);
  }

 /* var div = document.createElement("div");
  div.style.width = "200px";
  div.style.height = "200px";
  div.style.backgroundColor = "red";
  div.onclick = function (e) {
      e = e || window.event;
      console.log (e.currentTarget);
      console.log (this);
      console.log (this === e.currentTarget);
  }
  document.body.appendChild(div);

  var ul = document.querySelector("ul");
  ul.onclick = function (e) {
      e = e || window.event;
      console.log (e.currentTarget);
      console.log (this);
  }*/
</script>
</body>
</html>

8 事件对象属性-target

事件对象属性：target
target对象：是最上层的，第一个接收到事件的对象，不一定绑定了事件处理函数，因为事件冒泡会将事件传递给底层的父元素。

target 和 currentTarget的区别：
1：currentTarget 对象一定绑定了事件处理函数。target 不一定绑定了。
2：currentTarget 对象在事件处理函数中，等价于this。target不一定等价于this.


<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
</head>
<body>
<ul>
   <li>11111111</li>
   <li>222222222</li>
   <li>33333333</li>
   <li>4444444444</li>
   <li>555555555</li>
</ul>
<script>
   /*document.onclick = function (e) {
       e = e||  window.event;
       console.log (e.target);
   }*/

  var div = document.createElement("div");
   div.style.width = "200px";
   div.style.height = "200px";
   div.style.backgroundColor = "red";
   div.onclick = function (e) {
       e = e || window.event;
       console.log (e.target);
       console.log (e.currentTarget === e.target);
   }
   document.body.appendChild(div);

   var ul = document.querySelector("ul");
   ul.onclick = function (e) {
       e = e || window.event;
       console.log (e.target);
       console.log (this);
   }
</script>
</body>
</html>

9 事件对象属性-target的兼容问题

target对象具有兼容性问题。
IE8及其以前的版本不支持该属性。
使用事件对象的属性：srcElement 替代target使用。
e.srcElement：在各个浏览器中都可以使用。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
</head>
<body>
<script>
   var div = document.createElement("div");
   div.style.width = "200px";
   div.style.height = "200px";
   div.style.backgroundColor = "red";
   div.onclick = function (e) {
       e = e || window.event;
       console.log (e.srcElement);
   }
   document.body.appendChild(div);

   //兼容写法
   div.onclick  =function (e) {
       e = e || window.event;
       //优先使用的放到前面。
       var target = e.target || e.srcElement;
       console.log (target);
   }

</script>
</body>
</html>

10 事件对象属性-bubbles

事件对象属性：bubbles
该属性用来检测事件是否支持事件冒泡
如果支持：返回true，否则返回false。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <style>
       div {
           width: 200px;
           height: 200px;
           background-color: blue;
       }
   </style>
</head>
<body>
<div></div>
<script>
   var div = document.querySelector("div");
   /*div.onclick = function (e) {
       e = e || window.event;
       console.log (e.bubbles);//true
   }*/
   /*div.ondblclick = function (e) {
       e = e || window.event;
       console.log (e.bubbles);//true
   }*/
   /*div.onmouseover = function (e) {
       e = e || window.event;
       console.log (e.bubbles);//true
   }*/
   /*div.onmouseout = function (e) {
       e = e || window.event;
       console.log (e.bubbles);//true
   }*/
   /*div.onmouseenter = function (e) {
       e = e || window.event;
       console.log (e.bubbles);//false
   }*/
  /* div.onmouseleave = function (e) {
       e = e || window.event;
       console.log (e.bubbles);//false
   }*/
   /*div.onmousedown = function (e) {
       e = e || window.event;
       console.log (e.bubbles);//true
   }*/
   /*div.onmouseup = function (e) {
       e = e || window.event;
       console.log (e.bubbles);//true
   }*/
</script>
</body>
</html>

11 事件对象属性-key

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>
    document.onkeydown = function (e) {
        e = e || window.event;
        console.log (e.key);
    }
</script>
</body>
</html>

12 事件对象属性-eventPhase

事件对象属性：eventPhase
该属性只有三个值[1,2,3]
2: 当前事件直接作用到的元素对象捕获的该事件对象的 eventPhase 的值。
1：因为事件流的事件捕获，导致当前事件作用到的对象的父级对象捕获到的事件对象的 eventPhase 的值。
3：因为事件流的事件冒泡，导致当前事件作用到的对象的父级对象捕获到的事件对象的 eventPhase 的值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            border-radius: 50%;
            padding-top: 0.1px;
            margin: 50px auto;
        }
        #red{
            width: 300px;
            height: 300px;
            background-color: red;
        }
        #green{
            width: 200px;
            height: 200px;
            background-color: green;
        }
        #blue{
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
<div id="red">
    <div id="green">
        <div id="blue">

        </div>
    </div>
</div>
<script>
    var red = document.getElementById("red");
    var green = document.getElementById("green");
    var blue = document.getElementById("blue");

    var flag = true;
    red.addEventListener("click",function (e) {
        e = e || window.event;
        console.log ("red = " + e.eventPhase);
    },flag);

    green.addEventListener("click",function (e) {
        e = e || window.event;
        console.log ("green = " + e.eventPhase);
    },flag);

    blue.addEventListener("click",function (e) {
        e = e || window.event;
        console.log ("blue = " + e.eventPhase);
    },flag);

</script>
</body>
</html>

13 事件对象属性-button

事件对象属性：button
和鼠标事件有关。button是一个整数值，用来代表点击了鼠标的哪个键。
button的取值范围[0,1,2]
0: 鼠标左键
1：鼠标中键
2：鼠标右键

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
<div>

</div>
<script>
    var div = document.querySelector("div");
    div.onmousedown = function (e) {
        e = e || window.event;
        console.log (e.button);
    }
</script>
</body>
</html>

14 事件对象常用方法-preventDefault

重要：
事件对象常用方法：preventDefault()
preventDefault: 阻止默认行为。
IE低版本不支持该方法。
IE下阻止默认行为的实现方式：事件对象.returnValue = false;

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
</head>
<body>
<a href="http://www.baidu.com" id="link">百度一下</a>
<script>
   var link = document.getElementById("link");
   link.onclick = function (e) {
       e = e || window.event;
       //组织a标签的默认跳转行为。
       // e.preventDefault();

       //兼容写法
       //是否支持 preventDefault 方法，支持，调用，不支持。 执行：e.returnValue = false
       e.preventDefault ? e.preventDefault() : e.returnValue = false;

       document.location.href = "http://www.163.com";
   }
</script>
</body>
</html>

15 事件对象常用方法-stopPropagation

事件对象常用方法：stopPropagation：
stopPropagation：阻止事件冒泡的。
e.stopPropagation()
stopPropagation：IE8及其以前版本不支持。如果要实现阻断冒泡行为。
实现方法：事件对象.cancelBubble = true;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            border-radius: 50%;
            padding-top: 0.1px;
            margin: 50px auto;
        }
        #red{
            width: 300px;
            height: 300px;
            background-color: red;
        }
        #green{
            width: 200px;
            height: 200px;
            background-color: green;
        }
        #blue{
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
<div id="red">
    <div id="green">
        <div id="blue">

        </div>
    </div>
</div>
<script>
    var green = document.getElementById("green");
    var blue = document.getElementById("blue");
    var red = document.getElementById("red");

    green.onclick = function (e) {
        e = e || window.event;
        console.log ("green");
        //事件到此为止。不会冒泡给父级元素。red
        // e.stopPropagation();
        //兼容写法
        e.stopPropagation ? e.stopPropagation(): e.cancelBubble = true;
    }
    blue.onclick = function (e) {
        e = e || window.event;
        console.log ("blue");
        //事件到此为止。不会冒泡给父级元素 red green。
        // e.stopPropagation();
        e.stopPropagation ? e.stopPropagation(): e.cancelBubble = true;
    }
    red.onclick = function (e) {
        e = e || window.event;
        console.log ("red");
    }



</script>
</body>
</html>

16 取消默认右键菜单行为

取消默认右键菜单行为：
oncontextmenu : 右键单击菜单事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    document.oncontextmenu = function (e) {
        e = e || window.event;
        console.log (e.button);//2
        //阻止默认行为
        e.preventDefault ? e.preventDefault():e.returnValue = false;
    }
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        ul {
            list-style: none;
            background-color: #ccc;
            width: 150px;
            position: fixed;
            left: 0;
            top: 0;
            display: none;
            padding-left: 30px;
        }
        li {
            line-height: 2.5em;
            background-color: #eee;
            padding-left: 10px;
        }
    </style>
</head>
<body>
<ul id="menu">
    <li>复制</li>
    <li>剪切</li>
    <li>粘贴</li>
</ul>
<!--
    1: ul>li样式
    2：取消右键的默认行为。
    3：获得当前鼠标点击的点的坐标。将ul设置为绝对定位，设置left和top属性。设置为可见。
    4：给li添加mouseover事件。设置背景色。添加mouseout事件。还原背景色。
    5：给文档添加单击事件，设置ul不可见。
-->
<script>
    var menu = document.getElementById("menu");
    //右键菜单
    document.oncontextmenu = function (e) {
        e = e || window.event;
        //阻止默认行为
        e.preventDefault ? e.preventDefault(): e.returnValue = false;

        //获得当前点击坐标。相对于浏览器窗口的。
        var left = e.clientX;
        var top = e.clientY;

        //设置menu可见
        menu.style.display = "block";
        //设置menu的坐标
        menu.style.left = left + "px";
        menu.style.top = top + "px";
    }

    //左键点击任意位置，menu消失
    document.onclick = function () {
        menu.style.display = "none";
    }

    //给每个li添加鼠标移入和移出事件
    var lis = document.querySelectorAll("li");
    for (var i = 0; i < lis.length; i++) {
        lis[i].onmouseover = function () {
            this.style.backgroundColor = "orange";
        };
        lis[i].onmouseout = function () {
            this.style.backgroundColor = "#eee";
        };
    }

</script>
</body>
</html>

17 四方向移动小球练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<script>
    //创建div 设置为圆设置定位
    function initBall() {
        var ball = document.createElement ("div");
        ball.style.width = "200px";
        ball.style.height = "200px";
        ball.style.position = "fixed";
        ball.style.left = "0";
        ball.style.top = "0";
        ball.style.border = "solid 1px";
        ball.style.borderRadius = "50%";
        ball.style.backgroundColor = "red";
        return ball;
    }

    //如果使用了内部或者是外部的样式，获得内部或者是外部的样式，要使用兼容写法。
    //匿名立即执行函数
    (function () {
        //得到一个球形的div
        var ball = initBall ();
        //添加到body
        document.body.appendChild (ball);
        //四个方向键对应的keyCode值。
        const LEFT = 37;
        const UP = 38;
        const RIGHT = 39;
        const DOWN = 40;
        //W A S D 四个字母的keyCode值。
        const W_CODE = 87;
        const A_CODE = 65;
        const S_CODE = 83;
        const D_CODE = 68;
        //获得球的直径
        const DIAMETER = parseInt (ball.style.width);
        //获得浏览器窗口的宽高
        var winWidth = document.documentElement.clientWidth;
        var winHeight = document.documentElement.clientHeight;
        //球移动的速度
        const SPEED = 50;

        document.onkeydown = function (e) {
            e = e || window.event;

            var code = e.keyCode;
            //获得球的坐标
            var left = parseInt (ball.style.left);
            var top = parseInt (ball.style.top);
            //修改坐标
            switch (code) {
                case LEFT:
                case A_CODE:
                    left = (left -= SPEED) < 0 ? 0 : left;
                    break;
                case UP:
                case W_CODE:
                    top = (top -= SPEED) < 0 ? 0 : top;
                    break;
                case RIGHT:
                case D_CODE:
                    left = (left += SPEED) > winWidth - DIAMETER ? winWidth - DIAMETER : left;
                    break;
                case DOWN:
                case S_CODE:
                    top = (top += SPEED) > winHeight - DIAMETER ? winHeight - DIAMETER : top;
                    break;
            }
            //设置修改后的坐标。
            ball.style.left = left + "px";
            ball.style.top = top + "px";
        }
    }) ();
</script>
</body>
</html>

18 鼠标拖动元素练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #box {
            width: 200px;
            height: 200px;
            background-color: chocolate;
            position: fixed;
            left: 0;
            top: 0;
            border: solid 1px;
        }
    </style>
</head>
<body>
<div id="box"></div>

<script>
    var div = document.getElementById ("box");
    //给div添加单击事件
    div.onmousedown = function (e) {
        //获得当前点击的点距离div的左边界和上边界的距离
        e = e || window.event;
        var disX = e.offsetX;
        var disY = e.offsetY;

        //div被点中之后添加鼠标移动事件//
        //该事件只要鼠标移动，就不断的被触发。
        document.onmousemove = function (ev) {
            ev = ev || window.event;
            //获得鼠标距离浏览器窗口的距离
            var left = ev.clientX;
            var top = ev.clientY;

            div.style.left = (left - disX) + "px";
            div.style.top = (top - disY) + "px";
        }
    }
    //鼠标抬起
    div.onmouseup = function () {
        document.onmousemove = null;
    }

</script>

</body>
</html>

19 鼠标拖动元素练习

针对鼠标的所有的事件：
onclick : 鼠标单击事件：支持冒泡
ondblclick：鼠标双击事件（两次单击事件）：支持冒泡
onmouseover：鼠标进入悬浮事件：支持冒泡
onmouseout：鼠标离开事件：支持冒泡
onmouseenter：鼠标进入事件：不支持冒泡
onmouseleave：鼠标离开事件：不支持冒泡
onmousedown：鼠标按下事件：支持冒泡
onmouseup：鼠标抬起事件：支持冒泡
onmousedown + onmouseup == onclick
onmousemove: 鼠标移动事件：支持冒泡。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<script>
</script>
</body>
</html>

打酱油的女孩子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初识javaScript（十四）事件

事件1 事件对象的捕获2 事件对象属性 type3 事件对象属性 altKey，shiftKey、ctrlKey4 事件对象属性-keyCode5 事件对象属性-clientX、clientY、pageX、pageY6 事件对象属性offsetX、offsetY、screenX、screenY7 事件对象属性-currentTarget8 事件对象属性-target9 事件对象属性-target的兼容问题10 事件对象属性-bubbles11 事件对象属性-key1 事件对象的捕获事件对象：event
复制链接

扫一扫

专栏目录