（javascript）(基础知识+实例) 12.事件1-事件类型，事件对象

不二哈

已于 2022-09-10 20:58:42 修改

阅读量1k

点赞数 1

分类专栏： Javascript 文章标签： javascript 前端开发语言

于 2022-08-31 17:15:18 首次发布

本文链接：https://blog.csdn.net/sj1877288470/article/details/126627165

版权

Javascript 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

DOM树

描述html层级结构

DOM节点

分类
- 标签元素
- 文本文本
- 属性属性
- 注释注释
节点属性
- nodeType
- nodeName tagName
- nodeValue

遍历DOM树

获取子节点
获取父节点
获取前一个相邻
获取后一个相邻

操作DOM

创建一个元素节点
- document.createElement(标签名)
添加到页面
- appendChild
- insertBefore
移除
- removeChild
克隆
- cloneNode

事件类型

鼠标事件
- click
- dblclick
- mouseover
- mouseout
- mousemove
- mousedown
- mouseup
- mousewheel
mousewheel和scroll区别
获取页面滚动条滚动高度
- document.body.scrollTop || document.documentElement.scrollTop
设置页面滚动条滚动高度
- document.body.scrollTop = 值
- document.documentElement.scrollTop = 值

事件对象 event对象

含义：就是用来获取事件触发时详细信息
获取event对象
1. 每一个事件处理函数都会自带一个event
2. 每一个事件处理函数默认第一个形参就是event
- 综合获取 var evt = event || e
event对象的作用
1. 获取坐标
  - client(客户端)
  - clientX clientY 鼠标点击位置相对于浏览器左上角
  - offsetX offsetY 鼠标点击位置相对于事件源左上角要注意事件源的坐标是相对的可能会不断变化
  - pageX pageY 鼠标点击位置相对于页面左上角
2. 获取键盘按下的按键
  - keyCode
3. 判断鼠标滚轮滚动方向
  - wheelDeltaY
  - which (safira)
4. 阻止事件冒泡
  - 阻止事件冒泡：触发子元素的事件时不希望触发父元素同类型的事件
  - 在子元素的事件处理函数里面使用event.stopPropagation()
5. 获取目标元素
  - 含义：触发事件位置的子元素
  - target
6. 组合键判断
  - ctrl+c
  - ctrlKey
  - shiftKey
  - altKey
7. 阻止默认事件
  - 不希望标签自带的行为触发希望执行自己绑定的事件
  - preventDefault()
获取页面宽度和高度
- window.innerWidth
- window.innerHeight
键盘事件
- keydown 按下
- keyup 抬起
- 键盘事件的事件源是谁？
  - window
事件的传播（事件的执行机制）
- 含义：多个嵌套的元素绑定同类型的事件，事件执行的先后顺序就成为事件传播
- 分类：
  - 事件执行方向应该是由内向外，由点击的元素一直往上到window称之为冒泡机制（非IE）
  - 事件执行方向应该是由外向内，由window一直往下传播到点击的元素称之为捕获机制(IE)
事件委托
- 某个元素无法直接绑定事件，给它页面上存在的父元素绑定同类型的事件，点击子元素同样会触发父元素事件，在通过目标元素来缩小事件触发的范围
默认事件
- 含义： html标签自带的事件
- a标签
- form标签

绑定事件的方式

html+js
纯js
- 事件源.on+事件类型 = 事件处理函数
事件监听
- 事件源.addEventListener(事件类型, 事件处理函数, 事件执行机制)
- 默认事件执行机制是false 代表冒泡如果true代表捕获
- 区别
  1. addEventListener绑定事件可以利用 removeEventListener来取消
  2. 用on同一类型的事件只能绑定一个事件处理函数 add*可以绑定多个事件处理函数
  3. addEventListener可以实现两种事件传播机制

实例

（以下代码均为课程实例）

