Web APIs - 03：节点增删改查和鼠标事件

最新推荐文章于 2024-06-10 21:57:03 发布
最新推荐文章于 2024-06-10 21:57:03 发布
阅读量198 收藏
点赞数
分类专栏： # Web APIS基础 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44666644/article/details/109153663
版权

1.1. 节点操作

1.1.1 删除节点

node.removeChild() 方法从 node节点中删除一个子节点，返回删除的节点。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <button>删除</button>
    <ul>
        <li>熊大</li>
        <li>熊二</li>
        <li>光头强</li>
    </ul>
    <script>
        // 1.获取元素
        var ul = document.querySelector('ul');
        var btn = document.querySelector('button');
        // 2. 删除元素  node.removeChild(child)
        // ul.removeChild(ul.children[0]);
        // 3. 点击按钮依次删除里面的孩子
        btn.onclick = function() {
            if (ul.children.length == 0) {
                // 如果没有子元素，禁用删除按钮
                this.disabled = true;
            } else {
                ul.removeChild(ul.children[0]);
            }
        }
    </script>
</body>

</html>

1.1.2 案例：删除留言

在这里插入图片描述

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body {
      padding: 100px;
    }

    textarea {
      width: 200px;
      height: 100px;
      border: 1px solid pink;
      outline: none;
      resize: none;
    }

    ul {
      margin-top: 50px;
    }

    li {
      width: 300px;
      padding: 5px;
      background-color: rgb(245, 209, 243);
      color: red;
      font-size: 14px;
      margin: 15px 0;
    }

    li a {
      float: right;
    }
  </style>
</head>

<body>
  <textarea name="" id=""></textarea>
  <button>发布</button>
  <ul></ul>
  <script>
    // 1. 获取元素
    var btn = document.querySelector('button');
    var text = document.querySelector('textarea');
    var ul = document.querySelector('ul');
    // 2. 注册事件
    btn.onclick = function () {
      if (text.value == '') {
        alert('您没有输入内容');
        return false;
      } else {
        // (1) 创建元素
        var li = document.createElement('li');
        li.innerHTML = text.value + "<a href='javascript:;'>删除</a>";
        /*
          (2) 添加元素 ul.appendChild(li); 最新发布的内容放在最上面
              清空输入框的值
        */
        ul.insertBefore(li, ul.children[0]);
        text.value = ''
        /*
          (3) 删除元素 删除的是当前链接的li  它的父亲
            1.获取所有的删除链接
            2.为所有的删除链接添加点击事件
        */
        var as = document.querySelectorAll('a');
        for (var i = 0; i < as.length; i++) {
          as[i].onclick = function () {
            /* 删除父元素中的子元素 node.removeChild(child); 
               此时 this 指 删除按钮 a ;
               this.parentNode 指 当前a所在的li
               删除的是ul中的li 指 ul.removeChild(this.parentNode);
            */
            ul.removeChild(this.parentNode);
          }
        }
      }
    }
  </script>
</body>

</html>

1.1.3 复制（克隆）节点

node.cloneNode() 方法返回调用该方法的节点的一个副本。也称为克隆节点/拷贝节点

注意：

  1. 如果括号参数为空或者为false，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点。

    也就是只复制标签，不复制内容。

  2. 如果括号参数为true，则是深度拷贝，会复制节点本身以及里面所有的子节点。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <ul>
        <li>1111</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        var ul = document.querySelector('ul');
        /*
           1. node.cloneNode(); 括号为空或者里面是false 浅拷贝 只复制标签不复制里面的内容
           2. node.cloneNode(true); 括号为true 深拷贝 复制标签复制里面的内容
           ul.appendChild(li); 在数组末尾添加子节点
        */
        var lili = ul.children[0].cloneNode(true);
        ul.appendChild(lili);
    </script>
</body>

</html>

1.1.4 案例：动态生成表格

在这里插入图片描述

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    table {
      width: 500px;
      margin: 100px auto;
      border-collapse: collapse;
      text-align: center;
    }

    td,
    th {
      border: 1px solid #333;
    }

    thead tr {
      height: 40px;
      background-color: #ccc;
    }
  </style>
