JavaScript学习第十七天（键盘鼠标事件对象、::before、::after伪元素、选择框样式）_java

DOM事件对象

事件自带的属性，包含事件相关的一些属性

键盘事件对象

html代码

    <input type="text">

altkey、actrlkey、shiftkey 判断这些键是否被按下
matekey 判断matekey键是否被按下（针对mac系统）
code 返回键盘代码
keycode 返回按键的字符代码（针对Ie8以下的浏览器）
which 返回按键的字符代码
target 返回事件作用的目标元素
bubbles 返回是否具有冒泡属性
cancelbubble 是否阻止事件冒泡
type 返回事件类型
js代码

  var ipt = document.getElementsByTagName('input')[0];
       // document.onkeydown = function(e){
       //     e=e||window.event;  // 解决兼容性问题
           // console.log(e);
           // console.log(e.altKey);
           // console.log(e.shiftKey);
           // console.log(e.ctrlKey);
           // console.log(e.code);
           // console.log(e.keyCode);
           // console.log(e.which);
           // console.log(e.target);
       // }
       ipt.onkeydown=function(e){
           e=e||window.event;
           // console.log(e.target);
           // console.log(e.code);
           // console.log(e.keyCode);
           console.log(e.bubbles);
           console.log(e.cancelBubble);
       }

鼠标事件对象

altkey、shiftkey、ctrlkey、metakey（mac系统）对于鼠标事件依然可以使用
target 返回事件作用的目标元素
bubbles 返回是否具有冒泡属性
cancelbubble 是否阻止事件冒泡
type 返回事件类型
button、buttons返回按键的编码
which 返回按下的按键的编码（对应左中右）

鼠标指针的坐标

clientX 相对于可视区域的x轴坐标
clientY 相对于可视区域的y轴坐标

pageX 相对于整个网页区域的x轴坐标，滚动条对其产生影响
pageY 相对于整个网页区域的y轴坐标，滚动条对其产生影响

offsetX 相对于元素自身的x轴坐标
offsetY 相对于元素自身的y轴坐标

layerX 值与clientX相同
layerY 值与clientY相同

screenX 相对于电脑屏幕的x轴坐标
screenY 相对于电脑屏幕的y轴坐标
html代码

    <input type="text">

js代码

 var ipt = document.getElementsByTagName('input')[0];

        // document.onclick = function(e){
            // e=e||window.event;
            // console.log(e.which);
            // console.log(e.target);
            // console.log(e.type);
            // console.log(e.altKey);
            // console.log(e.clientY,e.clientX);
            // console.log(e.offsetY,e.offsetX);
        // }
        ipt.onclick = function(e){
            e=e||window.event;
            // console.log(e.target);
            // e.cancelBubble = true;
            // console.log(e.bubbles);
            // console.log(e.cancelBubble);
            // console.log(e.button);
            console.log(e.clientY,e.clientX);
            console.log(e.offsetY,e.offsetX);
        }

鼠标事件对象的运用

那么学完鼠标事件对象之后，我们进行了相应的练习，完成了一个鼠标拖拽的案例。现在我来进行一下复盘：

首先分析要求，鼠标按下能够让一个元素跟随移动，鼠标松开元素会停止移动。
那么我们首先要使用onmousedown（鼠标按下）事件配合onmousemove（鼠标移动）事件，获得鼠标的坐标，把坐标的值传给元素的位置，完成鼠标按下让元素跟随移动
接着再使用onmouseup（鼠标松开）事件配合onmousemove（鼠标移动）事件，完成鼠标松开时，元素停止移动。

总体的思路不算复杂，但是其中还有一些需要注意的地方，就是我们要使用offsetX、offsetY让控制鼠标在图片上的哪个位置按下时就能保证在哪个位置上，如果不进行这个 *** 作，那么无论鼠标在哪个位置按下后，都会立刻跳转到左上角
html代码

    <div id="box"></div>

css代码

body{
            height: 1000px;
        }
        *{
            margin: 0;
            padding: 0;
        }
        #box {
            width: 50px;
            height: 50px;
            background-color: aqua;
            position: absolute;
        }

js代码

 var oBox = document.getElementById('box');
    var x, y;

    oBox.onmousedown = function (e) {
        var a = e.offsetX;
        var b = e.offsetY;
        document.onmousemove = function (f) {
            x = f.pageX;
            y = f.pageY;
            oBox.style.left = x-a + 'px';
            oBox.style.top = y-b + 'px';

        }
    }
    document.onmouseup = function (ev) {
        document.onmousemove = function () {
            // return false
        }}

css补充内容伪元素

::before 插入到子元素的最前面
::after 插入到子元素的最后面
注意它们都是行标签，是不用在html代码中添加的，可以直接在css中进行编写，content是这两个元素必需的属性
我们可以用它们去清除浮动，以及实现对选择框的样式的控制

清除浮动

清除浮动我们要用到::after伪元素
html代码

 <div id="box1">11</div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

css代码

*{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        #box1,#box2{
            width: 150px;
            height: 150px;
            background-color: antiquewhite;
            text-align: center;
            line-height: 150px;
        }
        ul>li{
            width: 50px;
            height: 50px;
            float: left;
            background-color: chartreuse;
            margin: 10px;
        }
        /* 清除浮动 */
        ul::after{
            content: '';
            display: block;
            clear: both;
        }

控制选择框的样式

控制选择框的样式我们需要用到::before伪元素和content属性
html代码

<input type="checkbox" id="basketBall">
    <label for="basketBall" draggable="false">打篮球</label>
    <input type="checkbox" id="footBall">
    <label for="footBall" draggable="false">踢足球</label>

css代码

/* 清除掉选择框原有的样式 */
        input{
            display: none;
        }
        /* 让用户不能选中复制文字 */
        label{
            user-select: none;
        }
        label::before{
            /* content里面可以用字符代码，也可以使用url（图片地址） */
            content: '20';
            display: inline-block;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            line-height: 16px;
            text-align: center;
            border: 1px solid;
            border-color: aqua;
            vertical-align: middle;
        }
        /* :checked属性表示当元素被选中时  '+'号表示下一个兄弟元素 */
        input:checked+label::before{
            content:'2F';
            background-color: aqua;
            color: white;
            overflow: hidden;
        }