DOM事件

最新推荐文章于 2024-11-11 09:45:18 发布

bubbleJessica

最新推荐文章于 2024-11-11 09:45:18 发布

阅读量888

点赞数

分类专栏： js 文章标签：前端 javascript html5

本文链接：https://blog.csdn.net/bubbleJessica/article/details/128484067

版权

js 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

鼠标事件监听

键盘事件监听

表单事件监听

常见的页面事件监听

事件传播

事件传播顺序：从内到外（冒泡阶段）onxxx这样写法只能监听冒泡阶段

addEventListener()方法第三个参数如果为true监听捕获阶段，false监听冒泡阶段(默认)

最内层盒子跟书写顺序有关（谁写前面谁就先执行），外面的盒子跟书写顺序无关（结果都是先捕获后冒泡）

事件对象e/event

使用e.offset属性注意点：内部不能再有比它小的元素，否则位置属性会以小元素左上角为原点

keyCode特殊记忆

e.preventDefault()方法：阻止事件的默认动作

案例：制作一个文本框，只能让用户在其中输入小写字母和数字，其他字符输入没有效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <p>
    <input type="text" id="field">
  </p>
<script>
  var oField=document.getElementById('field');
  oField.onkeypress=function (e){
    //根据用户输入的字符的字符码（e.charCode)
    //数字0~9，字符码48~57
    //小写字母a~z，字符码97~122
    if (!(e.charCode>=48&&e.charCode<=57||e.charCode>=97&&e.charCode<=122)){
      e.preventDefault();
    }
  }
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box {
            width: 200px;
            height: 200px;
            background-color: #333;
        }
        body{
            height: 2000px;
        }
    </style>
</head>
<body>
<div id="box"></div>
<h1 id="info">0</h1>

<script>
    var oBox = document.getElementById('box');
    var oInfo = document.getElementById('info');

    // 全局变量就是info中显示的数字
    var a = 0;

    // 给box盒子添加鼠标滚轮事件监听
    oBox.onmousewheel = function (e) {
        // 阻止默认事件：就是说当用户在盒子里面滚动鼠标滚轮的时候，此时不会引发页面的滚动条的滚动
        e.preventDefault();

        if (e.deltaY > 0) {
            a++;
        } else {
            a--;
        }
        oInfo.innerText = a;
    }
</script>
</body>
</html>

e.stopPropagation()阻止事件传播

案例：制作一个弹出层：点击按钮显示弹出层，点击网页任意地方，弹出层关闭

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    #box{
      width: 200px;
      height: 140px;
      background-color: #333;
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -100px;
      margin-top: -70px;
      display: none;
    }
  </style>
</head>
<body>
  <button id="btn">点我按钮</button>
  <div id="box"></div>
  <script>
    var oBtn=document.getElementById('btn');
    var oBox=document.getElementById('box');
    // 点击按钮盒子显示
    oBtn.onclick=function (e){
      // 阻止事件继续传播到document身上
      e.stopPropagation();
      oBox.style.display='block';
    }
    // 点击页面任何部分时，盒子关闭
    document.onclick=function (){
      oBox.style.display='none';
    }
    // 点击盒子内部时，不能关闭盒子，应该阻止事件
    oBox.onclick=function (e){
      e.stopPropagation();
    }
  </script>
</body>
</html>

事件委托

批量添加事件监听

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件委托</title>
</head>
<body>
  <ul id="list">
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
  </ul>
  <script>
    var oList=document.getElementById('list');
    var lis=oList.getElementsByTagName('li');
    //alert(lis.length);
    //批量给元素添加监听
    for(var i=0;i<lis.length;i++){
      lis[i].onclick=function (){
        this.style.color='red';
      }
    }
  </script>
</body>
</html>

每一个事件监听注册都会消耗一定的系统内存，而批量添加事件会导致监听数量太多，内存消耗非常大，实际上，每个<li>事件处理函数都是不同的函数，这些函数本身也会占用内存

新增元素动态绑定事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件委托</title>
</head>
<body>
<button id="btn">按我添加新的列表项</button>
  <ul id="list"></ul>
  <script>
    var oList=document.getElementById('list');
    var oBtn=document.getElementById('btn');
    //按钮的点击事件
    oBtn.onclick=function (){
      // 创建一个新的li列表项，孤儿节点
      var oLi=document.createElement('li');
      oLi.innerHTML='我是列表项';
      // 上树
      oList.appendChild(oLi);
      // 给新创建的这个li节点添加onclick事件监听
      oLi.onclick=function (){
        this.style.color='red';
      }
    }
  </script>
</body>
</html>

事件委托详解

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件委托2</title>
</head>
<body>
  <ul id="list">
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
  </ul>
<script>
  var oList=document.getElementById('list');
  oList.onclick=function (e){
    //e.target表示用户真正点击的那个元素
    //e.target.style.color='red';
    //e.currentTarget表示事件处理程序附加到的元素，当前指的是oList
    e.currentTarget.style.backgroundColor='red';
  }
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件委托2</title>
</head>
<body>
<button id="btn">按我创建一个新列表项</button>
<ul id="list">
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ul>
<script>
    var oList = document.getElementById('list');
    var oBtn = document.getElementById('btn');
    oList.onclick = function (e) {
        //e.target表示用户真正点击的那个元素
        e.target.style.color = 'red';
        //e.currentTarget表示事件处理程序附加到的元素，当前指的是oList
        //e.currentTarget.style.backgroundColor='red';
    }

    oBtn.onclick = function () {
        //创建孤儿节点
        var oLi = document.createElement('li');
        //添加内容
        oLi.innerText = '我是新来的';
        //上树
        oList.appendChild(oLi);
    }
</script>
</body>
</html>

onmouseenter：这个属性天生不冒泡的。相当于你事件处理函数附加给了哪个DOM节点，就是哪个DOM节点自己触发的事件，没有冒泡过程。类似于e.currentTarget属性

onmouseover：这个属性天生是冒泡的。类似于e.target属性

使用事件委托时要注意：不能委托不冒泡的事件给祖先元素

使用事件委托时需要注意的事项

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件委托2</title>
</head>
<body>
<button id="btn">按我创建一个新列表项</button>
<ul id="list">
    <li><span>我是</span>列表项</li>
    <li><span>我是</span>列表项</li>
    <li><span>我是</span>列表项</li>
</ul>
<script>
    var oList = document.getElementById('list');
    var oBtn = document.getElementById('btn');
    oList.onclick = function (e) {
        //e.target表示用户真正点击的那个元素
        e.target.style.color = 'red';
        //e.currentTarget表示事件处理程序附加到的元素，当前指的是oList
        //e.currentTarget.style.backgroundColor='red';
    }

    oBtn.onclick = function () {
        //创建孤儿节点
        var oLi = document.createElement('li');
        //添加内容
        oLi.innerText = '我是新来的';
        //上树
        oList.appendChild(oLi);
    }
</script>
</body>
</html>