</head>

<body>
  <table cellspacing="0">
    <thead>
      <tr>
        <th>姓名</th>
        <th>科目</th>
        <th>成绩</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>
  <script>
    // 1.先去准备好学生的数据
    var datas = [{
      name: '魏璎珞',
      subject: 'JavaScript',
      score: 100
    }, {
      name: '弘历',
      subject: 'JavaScript',
      score: 98
    }, {
      name: '傅恒',
      subject: 'JavaScript',
      score: 99
    }, {
      name: '明玉',
      subject: 'JavaScript',
      score: 88
    }, {
      name: '大猪蹄子',
      subject: 'JavaScript',
      score: 0
    }];
    // 2. 往tbody 里面创建行： 有几个人（通过数组的长度）我们就创建几行
    var tbody = document.querySelector('tbody');
    for (var i = 0; i < datas.length; i++) { // 外面的for循环管行 tr
      // 1. 创建 tr行
      var tr = document.createElement('tr');
      tbody.appendChild(tr);
      /*
        2. 行里面创建单元格(跟数据有关系的3个单元格) 
           td 单元格的数量取决于每个对象里面的属性个数  
           for循环遍历对象 datas[i]
      */
      for (var k in datas[i]) { // 里面的for循环管列 td
        // 创建单元格 
        var td = document.createElement('td');
        td.innerHTML = datas[i][k];  // 把对象里面的属性值 datas[i][k] 给 td
        tr.appendChild(td);
      }
      // 3. 创建有删除2个字的单元格 
      var td = document.createElement('td');
      td.innerHTML = '<a href="javascript:;">删除 </a>';
      tr.appendChild(td);

    }
    // 4. 删除操作
    var as = document.querySelectorAll('a');
    for (var i = 0; i < as.length; i++) {
      as[i].onclick = function () {
        // 点击a 删除 当前a 所在的行(链接的爸爸的爸爸)  node.removeChild(child)  
        tbody.removeChild(this.parentNode.parentNode)
      }
    }
        // for(var k in obj) {
        //     k 得到的是属性名
        //     obj[k] 得到是属性值
        // }
  </script>
</body>

</html>

1.1.5 创建元素的三种方式

  • document.write()
  • element.innerHTML
  • document.createElement()

区别：

  1. document.write() 是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘

  2. innerHTML 是将内容写入某个 DOM 节点，不会导致页面全部重绘。

    innerHTML 创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂

  3. createElement() 创建多个元素效率稍低一点点，但是结构更清晰

总结：不同浏览器下，innerHTML 效率要比 createElement高

1.2. DOM的核心总结

文档对象模型：简称DOM，是W3C组织推荐的处理可扩展标记语言的标准编程接口。

W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。

在这里插入图片描述

文档：整个HTML页面

元素：页面中所有的标签都叫做元素

节点：页面中所有的内容都是节点，如：文档节点、元素节点、属性节点、文本节点…

关于dom操作，我们主要针对于元素的操作。主要有创建、增、删、改、查、属性操作、事件操作。

1.2.1. 创建

  1. document.write
  2. innerHTML
  3. createElement

1.2.2. 增加

  1. appendChild
  2. insertBefore

1.2.3. 删

  1. removeChild

1.2.4. 改

主要修改dom的元素属性，dom元素的内容、属性，表单的值等

  1. 修改元素属性：src、href、title等
  2. 修改普通元素内容：innerHTML、innerText
  3. 修改表单元素：value、type、disabled等
  4. 修改元素样式：style、className

1.2.5. 查

主要获取查询dom的元素

  1. DOM提供的API方法：getElementById、getElementByTagName
  2. H5提供的新方法：querySelector、querySelectorAll
  3. 利用节点操作获取元素：
    • 父节点：parentNode
    • 子节点：children
    • 兄弟节点：previousElementSibling、nextElementSibling

1.2.6. 属性操作

主要针对于自定义属性：

  1. setAttribute：设置dom的属性值
  2. getAttribute：得到dom的属性值
  3. removeAttribute：移除属性

1.3. 事件高级

1.3.1. 注册事件（2种方式）