（1）事件对象

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box">

    </div>
    <script>
        function fn(){
            // 普通函数内部没有event
            console.log(event)
        }
        fn()
        var box = document.querySelector('.box')
        // 默认第一个形参就是event
        box.onclick = function(e){
            console.log('click...')
            // 每一个事件处理函数里面自带一个event
            console.log(event)
            console.log(e)
            // 综合写法
            var evt = event || e
        }
    </script>
</body>

（2）event获取三组坐标

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            margin: 30px 40px;
            width: 200px;
            height: 200px;
            background-color: red;
        }
        body{
            height: 4000px;
        }
    </style>
</head>
<body>
    <div class="box">

    </div>
    <script>
        var box = document.querySelector('.box')
        box.onclick = function(e){
            var evt = event || e
            console.log(evt.clientX, evt.clientY)
            // console.log(evt.offsetX, evt.offsetY)
            console.log(evt.pageX, evt.pageY)
        }
    </script>
</body>

（3）鼠标跟随

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            position: absolute;
            left: 0;
            top: 0;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box">

    </div>
    <script>
        console.log(window.innerWidth, window.innerHeight)
        /* 
            思路：
                1. 给整个页面绑定一个鼠标移动事件
                2. 在移动事件里面获取鼠标的坐标位置，用哪个坐标？？
                3. 可以通过定位让盒子移动到获取的坐标位置
        */
       // 获取元素
       var w = window.innerWidth
       var h = window.innerHeight
       var box = document.querySelector('.box')
       document.onmousemove = function(e){
            var evt = event || e
            // 到底用哪个坐标
            var x = evt.clientX
            var y = evt.clientY
            console.log(x, y)
            // 让盒子过来
            // 盒子宽度/2   盒子高度/2
            var boxW = box.offsetWidth
            var boxH = box.offsetHeight
            // x坐标的范围 [boxW/2, 页面宽度 - boxW/2]
            if(x<=boxW/2){
                // 再往左边 盒子就不动了
                x = boxW/2
            }
            if(x>= w - boxW/2){
                // 再往右边 盒子就不动了
                x = w - boxW/2
            }
            if(y<= boxH/2){
                // 再往右边 盒子就不动了
                y =boxH/2
            }
            if(y>= h - boxH/2){
                // 再往右边 盒子就不动了
                y = h - boxH/2
            }
            // y坐标范围 [boxH/2, 页面高度-boxH/2]
            box.style.left = x - boxW/2 + 'px'
            box.style.top = y - boxH/2 + 'px'
       }
    </script>
</body>

（4）键盘事件

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 300px;
            height: 300px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box">

    </div>
    <script>
        // 键盘事件不能给某个具体的元素绑定
    /*   
        var box = document.querySelector('.box')
        box.onkeydown = function(){
            console.log('按下键盘')
        }
        box.onkeyup = function(){
            console.log('松开键盘')
        }
    */
        window.onkeydown = function(e){
            var evt = event || e
            console.log('按下键盘')
            console.log(evt.keyCode)
        }
        window.onkeyup = function(){
            console.log('松开键盘')
        }
    </script>
</body>