在这里插入图片描述

1.3.2 事件监听

addEventListener() 事件监听

IE9以后支持

eventTarget.addEventListener(type,listener[,useCapture])

eventTarget.addEventListener()方法将指定的监听器注册到 eventTarget（目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数。

在这里插入图片描述

attacheEvent()事件监听

IE678支持，不要在生产环境使用

eventTarget.attachEvent(eventNameWithOn,callback)

eventTarget.attachEvent()方法将指定的监听器注册到 eventTarget（目标对象） 上，当该对象触发指定的事件时，指定的回调函数就会被执行。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <button>传统注册事件</button>
  <button>方法监听注册事件</button>
  <button>ie9 attachEvent</button>
  <script>
    var btns = document.querySelectorAll('button');
    /*
       1. 传统方式注册事件：事件唯一性
          同一个元素同一个事件只能设置一个处理函数，
          最后注册的处理函数将会覆盖前面注册的处理函数
    */
    btns[0].onclick = function () {
      alert('hi');
    }
    btns[0].onclick = function () {
      alert('hao a u');
    }
    /*
      2. 事件侦听注册事件 addEventListener
      (1) 里面的事件类型是字符串 必定加引号 而且不带on
      (2) 同一个元素 同一个事件可以添加多个侦听器（事件处理程序）
    */
    btns[1].addEventListener('click', function () {
      alert(22);
    })
    btns[1].addEventListener('click', function () {
      alert(33);
    })
    /*
      3. attachEvent ie9以前的版本支持
         只适用于IE浏览器（不要在生产环境使用）
    */
    btns[2].attachEvent('onclick', function () {
      alert(11);
    })
  </script>
</body>

</html>
事件监听兼容性解决方案

封装一个函数，函数中判断浏览器的类型：
在这里插入图片描述

1.3.3. 删除事件（解绑事件）

  1. 传统注册方式

    eventTarget.onclick = null;

  2. 方法监听注册方式

    • eventTarget.removeEventListener(type,listener[,useCapture]);
    • eventTarget.detachEvent(eventNameWithOn,callback);
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    div {
      width: 100px;
      height: 100px;
      background-color: pink;
    }
  </style>
</head>

<body>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <script>
    var divs = document.querySelectorAll('div');
    divs[0].onclick = function () {
      alert(11);
      // 1. 传统方式删除事件
      divs[0].onclick = null;
    }
    // 2. removeEventListener 删除事件
    divs[1].addEventListener('click', fn) // 里面的fn 不需要调用加小括号
    function fn() {
      alert(22);
      divs[1].removeEventListener('click', fn);
    }
    // 3. detachEvent
    divs[2].attachEvent('onclick', fn1);
    function fn1() {
      alert(33);
      divs[2].detachEvent('onclick', fn1);
    }
  </script>
</body>

</html>

**删除事件兼容性解决方案 **
在这里插入图片描述

1.3.4. DOM事件流

html中的标签都是相互嵌套的，我们可以将元素想象成一个盒子装一个盒子，document是最外面的大盒子。
当你单击一个div时，同时你也单击了div的父元素，甚至整个页面。

那么是先执行父元素的单击事件，还是先执行div的单击事件 ？？？
在这里插入图片描述

比如：我们给页面中的一个div注册了单击事件，当你单击了div时，也就单击了body，单击了html，单击了document。
在这里插入图片描述
在这里插入图片描述

当时的2大浏览器霸主谁也不服谁！
IE 提出从目标元素开始，然后一层一层向外接收事件并响应，也就是冒泡型事件流。
Netscape（网景公司）提出从最外层开始，然后一层一层向内接收事件并响应，也就是捕获型事件流。

江湖纷争，武林盟主也脑壳疼！！！

最终，w3c 采用折中的方式，平息了战火，制定了统一的标准 —--— 先捕获再冒泡。
现代浏览器都遵循了此标准，所以当事件发生时，会经历3个阶段。

DOM 事件流会经历3个阶段：

  1. 捕获阶段

  2. 当前目标阶段

  3. 冒泡阶段

​ 我们向水里面扔一块石头，首先它会有一个下降的过程，这个过程就可以理解为从最顶层向事件发生的最具体元素（目标点）的捕获过程；之后会产生泡泡，会在最低点（ 最具体元素）之后漂浮到水面上，这个过程相当于事件冒泡。
在这里插入图片描述

]

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .father {
      overflow: hidden;
      width: 300px;
      height: 300px;
      margin: 100px auto;
      background-color: pink;
      text-align: center;
    }

    .son {
      width: 200px;
      height: 200px;
      margin: 50px;
      background-color: purple;
      line-height: 200px;
      color: #fff;
    }
  </style>
</head>

<body>
  <div class="father">
    <div class="son">son盒子</div>
  </div>
  <script>
    /*
      dom 事件流 三个阶段
        1. JS 代码中只能执行捕获或者冒泡其中的一个阶段
        2. onclick 和 attachEvent（ie） 只能得到冒泡阶段
        3. 捕获阶段 如果addEventListener 
           第三个参数是 true 那么则处于捕获阶段  document -> html -> body -> father -> son
        4. 冒泡阶段 如果addEventListener 
           第三个参数是 false 或者 省略 那么则处于冒泡阶段  son -> father ->body -> html -> document
    */

    /*
      捕获阶段：
      点击son：弹出顺序 father -> son -> document
      点击father：弹出顺序 father -> document
      点击document：弹出顺序 document
    */
    // var son = document.querySelector('.son');
    // son.addEventListener('click', function () {
    //   alert('son');
    // }, true);
    // var father = document.querySelector('.father');
    // father.addEventListener('click', function () {
    //   alert('father');
    // }, true);
    // document.addEventListener('click', function () {
    //   alert('document');
    // })

    /*
      冒泡阶段
      点击son：弹出顺序 son -> father -> document
      点击father：弹出顺序 father -> document
      点击document：弹出顺序 document
    */
    var son = document.querySelector('.son');
    son.addEventListener('click', function () {
      alert('son');
    }, false);
    var father = document.querySelector('.father');
    father.addEventListener('click', function () {
      alert('father');
    }, false);
    document.addEventListener('click', function () {
      alert('document');
    })

  </script>
</body>

</html>

1.3.5. 事件对象

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    div {
      width: 100px;
      height: 100px;
      background-color: pink;
    }
  </style>
</head>

<body>
  <div>123</div>
  <script>
    /*
      事件对象：事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象
      1. event 就是一个事件对象 写到我们侦听函数的 小括号里面 当形参来看
      2. 事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数
      3. 事件对象 是 我们事件的一系列相关数据的集合 跟事件相关的 
         比如鼠标点击里面就包含了鼠标的相关信息，鼠标坐标啊，
             如果是键盘事件里面就包含的键盘事件的信息 
         比如 判断用户按下了那个键
      4. 这个事件对象我们可以自己命名 比如 event 、 evt、 e
      5. 事件对象也有兼容性问题 ie678 通过 window.event 兼容性的写法  e = e || window.event;
         只要“||”前面为false, 不管“||”后面是true 还是 false，都返回 “||” 后面的值
         只要“||”前面为true, 不管“||”后面是true 还是 false，都返回 “||” 前面的值
    */
    // 
    var div = document.querySelector('div');
    // 传统方式的点击事件
    div.onclick = function (e) {
      console.log(e);
    };
    // 监听事件
    div.addEventListener('click', function (e) {
      console.log(e);
    });
    
  </script>
</body>

</html>
事件对象的属性和方法

在这里插入图片描述

e.target 和 this 的区别

  • this 是事件绑定的元素（绑定这个事件处理函数的元素） 。

  • e.target 是事件触发的元素。

常情况下terget 和 this是一致的，
但有一种情况不同，那就是在事件冒泡时（父子元素有相同事件，单击子元素，父元素的事件处理函数也会被触发执行），
这时候this指向的是父元素，因为它是绑定事件的元素对象，
而target指向的是子元素，因为他是触发事件的那个具体元素对象。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    div {
      width: 100px;
      height: 100px;
      background-color: pink;
    }
  </style>
</head>