（5）判断方向键，控制盒子移动

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .box {
        position: absolute;
        left: 0;
        top: 0;
        width: 50px;
        height: 50px;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
    <script>
      var box = document.querySelector(".box");
      var boxW = box.offsetWidth;
      var boxH = box.offsetHeight;

      // 按键盘上面aswd  a-->向左  d-->向右  w-->上  s-->下
      window.onkeyup = function (e) {
        var evt = event || e;
        console.log(evt.keyCode);
        var code = evt.keyCode;
        // 每次按下的时候都要获取盒子当前的left
        var currentLeft = getComputedStyle(box).left
        currentLeft = parseInt(currentLeft)
        // 每次按下的时候都要获取当前盒子的top
        var currentTop = getComputedStyle(box).top
        currentTop = parseInt(currentTop)
        switch (code) {
          //上下键控制是盒子在当前top的基础上加减一个盒子本身的高度
          case 87:
            console.log("向上");
            box.style.top = currentTop - boxH + 'px'
            break;
          case 83:
            console.log("向下");
            box.style.top = currentTop + boxH + 'px'
            break;
          // 左右键控制是盒子在当前left的基础上加减一个盒子本身的宽度
          case 65:
            console.log("向左");
            box.style.left = currentLeft - boxW + 'px'
            break;
          case 68:
            console.log("向右");
            box.style.left = currentLeft + boxW + 'px'
            break;
        }
      };
    </script>
  </body>

（6）判断鼠标滚动的方向

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        window.onmousewheel = function(e){
            var evt = event || e
            // console.log(evt)
            if(evt.wheelDeltaY > 0){
                console.log('向上滚动')
            }else{
                console.log('向下滚动')
            }
        }
    </script>
</body>

（7）实现全屏滚动

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .container{
            position: relative;
            width: 100%;
            height: 100vh;
            overflow: hidden;
        }

        .wrap{
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            transition: top 1s;
        }
        section{
            width: 100%;
            height: 100vh;
            font-size: 100px;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        section:nth-child(1){
            background-color: blueviolet;
        }
        section:nth-child(2){
            background-color: salmon;
        }
        section:nth-child(3){
            background-color: darkkhaki;
        }
        section:nth-child(4){
            background-color: firebrick;
        }
        section:nth-child(5){
            background-color: hotpink;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="wrap">
            <section>
                第一屏
            </section>
            <section>
                第二屏
            </section>
            <section>
                第三屏
            </section>
            <section>
                第四屏
            </section>
            <section>
                第五屏
            </section>
        </div>
    </div>
    <script>
        // 获取一屏的高度
        var h = window.innerHeight
        var wrap = document.querySelector('.wrap')
        window.onmousewheel = function(e){
            var currentTop = parseFloat(getComputedStyle(wrap).top)
            var evt = event || e
            // console.log(evt)
            if(evt.wheelDeltaY > 0){
                console.log('向上滚动')
                wrap.style.top = currentTop + h + 'px'
            }else{
                console.log('向下滚动')
                wrap.style.top = currentTop - h + 'px'
            }
        }
    </script>
</body>

（8）事件的传播

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .big-box{
            width: 300px;
            height: 300px;
            background-color: red;
        }
        .mid-box{
            width: 200px;
            height: 200px;
            background-color: blue;
        }
        .small-box{
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="big-box">
        <div class="mid-box">
            <div class="small-box">

            </div>
        </div>
    </div>
    <script>
        // 给三个嵌套的盒子同时绑定点击事件
        document.querySelector('.big-box').onclick = function(){
            console.log('大盒子被点击了')
        }
        document.querySelector('.mid-box').onclick = function(){
            console.log('中盒子被点击了')
        }
        document.querySelector('.small-box').onclick = function(){
            console.log('小盒子被点击了')
        }
    </script>
</body>

（9）阻止事件冒泡

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 400px;
            height: 200px;
            border: 1px solid #ddd;
            background-color: red;
            color: #fff;
        }
    </style>
</head>
<body>
    <div class="box">
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Itaque neque vitae quam minus quo suscipit, mollitia laudantium quibusdam velit consectetur error est, aliquam culpa id quasi numquam, a earum enim!
        <button>按钮</button>
    </div>
    <script>
        // 点击外面盒子 盒子会消失
        var hezi = document.querySelector('.box')
        hezi.onclick = function(){
            this.style.display = 'none'
        }
        // 点击里面的按钮 文字会变颜色
        document.querySelector('button').onclick = function(e){
            var evt = event || e
            evt.stopPropagation()
            hezi.style.color = 'blue'
        }
    </script>
</body>

（10）事件委托1

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 400px;
        height: 200px;
        border: 1px solid #ddd;
        background-color: red;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <div class="box">
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Itaque neque
      vitae quam minus quo suscipit, mollitia laudantium quibusdam velit
      consectetur error est, aliquam culpa id quasi numquam, a earum enim!
      <span>dasdhasd</span>
      <p>duanluo</p>
    </div>
    <script>
      var box = document.querySelector(".box");
      // 按钮是延迟2s之后生成的
      setTimeout(function () {
        // 动态创建一个button
        var btn = document.createElement("button");
        btn.innerHTML = "按钮";
        // 添加到box里面
        box.appendChild(btn);
      }, 2000);
      // 点击里面的按钮 文字会变颜色
      // 给box绑定点击事件
      box.onclick = function (e) {
        // 判断点击的元素是按钮的时候才来执行这个变色
        var evt = event || e
        console.log(evt.target)
        if(evt.target.nodeName === 'BUTTON'){
            box.style.color = "blue";
        }
      };
    </script>
  </body>

（11）事件委托2

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <button>按钮</button>
    <div class="box">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae ut sequi dignissimos officia, blanditiis repellat voluptatibus, iusto delectus cumque excepturi maiores facere amet voluptatem expedita ab minima est illo harum.
    </div>
    <script>
        document.body.onclick = function(e){
            var evt = event || e
            if(evt.target.tagName === 'LI'){
                alert('弹出内容')
            }
            if(evt.target.tagName === 'BUTTON'){
                alert('文字变色')
            }
            if(evt.target.className === 'box'){
                alert('改变背景色')
            }
        }
    </script>
</body>

（12）判断组合键

<script>
        // 每按下一个按键就会执行一次事件
        // 按下事件触发的时候只会有一个keyCode
        window.onkeydown = function(e){
            // 判断用户按下c键的时候有没有按ctrl键
            var evt = event || e
            console.log(evt)
            console.log(evt.keyCode)
            // 按下的时候不可能有两个keyCode
            if(evt.keyCode === 67 && evt.ctrlKey){
                alert('ctrl+c')
            }
        }
    </script>

（13）默认事件

<body>
    <!-- a标签自带一个点击跳转的行为 -->
    <a href="#">百度一下</a>
    <script>
        // 利用js实现给a标签点击的时候把文字颜色改成红色，并且跳转到淘宝
        var link = document.querySelector('a')
        link.onclick = function(e){
            var evt = event || e
            evt.preventDefault()
            this.style.color = 'red'
            location.href = 'https://www.taobao.com'
        }
    </script>
</body>

（14）返回顶部

 <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        height: 4000px;
      }
      a {
        position: fixed;
        bottom: 20px;
        right: 20px;
      }
    </style>
  </head>
  <body>
    <a href="javascript:void 0;">链接</a>
    <script>
      var link = document.querySelector("a");
      link.onclick = function (e) {
        // var evt = event || e
        // evt.preventDefault()
        this.style.color = "red";
        location.href = "https://www.taobao.com";
      };
    </script>
  </body>

（15）阻止表单默认提交事件1

<body>
    <form action="https://www.baidu.com">
        <input type="text" placeholder="请输入用户名" id="username">
        <input type="text" placeholder="请输入年龄" id="age">
        <input type="text" placeholder="请输入成绩" id="score">
        <button id="add">添加</button>
    </form>
    <script>
        // 给按钮绑定点击事件
        document.getElementById('add').onclick = function(e){
            var evt = event || e
            evt.preventDefault()
            console.log('取值')
            console.log('生成表格')
        }
    </script>
</body>

（16）阻止表单默认提交事件

<body>
    <form action="https://www.baidu.com">
        <input type="text" placeholder="请输入用户名" id="username">
        <input type="text" placeholder="请输入年龄" id="age">
        <input type="text" placeholder="请输入成绩" id="score">
        <button id="add" type="button">添加</button>
    </form>
    <!-- 一个按钮在表单里面默认的type是submit -->
    <!-- <button id="add">添加</button> -->
    <script>
        // 给按钮绑定点击事件
        document.getElementById('add').onclick = function(){
            console.log('取值')
            console.log('生成表格')
        }
    </script>
</body>

（17）事件监听

<body>
    <div class="box">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Et accusamus est alias eius porro, fuga assumenda mollitia rem dignissimos dolore, quae quaerat quam libero earum itaque tempora iste, quisquam nihil.
    </div>
    <p>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Labore omnis ipsam nulla assumenda quo iure saepe autem sit consequuntur aperiam beatae reprehenderit repellendus, cupiditate impedit quam nobis quos porro ex.
    </p>
    <script>
        var box = document.querySelector('.box')
        box.addEventListener('click', function(){
            console.log(1111)
        })
        var para = document.querySelector('p')
        para.addEventListener('mouseover', function(){
            this.style.color = 'red'
        })
    </script>
</body>

（18）on绑定事件和事件监听的区别1

 <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .box {
        position: absolute;
        left: 0;
        top: 0;
        width: 100px;
        height: 100px;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
    <script>
      var box = document.querySelector(".box");
      /* box.onmousedown = function () {
        // 先触发按下 然后才触发move
        console.log("down...");
        document.onmousemove = function (e) {
          console.log("move...");
        };
      };
      document.onmouseup = function(){
        console.log('up...')
        // 如何取消move事件
        document.onmousemove = null
      } */
      function A(){
        console.log('move...')
      }
      box.addEventListener('mousedown', function(){
        console.log("down...");
        document.addEventListener('mousemove', A)
        // document.addEventListener('mousemove', function(){
        //     console.log('move2...')
        // })
      })
      document.addEventListener('mouseup', function(){
        console.log('up...')
        document.removeEventListener('mousemove', A)
        // document.removeEventListener('mousemove', function(){
        //     console.log('move2...')
        // })
      })
    </script>
  </body>

（19）on绑定事件和事件监听的区别2

  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .box {
        width: 100px;
        height: 100px;
        border: 2px solid black;
        margin-bottom: 10px;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div class="box box01"></div>
    <div class="box box02"></div>
    <script>
      var box = document.querySelector(".box01");
      // on绑定同一类型事件只能对应一个事件处理函数 如果多个会覆盖
      box.onclick = function(){
        console.log('do something A...')
      }
      box.onclick = function(){
        console.log('do something B...')
      }
      box.onclick = function(){
        console.log('do something C...')
      }
      function A(){
        console.log('do something A...')
      }
      function B(){
        console.log('do something B...')
      }
      function C(){
        console.log('do something C...')
      }
      var box02 = document.querySelector('.box02')
      box02.addEventListener('click', A)
      box02.addEventListener('click', B)
      box02.addEventListener('click', C)

      setTimeout(function(){
        box02.removeEventListener('click', B)
        box02.removeEventListener('click', C)
      }, 10000)
    </script>
  </body>

（20）on与add的区别

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .big-box{
            width: 300px;
            height: 300px;
            background-color: red;
        }
        .mid-box{
            width: 200px;
            height: 200px;
            background-color: blue;
        }
        .small-box{
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="big-box">
        <div class="mid-box">
            <div class="small-box">

            </div>
        </div>
    </div>
    <script>
        // 给三个嵌套的盒子同时绑定点击事件
        document.querySelector('.big-box').addEventListener('click', function(){
            console.log('大盒子被点击了')
        }, true)
        document.querySelector('.mid-box').addEventListener('click', function(){
            console.log('中盒子被点击了')
        }, true)
        document.querySelector('.small-box').addEventListener('click', function(){
            console.log('小盒子被点击了')
        }, true)
    </script>
</body>

（21）实现盒子的拖拽

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            height: 50px;
            width: 50px;
            background-color: gray;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <script>
        /* 实现盒子的拖拽 */





        console.log(window.innerWidth, window.innerHeight)
        /* 
            思路：
                1. 给整个页面绑定一个鼠标移动事件
                2. 在移动事件里面获取鼠标的坐标位置，用哪个坐标？？
                3. 可以通过定位让盒子移动到获取的坐标位置
        */
       // 获取元素
       var w = window.innerWidth
       var h = window.innerHeight
       var box = document.querySelector('.box')
       document.onmousedown = function(){
        document.onmousemove = function(e){
            var evt = event || e
            // 到底用哪个坐标
            var x = evt.clientX
            var y = evt.clientY
            console.log(x, y)
            // 让盒子过来
            // 盒子宽度/2   盒子高度/2
            var boxW = box.offsetWidth
            var boxH = box.offsetHeight
            // x坐标的范围 [boxW/2, 页面宽度 - boxW/2]
            if(x<=boxW/2){
                // 再往左边 盒子就不动了
                x = boxW/2
            }
            if(x>= w - boxW/2){
                // 再往右边 盒子就不动了
                x = w - boxW/2
            }
            if(y<= boxH/2){
                // 再往右边 盒子就不动了
                y =boxH/2
            }
            if(y>= h - boxH/2){
                // 再往右边 盒子就不动了
                y = h - boxH/2
            }
            // y坐标范围 [boxH/2, 页面高度-boxH/2]
            box.style.left = x - boxW/2 + 'px'
            box.style.top = y - boxH/2 + 'px'
       }
       
       }
       document.onmouseup = function(){
        document.onmousemove = null;
       }
       

    </script>
</body>

（22）判断用户按下了ctrl+shift+alt+L 弹出格式化

<script>
        // 判断用户按下了ctrl+shift+alt+L 弹出格式化



        window.onkeydown = function(e){
            var evt = event || e
            console.log(evt)
            console.log(evt.keyCode)
             if(evt.keyCode ===76  && evt.shiftKey && evt.ctrlKey && evt.altKey){
                alert('用户按下了ctrl+shift+alt+L')
             }
        }
    </script>

（23）利用表单向表格里面添加内容

<body>
    <input type="text" placeholder="请输入用户名" id="username">
    <input type="text" placeholder="请输入年龄" id="age">
    <input type="text" placeholder="请输入成绩" id="score">
    <button id="add">添加</button>
    <br>
    <br>
    <!-- 
        编号是一个四位的随机数0000 - 9999
        操作就是一个删除的按钮
     -->
    <table border="1" cellspacing="0" cellpadding="0" width="100%">
        <thead>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>成绩</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>



    <script>

        //给添加按钮绑定一个事件
        document.querySelector('#add').onclick = function () {
            //获取每一个输入框的值
            var username = document.querySelector('input[id=username]').value
            var age = document.querySelector('input[id=age]').value
            var score = document.querySelector('input[id=score]').value
            //创建一个tr
            var tr = document.createElement('tr')
            //创建每一列
            var td01 = document.createElement('td')
            var random = parseInt(Math.random() * 1000)
            td01.innerText = random
            tr.appendChild(td01)
            var td02 = document.createElement('td')
            td02.innerText = username
            tr.appendChild(td02)
            var td03 = document.createElement('td')
            td03.innerText = age
            tr.appendChild(td03)
            var td04 = document.createElement('td')
            td04.innerText = score
            tr.appendChild(td04)
            var td05 = document.createElement('td')
            td05.innerHTML = '<button class="del-btn">删除</button>'
            tr.appendChild(td05)
            //把tr添加到tbody
            document.querySelector('tbody').appendChild(tr)

            // 利用事件委托给tbody绑定点击事件
            document.querySelector('tbody').onclick = function (event) {
                if (event.target.className == 'del-btn') {
                    console.log('删除')
                    // 从tbody里面删除点击某一行
                    document.querySelector('tbody').removeChild(event.target.parentNode.parentNode)
                }
            }

}

    </script>
</body>

不二哈

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
（javascript）(基础知识+实例) 12.事件1-事件类型，事件对象

含义：就是用来获取事件触发时详细信息获取event对象event对象的作用获取页面宽度和高度键盘事件事件的传播（事件的执行机制）事件委托默认事件（以下代码均为课程实例）（1）事件对象（2）event获取三组坐标（3）鼠标跟随（4）键盘事件（5）判断方向键，控制盒子移动（6）判断鼠标滚动的方向（7）实现全屏滚动（8）事件的传播（9）阻止事件冒泡（10）事件委托1（11）事件委托2（12）判断组合键（13）默认事件（14）返回顶部（15）阻止表单默认提交事件1（16）阻止表单默认
复制链接

扫一扫