<body>
  <div>123</div>
  <ul>
    <li>abc</li>
    <li>abc</li>
    <li>abc</li>
  </ul>
  <script>
    /*
      常见事件对象的属性和方法
       1. e.target 返回的是触发事件的对象（元素）  
          this 返回的是绑定事件的对象（元素）
      区别
       e.target 点击了那个元素，就返回那个元素 
       this     那个元素绑定了这个点击事件，那么就返回谁
    */
    var div = document.querySelector('div');
    div.addEventListener('click', function (e) {
      console.log(e.target);
      console.log(this);
    })
    var ul = document.querySelector('ul');
    ul.addEventListener('click', function (e) {

      console.log('this', this);  // 我们给ul 绑定了事件，那么this 就指向ul
      console.log('currentTarget', e.currentTarget); // 打印结果：指向ul

      // e.target 指向我们点击的那个对象 谁触发了这个事件 我们点击的是li e.target 指向的就是li
      console.log(e.target);
    })
  </script>
</body>

</html>

1.3.6 阻止默认行为

html中一些标签有默认行为，例如a标签被单击后，默认会进行页面跳转。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div>123</div>
  <a href="http://www.baidu.com">百度</a>
  <form action="http://www.baidu.com">
    <input type="submit" value="提交" name="sub">
  </form>
  <script>
    // 常见事件对象的属性和方法
    // 1. 返回事件类型
    var div = document.querySelector('div');
    div.addEventListener('click', fn);
    div.addEventListener('mouseover', fn);
    div.addEventListener('mouseout', fn);

    function fn(e) {
      console.log(e.type); // 如：click、mouseover、mouseout
    };
    // 2. 阻止默认行为（事件） 让链接不跳转 或者让提交按钮不提交
    var a = document.querySelector('a');
    a.addEventListener('click', function (e) {
      e.preventDefault(); //  dom 标准写法
    });
    // 3. 传统的注册方式（IE浏览器）
    a.onclick = function (e) {
      // 普通浏览器 e.preventDefault();  方法
      // e.preventDefault();
      // 低版本浏览器 ie678  returnValue  属性
      // e.returnValue;
      // 我们可以利用return false 也能阻止默认行为 没有兼容性问题 特点： return 后面的代码不执行了， 而且只限于传统的注册方式
      return false;
      alert(11);
    };
  </script>
</body>

</html>

1.3.7 阻止事件冒泡

事件冒泡本身的特性，会带来的坏处，也会带来的好处。

  • 标准写法：利用事件对象里面的 stopPropagation() 方法

    e.stopPropagation()

  • 非标准写法：IE 6-8 利用事件对象 cancelBubble 属性

    e.cancelBubble = true;

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .father {
      overflow: hidden;
      width: 300px;
      height: 300px;
      margin: 100px auto;
      background-color: pink;
      text-align: center;
    }

    .son {
      width: 200px;
      height: 200px;
      margin: 50px;
      background-color: purple;
      line-height: 200px;
      color: #fff;
    }
  </style>
</head>

<body>
  <div class="father">
    <div class="son">son儿子</div>
  </div>
  <script>
    /*
      常见事件对象的属性和方法
      阻止冒泡的方法：
        dom 推荐的标准 e.stopPropagation(); // stop 停止  Propagation 传播
        e.cancelBubble = true; // 非标准 cancel 取消 bubble 泡泡
    */
    var son = document.querySelector('.son');
    son.addEventListener('click', function (e) {
      alert('son');
      e.stopPropagation();
      e.cancelBubble = true;
    }, false);

    var father = document.querySelector('.father');
    father.addEventListener('click', function () {
      alert('father');
    }, false);
    document.addEventListener('click', function () {
      alert('document');
    })
  </script>
</body>

</html>

阻止事件冒泡的兼容性处理
在这里插入图片描述

1.3.8 事件委托

事件冒泡本身的特性，会带来的坏处，也会带来的好处。

什么是事件委托
把事情委托给别人，代为处理。

事件委托也称为事件代理，在 jQuery 里面称为事件委派。

说白了就是，不给子元素注册事件，给父元素注册事件，把处理代码在父元素的事件中执行。

生活中的代理：
在这里插入图片描述

事件委托的原理

​ 给父元素注册事件，利用事件冒泡，当子元素的事件触发，会冒泡到父元素，然后去控制相应的子元素。

事件委托的作用

  • 我们只操作了一次 DOM ，提高了程序的性能。

  • 动态新创建的子元素，也拥有事件。

    <ul>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
    </ul>
    <script>
        // 事件委托的核心原理：给父节点添加侦听器， 利用事件冒泡影响每一个子节点
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function(e) {
            // e.target 这个可以得到我们点击的对象
            e.target.style.backgroundColor = 'pink';
        })
    </script>

1.4. 常用鼠标事件

在这里插入图片描述

1.4.1 案例：禁止选中文字和禁止右键菜单

  1. 禁止鼠标右键菜单

    contextmenu 主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单

    document.addEventListener('contextmenu', function (e) {
	e.preventDefault();
})

  2. 禁止鼠标选中（selectstart 开始选中）

    document.addEventListener('selectstart', function (e) {
	e.preventDefault();
})

<body>
    我是一段不愿意分享的文字
    <script>
        // 1. contextmenu 我们可以禁用右键菜单
        document.addEventListener('contextmenu', function(e) {
                e.preventDefault();
        })
        // 2. 禁止选中文字 selectstart
        document.addEventListener('selectstart', function(e) {
            e.preventDefault();
        })
    </script>
</body>

1.4.2 鼠标事件对象

在这里插入图片描述

1.4.3 获取鼠标在页面的坐标

 <script>
    // 鼠标事件对象 MouseEvent
    document.addEventListener('click', function (e) {
      /*
        1. client 鼠标在可视区的x和y坐标
        不管页面是否滚动，是否有滚动条
        浏览器可视区可以人为的放大和缩小
      */
      console.log(e.clientX);
      console.log(e.clientY);
      console.log('---------------------');

      /*
        2. page 鼠标在页面文档的x和y坐标【重点】
           受页面滚动影响，得到的是坐标距离页面文档的上面和左边距离
      */
      console.log(e.pageX);
      console.log(e.pageY);
      console.log('---------------------');

      // 3. screen 鼠标在电脑屏幕的x和y坐标
      console.log(e.screenX);
      console.log(e.screenY);

    })
  </script>

1.4.4 案例：跟随鼠标的天使

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    img {
      position: absolute;
      top: 2px;
    }
  </style>
</head>

<body>
  <img src="images/angel.gif" alt="">
  <script>
    var pic = document.querySelector('img');
    document.addEventListener('mousemove', function (e) {
      // 1. mousemove只要我们鼠标移动1px 就会触发这个事件
      // console.log(1);
      // 2.核心原理： 每次鼠标移动，我们都会获得最新的鼠标坐标， 把这个x和y坐标做为图片的top和left 值就可以移动图片
      var x = e.pageX;
      var y = e.pageY;
      console.log('x坐标是' + x, 'y坐标是' + y);
      //3 . 千万不要忘记给left 和top 添加px 单位
      pic.style.left = x - 50 + 'px';
      pic.style.top = y - 40 + 'px';
    });
  </script>
</body>

</html>
落花流雨
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
JS模拟鼠标点击事件详解 MouseEvent
czw15913934496的博客
01-11 3958
然后，创建一个新的MouseEvent对象，通过它模拟一个click事件，并将它分派给clickMe元素。无论您是想模拟单击事件、移动事件、弹出框事件还是其他事件，都可以使用JS的MouseEvent对象轻松实现。在上面的示例中，我们只是模拟了鼠标点击事件，而没有模拟松开鼠标的事件。除了模拟单击事件外，JS还可以模拟鼠标的移动事件。在上面的示例中，我们首先分发mousedown事件，然后立即分发onmouseup事件，以模拟鼠标点击并松开的行为。在JS中，还可以模拟其他类型的鼠标事件，如右击和双击事件。
MouseEvent的click事件的currentTarget和target属性的区别
奇点
10-30 2048
var button:Button = event.currentTarget as Button; currentTarget是当前正在使用某个事件侦听器处理Event对象的对象。target是指针设备下的InteractiveObject实例。target不一定是显示列表中注册此事件侦听器的对象。 应使用currentTarget属性来访问显示列表中当前正在处理此事件的对象。备注：Inter
【JavaScript 教程】事件——鼠标事件
油墨香^-^的博客
06-08 5794
作者 | 阮一峰 鼠标事件的种类 鼠标事件指与鼠标相关的事件，继承了MouseEvent接口。具体的事件主要有以下一些。 click：按下鼠标（通常是按下主按钮）时触发。 dblclick：在同一个元素上双击鼠标时触发。 mousedown：按下鼠标键时触发。 mouseup：释放按下的鼠标键时触发。 mousemove：当鼠标在一个节点内部移动时触发。当鼠标持续移动时，该事件会连续触发。为了避免性能问题，建议对该事件的监听函数做一些限定，比如限定一段时
Flex中自定义事件2
zhangzuanqian
04-28 138
copy from :http://www.blogjava.net/kissjava/archive/2008/08/26/224539.html   关于flex事件的讲解 一．引 很多新人对Flex的事件机制都不太熟悉，在使用过程中难免会出现各种问题，这是一个非常普遍的问题，为了更快更好的帮助大家，将介绍一下Flex中事件的各种机制和用法。 Flex的精髓之一就是事件和绑定机制，了...
MouseEvent值得一提的几点
小黑的成长记录
03-05 649
一、单击和双击：CLICK：要使单击事件发生，它必须始终在以下顺序的一系列事件后面：mouseDown事件，然后是mouseUp事件。这两个事件的目标对象必须相同，否则不会发生click事件。mouseDown或mouseUp事件之间的任何时间会发生任何数量的其它鼠标事件，比如MOVE，click事件仍会发生。双击：首先要把InteractiveObject.doubleClickEnabled=...
Web-APIs-Quiz:定时多项选择测验
05-23
工具职能对于循环数组事件监听器If和If / Else语句快讯本地存储引导CDN jQuery CDN特征干净且响应Swift的用户界面。 动态更新HTML和CSS。 一个计时器，它为每个错误答案将时间缩短10秒。 计时器达到0时结束测验的...
webapis-playground:Web APIs Playground 是一个通过示例和演示来展示 JavaScript Web APIs 的项目。 客户端 JavaScript API 可帮助为许多低级任务提供包装函数
07-24
Web APIs Playground是一个通过示例和演示来展示 JavaScript Web APIs 的项目。 客户端 JavaScript API 为许多低级任务提供包装函数，例如， 设备硬件交互 客户端存储交互 3D 图形，WebGL 通知 音频视频 还有很多...
apis-resource:为节点API库添加资源帮助器
05-21
apis资源为库添加资源助手资源资源 res . resource = 'user' ,res . get = function ( auth , data , cb ) { } ;res . create = function ( auth , data , cb ) { } ;请求或回应 request = { get : function ( ) { ...
Chapter04-WebAPIs-CodingQuiz:这是我编写的简短问答游戏，旨在通过Web API增强我的技能
03-06
Chapter04-WebAPIs-CodingQuiz 目录 描述 该项目是一款游戏，可向用户询问基本JavaScript概念。 游戏开始时，它将显示5个问题，每个问题一次显示一个。 用户必须在60秒内完成测验。 如果用户选择了错误的答案，将从...
html5-apis:HTML5 Web API
05-22
HTML5 Web API 您可能不知道的有关HTML5 Web API的示例！例子参考Web组件
常用事件方法及技巧(二) -- MouseEvent(鼠标事件)
weixin_34191845的博客
08-12 756
先说明一下，我并不会把所有的内容都写出来，只列我认为有必要讲解一下的内容。如果要了解全部内容，请参看Flash自带的帮助文件。该系列文章都是按照这个思路写的。 先说一个本人觉得很实用的通用方法：toString()。基本上所有的事件都带有这个方法，不肯定的时候就trace(event.toString())看一下，会发现内容比帮助文档还要全。囧一个。...
mouse_event的鼠标点击事件 和 使用PostMessage或者SendMessage发送的鼠标点击事件有何区别
hdy_ylmb的博客
10-06 6791
最近在项目中遇到一个有意思的现象，增加了自己对这几个函数调用的理解。大致描述场景如下。A程序的主窗口下有个控件，我要在B程序中模拟鼠标点击该控件。 在B程序中，首先使用的是给控件发鼠标点击事件，大致代码如下,其中hwnd就是该控件的句柄。这种做法也很明确可以实现点击该控件的效果。 PostMessage(hwnd, WM_LBUTTONDOWN, NULL, MAKELONG(5, 5)); ...
鼠标事件-MouseEvent
weixin_34148456的博客
08-17 1263
当鼠标进行某种操作时，就会生成一个event对象，该对象记录着鼠标触发事件时的所有属性。 可以通过如下方法在google控制台打印出 MouseEvent 对象。 function mouseDown(e){ var e = e||event; console.log(e)}window.onload = function (){ document.getE...
(Ten)Mouse-Event 鼠标事件
Within的博客
06-21 1164
上一节我们给我们的项目添加了键盘侦听事件，这一节我们来添加鼠标响应事件。我们新建一个类AlgoMouseListener来继承MouseAdapter来处理鼠标相关的事件，这背后的机制和我们上一节中的KeyAdapter是完全一样的。我们稍微看一下，相对比键盘事件复杂一点。下面来实现我们的方法。具体绘制完整代码import java.awt.*; import java.awt.event.Key...
《前端》MouseEvent （事件）
BelleDiao的博客
05-12 2587
MouseEvent接口指用户与指针设备( 如鼠标 )交互时发生的事件。使用此接口的常见事件包括：click，dblclick，mouseup，mousedown。 MouseEvent()--生成一个新的MouseEvent对象。 -------------------------------------------------------------------- 鼠标事件 - Web API 接口参考 | MDN https://developer.mozilla.o...
事件监听机制——鼠标事件MouseEvent
weixin_30780221的博客
01-20 492
鼠标事件 鼠标事件包括鼠标的双击、左击、右击、中间键等等，本文进行事件加载进行简单介绍，具体可以参考键盘事件。 import java.awt.*; import java.awt.event.*; //按钮活动事件与按钮活动事件的区别？优先选择addActionListener class MouseAndKeyEvent { //定义该图形所带的组建的引用 priva...
java鼠标点击事件_JavaSE 鼠标事件类（MouseEvent）实现
weixin_35827472的博客
02-12 4182
{相关信息}鼠标事件类(MouseEvent)指组件中发生的鼠标动作事件,例如按下鼠标、释放鼠标、单击鼠标、鼠标光标进入或离开组件的几何图形、移动鼠标、拖动鼠标。当鼠标移动到某个区域或鼠标单击某个组件时就会触发鼠标事件。使用鼠标事件必须给组件添加一个MouseListener接口的事件处理器,该接口包含以下 5 个方法：void mouseClicked(MouseEvent e):当鼠标在该区域...
JS中一个dom元素能绑定多少事件
最新发布
ggq53219的博客
06-10 533
在JavaScript中，一个DOM元素可以绑定的事件数量并没有明确的限制，这主要取决于浏览器的实现和内存限制。然而，在实际应用中，为同一个DOM元素绑定过多的事件监听器可能会导致性能问题，尤其是在事件处理函数执行复杂操作的情况下。总之，虽然JavaScript中DOM元素可以绑定的事件数量没有明确的限制，但在实际应用中应注意避免过度绑定和优化事件处理函数，以确保良好的性能和用户体验。
[Vue-常见错误]浏览器显示Uncaught runtime errors
一个喜欢什么都研究一下的小小后端程序员
06-09 374
在vue.config.js中配置关闭Uncaught runtime errors显示。
php ajax实现增删改查,###实现ajax的增删改查案例（jquery)
08-03
这些代码将创建一个简单的Web应用程序，用户可以使用它来执行基本的增删改查操作，而无需刷新页面。当用户执行任何操作时，都会使用AJAX通过PHP与MySQL数据库进行通信。 ### 回答2： PHP AJAX 实现增删改查是一种...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

落花流雨

你的鼓励将是我创作的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值