JavaScript之事件第九天

最新推荐文章于 2024-06-23 12:45:17 发布

m0_74242675

最新推荐文章于 2024-06-23 12:45:17 发布

阅读量646

点赞数 27

文章标签： javascript 前端 microsoft

本文链接：https://blog.csdn.net/m0_74242675/article/details/136071567

版权

JavaScript中的事件是指用户在网页中进行交互时触发的动作或者系统生成的通知。JavaScript可以通过事件来响应用户的操作，并执行相应的处理函数。常见的JavaScript事件包括：

点击事件（click）：当用户单击某个元素时触发。
鼠标移动事件（mousemove）：当鼠标在某个元素上移动时触发。
键盘按下事件（keydown）：当用户按下键盘上的某个键时触发。
表单提交事件（submit）：当用户提交表单时触发。
页面加载事件（load）：当网页完全加载并显示给用户时触发。
页面滚动事件（scroll）：当用户滚动页面时触发。
鼠标悬停事件（mouseover）：当鼠标悬停在某个元素上时触发。
输入框获得焦点事件（focus）：当输入框获取焦点时触发。
输入框失去焦点事件（blur）：当输入框失去焦点时触发。
时间计时器事件（setInterval）：在指定的时间间隔内周期性地执行某个函数。

通过JavaScript的事件机制，开发者可以为网页添加各种交互功能，响应用户的操作并进行相应的处理。

1-初识事件

在JavaScript中，事件是用户或浏览器触发的特定动作，例如点击按钮、滚动页面或加载文档。以下是一个简单的HTML和JavaScript代码示例，展示了如何使用事件监听器处理“点击”事件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初识事件 - 点击事件示例</title>
</head>
<body>

<button id="myButton">点击我</button>

<script>
// 获取HTML元素
var myButton = document.getElementById("myButton");

// 为按钮添加点击事件监听器
myButton.addEventListener("click", function() {
    // 当按钮被点击时，执行这个函数
    alert("你已点击按钮！");
});

// 或者使用箭头函数简写形式
// myButton.addEventListener("click", () => alert("你已点击按钮！"));

</script>

</body>
</html>

在这个例子中：

我们首先通过 document.getElementById 获取了ID为 “myButton” 的HTML按钮元素。
然后使用 addEventListener 方法给这个按钮元素添加了一个事件监听器，监听的是 “click” 事件（即鼠标点击事件）。
当用户点击该按钮时，与之关联的回调函数会被调用，弹出一个警告框显示 “你已点击按钮！”。

这就是JavaScript中事件的基本用法，实际应用中事件可以用于各种用户交互行为的响应处理，比如表单验证、滑动图片轮播、键盘输入监听等。

2-事件解绑

在JavaScript中，我们可以通过addEventListener方法为元素添加事件监听器，而通过removeEventListener方法可以移除（解绑）已添加的事件监听器。以下是一个简单的例子：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<button id="myButton">点击我</button>

<script>
  // 获取按钮元素
  var button = document.getElementById("myButton");

  // 定义点击事件的处理函数
  function handleClick() {
    console.log("按钮被点击了！");
  }

  // 给按钮添加点击事件监听器
  button.addEventListener("click", handleClick);

  // 在某个条件满足时，例如用户点击了另一个按钮来禁用这个功能
  function disableButtonClick() {
    // 解绑之前添加的点击事件监听器
    button.removeEventListener("click", handleClick);
    
    console.log("已移除点击事件监听器");
  }

  // 假设有一个“禁用”按钮
  var disableButton = document.getElementById("disableButton");
  if (disableButton) {
    disableButton.addEventListener("click", disableButtonClick);
  }
</script>

</body>
</html>

在这个例子中，我们首先给id为"myButton"的按钮添加了一个点击事件监听器。当用户点击该按钮时，会执行handleClick函数并在控制台打印一条消息。

然后，我们定义了一个新的函数disableButtonClick，当这个函数被调用时，它会使用removeEventListener方法将之前添加到"myButton"上的点击事件监听器解绑。这样，当再次点击"myButton"时，就不会触发handleClick函数了。这里假设存在一个id为"disableButton"的按钮，用于触发disableButtonClick函数以解除"myButton"的点击事件绑定。

3-事件类型

事件类型在JavaScript中用于描述用户交互、浏览器行为或DOM内容变化等不同场景下的动作。以下是一些常见的JavaScript事件类型的例子以及其使用方式：

点击事件 (click)

document.getElementById('myButton').addEventListener('click', function(event) {
    alert('按钮被点击了！');
});

这段代码会在用户点击ID为"myButton"的HTML元素时触发一个警告框显示消息。

键盘事件 (keydown)

document.addEventListener('keydown', function(event) {
    if (event.key === 'Enter') {
        console.log('回车键被按下');
    }
});

这个监听器会检测用户何时按下键盘上的回车键，并在控制台输出消息。

窗口加载完成事件 (load)
```
window.addEventListener('load', function() {
    console.log('页面已经完全加载完毕');
});
```
当整个文档（包括所有资源如图片、脚本等）都加载完成后，这个函数会被调用。

鼠标悬停事件 (mouseover)

var myElement = document.getElementById('myDiv');
myElement.addEventListener('mouseover', function(event) {
    event.target.style.backgroundColor = 'red';
});

当鼠标指针移至ID为"myDiv"的元素上方时，该元素的背景色将变为红色。

表单提交事件 (submit)

var myForm = document.getElementById('myForm');
myForm.addEventListener('submit', function(event) {
    event.preventDefault(); // 阻止默认的表单提交行为
    console.log('表单已提交');
    // 可以在这里添加处理提交逻辑的代码
});

当表单被提交时，此监听器会阻止表单默认的提交行为，并在控制台输出一条消息。

滚动事件 (scroll)

window.addEventListener('scroll', function() {
    let scrollY = window.scrollY;
    console.log('当前滚动位置：', scrollY);
});

当用户滚动页面时，这个监听器会记录并打印出当前页面的垂直滚动位置。

以上是JavaScript中部分常见事件类型的示例。

4-事件对象

在JavaScript中，事件对象（Event object）是一个包含与特定事件相关详细信息的对象，它会在事件处理函数中作为参数自动传递。下面通过一个点击事件的例子来展示事件对象的使用：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<button id="myButton">点击我</button>

<script>
  // 获取按钮元素
  var button = document.getElementById("myButton");

  // 定义点击事件的处理函数
  function handleClick(event) {
    // "event"就是事件对象
    console.log("触发事件的目标元素是:", event.target.id); // 输出被点击元素的id
    console.log("鼠标点击的位置：", event.clientX, ", ", event.clientY); // 输出鼠标点击时的坐标

    // 阻止事件冒泡（默认行为）
    event.stopPropagation();

    // 阻止元素的默认行为（例如，对于提交按钮阻止表单提交）
    event.preventDefault();
  }

  // 给按钮添加点击事件监听器，并将事件对象传入处理函数
  button.addEventListener("click", handleClick);
</script>

</body>
</html>

在这个例子中，当用户点击id为"myButton"的按钮时，handleClick函数会被调用。该函数接收一个名为event的参数，这个参数就是一个事件对象，包含了关于这次点击事件的各种信息。

我们可以通过event.target获取到触发事件的实际DOM元素（在这个例子中是按钮本身），并通过event.clientX和event.clientY获取到鼠标的点击位置（相对于视口）。

此外，我们还可以通过事件对象调用stopPropagation()方法来阻止事件向上冒泡至父级元素，以及通过preventDefault()方法来阻止元素的默认行为。

5-事件对象-鼠标事件

在JavaScript中，当处理鼠标事件时，会有一个与该事件相关的事件对象（event object）作为回调函数的参数。这个事件对象包含了关于鼠标事件的各种详细信息，例如触发事件时鼠标的坐标、按键状态等。

下面是一个使用addEventListener方法为一个div元素绑定mousemove鼠标移动事件的例子，并在事件处理函数中访问事件对象中的属性：

// 获取页面上的某个div元素
var myDiv = document.getElementById('myDiv');

// 为该div添加mousemove事件监听器
myDiv.addEventListener('mousemove', function(event) {
  // event对象在这里可以被访问到
  // event.clientX 和 event.clientY 表示鼠标指针相对于浏览器视口左侧和顶部的距离
  var x = event.clientX;
  var y = event.clientY;

  // 输出当前鼠标位置
  console.log('鼠标当前位置：X=' + x + ', Y=' + y);

  // 可以访问其他鼠标事件相关属性，如按键状态
  if (event.buttons === 1) {
    console.log('左键按下');
  }

  // 阻止默认行为，比如选中文本等
  event.preventDefault();

  // 或者进行其他操作...
});

// 如果使用箭头函数语法：
myDiv.addEventListener('mousemove', (event) => {
  console.log('鼠标当前位置：X=' + event.clientX + ', Y=' + event.clientY);
});

在这个例子中，每当鼠标在id为’myDiv’的元素上移动时，都会触发事件处理函数，函数内部通过event.clientX和event.clientY获取并输出鼠标实时坐标。此外，还演示了如何检查鼠标按键的状态以及阻止事件的默认行为。

6-案例-鼠标跟随

JavaScript实现鼠标跟随效果的案例，通常指的是当用户在页面上移动鼠标时，某个元素（比如一个图标、文字或者其他图形）会动态地跟随鼠标的移动而移动。以下是一个简单的原生JavaScript实现鼠标跟随效果的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        #follower {
            position: absolute;
            width: 50px;
            height: 50px;
            background-color: red;
            border-radius: 50%;
            cursor: none;
        }
    </style>
</head>
<body>
    <div id="follower"></div>

    <script>
        // 获取需要跟随鼠标移动的元素
        var follower = document.getElementById('follower');

        // 添加鼠标移动事件监听器
        document.addEventListener('mousemove', function(event) {
            // 获取鼠标在当前视口中的位置
            var x = event.clientX;
            var y = event.clientY;

            // 设置跟随元素的位置
            follower.style.left = (x + 10) + 'px'; // 加10像素以保持一定的距离
            follower.style.top = (y + 10) + 'px';
        });
    </script>
</body>
</html>

在这个例子中，我们创建了一个绝对定位的红色圆形元素，并通过监听mousemove事件获取鼠标在页面上的坐标。然后，根据鼠标的坐标实时更新该元素的left和top样式属性，使其始终位于鼠标附近（这里设置了10像素的偏移量）。这样就实现了基本的鼠标跟随效果。

7-案例-鼠标拖拽

下面是一个使用JavaScript实现鼠标拖拽元素的简单例子：

// 获取需要拖动的元素
var draggableElement = document.getElementById('draggable');

// 初始化鼠标按下时的位置和元素初始位置
let startX, startY;
let initialX, initialY;

// 为元素添加mousedown事件监听器，开始拖动操作
draggableElement.addEventListener('mousedown', function(event) {
  // 阻止文本选中等默认行为
  event.preventDefault();

  // 记录鼠标按下时的位置（相对于视口）
  startX = event.clientX;
  startY = event.clientY;

  // 记录元素初始位置（相对于文档）
  initialX = parseInt(draggableElement.style.left) || 0;
  initialY = parseInt(draggableElement.style.top) || 0;

  // 添加mousemove和mouseup事件监听器到document上，以便在拖动过程中持续更新元素位置，并在松开鼠标后移除这些监听器
  document.addEventListener('mousemove', mouseMove);
  document.addEventListener('mouseup', mouseUp);
});

function mouseMove(event) {
  // 更新元素位置，计算出新的left和top值
  let newX = initialX + (event.clientX - startX);
  let newY = initialY + (event.clientY - startY);

  // 设置元素的新位置
  draggableElement.style.left = newX + 'px';
  draggableElement.style.top = newY + 'px';
}

function mouseUp() {
  // 移除mousemove和mouseup事件监听器
  document.removeEventListener('mousemove', mouseMove);
  document.removeEventListener('mouseup', mouseUp);
}

在这个例子中，当用户按下鼠标左键并开始在draggable元素上移动时，会触发mousedown事件。该事件处理程序记录下鼠标按下的起始位置以及元素的原始位置。然后，在鼠标移动过程中通过mousemove事件实时更新元素的位置。最后，当鼠标按键释放时，通过mouseup事件移除与拖拽相关的事件监听器，结束拖拽过程。注意这个示例假设元素已具有position: absolute;或position: relative;样式属性，以便可以更改其left和top CSS属性。

8-DOM事件流

DOM事件流描述的是一个事件在DOM元素之间传播的顺序。当用户在一个DOM元素上触发一个事件（如点击按钮）时，该事件会按照特定的顺序经过三个阶段：捕获阶段、目标阶段和冒泡阶段。

以下是一个简单的例子来说明DOM事件流：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>DOM事件流示例</title>
  <style>
    #outer {
      background-color: lightblue;
      padding: 20px;
    }
    #middle {
      background-color: yellow;
      padding: 10px;
    }
    #inner {
      background-color: pink;
      padding: 5px;
    }
  </style>
</head>
<body>

  <div id="outer" onclick="handleOuterClick(event)">
    外层容器
    <div id="middle" onclick="handleMiddleClick(event)">
      中间容器
      <div id="inner" onclick="handleInnerClick(event)">
        内部按钮
      </div>
    </div>
  </div>

  <script>
    function handleOuterClick(event) {
      console.log('捕获/冒泡阶段：外层容器被点击');
    }

    function handleMiddleClick(event) {
      console.log('捕获/冒泡阶段：中间容器被点击');
      
      // 阻止事件继续冒泡到外层
      if (event.stopPropagation) {
        event.stopPropagation();
      } else {
        event.cancelBubble = true; // 对于旧版IE浏览器
      }
    }

    function handleInnerClick(event) {
      console.log('目标阶段：内部按钮被点击');

      // 在这里也可以阻止事件继续冒泡
      // event.stopPropagation();

      // 或者在此处阻止默认行为
      // event.preventDefault();
    }

    // 注册事件监听器，分别在捕获阶段和冒泡阶段处理点击事件
    document.getElementById('inner').addEventListener('click', function(event) {
      console.log('添加监听器 - 捕获阶段：内部按钮被点击（捕获）');
    }, true); // 使用true作为第三个参数表示在捕获阶段触发

    document.getElementById('inner').addEventListener('click', function(event) {
      console.log('添加监听器 - 冒泡阶段：内部按钮被点击（冒泡）');
    }); // 默认在冒泡阶段触发
  </script>

</body>
</html>

在这个例子中：

当用户点击#inner元素时，首先会触发捕获阶段，如果有为捕获阶段注册的事件监听器，它们会被依次执行。
然后进入目标阶段，即事件真正发生在#inner元素上，此时handleInnerClick函数被执行。
如果没有调用event.stopPropagation()，事件将开始冒泡阶段，先触发#middle元素上的事件监听器handleMiddleClick，然后是#outer元素上的handleOuterClick。
如果在handleMiddleClick中调用了event.stopPropagation()，则事件不会进一步传递到#outer元素。

注意：现代JavaScript通常推荐使用addEventListener方法，因为它允许你明确指定是否在捕获阶段或冒泡阶段处理事件。而HTML中的onclick属性会在冒泡阶段触发。

9-阻止事件传播

在JavaScript中，阻止事件传播（event propagation）通常是指阻止事件向上冒泡到父元素的过程。以下是一个使用event.stopPropagation()方法阻止点击事件向上冒泡的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<div id="parent" style="background-color: yellow;">
    <div id="child" style="background-color: green;">Click me</div>
</div>

<script>
    document.getElementById('child').addEventListener('click', function(event) {
        console.log('Child element clicked');
        
        // 阻止该事件继续向上传播到父元素
        event.stopPropagation();
    });

    document.getElementById('parent').addEventListener('click', function(event) {
        console.log('Parent element clicked');
    });
</script>

</body>
</html>

在这个例子中，我们为子元素和父元素都添加了点击事件监听器。当点击子元素时，首先触发子元素的事件处理函数，并通过event.stopPropagation()阻止事件进一步向上冒泡到父元素。因此，当你点击子元素时，只会打印出“Child element clicked”，而不会触发父元素的点击事件，即不会打印出“Parent element clicked”。

10-阻止默认行为

在JavaScript中，阻止事件的默认行为通常是指阻止浏览器对特定事件的默认处理方式。例如，点击链接默认会跳转到href属性指定的URL，提交表单默认会刷新页面并发送数据到服务器等。下面是一个阻止链接（a标签）默认跳转行为的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<a href="https://www.example.com" id="myLink">Click me (won't redirect)</a>

<script>
    document.getElementById('myLink').addEventListener('click', function(event) {
        event.preventDefault(); // 阻止链接的默认跳转行为

        console.log('Link clicked but not redirected.');

        // 在这里可以添加自定义逻辑替代默认行为，比如使用Ajax请求或者进行其他操作
    });
</script>

</body>
</html>

在这个例子中，当用户点击带有id为"myLink"的链接时，event.preventDefault()方法被调用，从而阻止了浏览器执行默认的跳转行为。因此，尽管点击了链接，但不会跳转到"https://www.example.com"，而是会在控制台打印出"Link clicked but not redirected."，并且可以在事件监听器中添加自定义的处理逻辑。

11-案例-自定义右键菜单

自定义右键菜单在JavaScript中实现时，通常会涉及阻止默认的右键菜单显示，并创建一个自定义菜单元素，然后根据鼠标点击的位置动态定位这个菜单。以下是一个简单的实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        #customMenu {
            display: none;
            position: absolute;
            background-color: white;
            border: 1px solid black;
            padding: 5px;
            z-index: 9999;
        }
        #customMenu li {
            list-style-type: none;
            margin-bottom: 5px;
        }
        #customMenu li a {
            text-decoration: none;
            color: black;
        }
    </style>
</head>
<body oncontextmenu="return false;">

<div id="content">Right click anywhere in this content area to see the custom menu.</div>
<ul id="customMenu">
    <li><a href="#" onclick="alert('Copy')">Copy</a></li>
    <li><a href="#" onclick="alert('Paste')">Paste</a></li>
    <li><a href="#" onclick="alert('Cut')">Cut</a></li>
</ul>

<script>
    document.getElementById('content').addEventListener('contextmenu', function(event) {
        event.preventDefault(); // 阻止默认的右键菜单

        var menu = document.getElementById('customMenu');
        
        // 根据鼠标位置定位菜单
        menu.style.display = 'block';
        menu.style.left = event.clientX + 'px';
        menu.style.top = event.clientY + 'px';

        // 在这里可以添加逻辑来处理菜单项点击或关闭菜单（例如，在用户点击页面其他地方时隐藏菜单）
    });

    // 为了简化示例，这里没有包含取消菜单显示的代码，实际项目中应确保用户在不点击菜单项时能关闭菜单
</script>

</body>
</html>

在这个例子中，当用户在id为"content"的区域上右击时，自定义的右键菜单会显示出来，而浏览器默认的右键菜单被阻止。通过event.clientX和event.clientY获取鼠标指针的坐标，并据此设置自定义菜单的位置。每个菜单项是链接（<a>标签），点击后触发相应的操作（此处仅为演示，使用了alert弹窗）。在实际应用中，这些操作应该替换为实际的功能函数调用。

注意：上述示例仅展示了基本的右键菜单显示功能，但未包含菜单关闭机制，通常还需要添加全局事件监听器以检测何时关闭菜单（例如，当用户点击页面其它位置时）。

12-事件委托

事件委托是一种在JavaScript中处理事件的高效技术，它利用了事件冒泡机制。通过将事件处理器添加到父元素上，而不是直接添加到每个子元素上，可以实现对多个子元素的统一管理。

以下是一个使用事件委托的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件委托示例</title>
</head>
<body>

    <ul id="list">
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
        <!-- 可能还有更多列表项... -->
    </ul>

    <script>
        // 获取父元素
        var parentElement = document.getElementById('list');

        // 为父元素添加点击事件监听器
        parentElement.addEventListener('click', function(event) {
            // 判断触发事件的是哪个子元素（这里是li元素）
            if (event.target.tagName.toLowerCase() === 'li') {
                console.log('你点击了：' + event.target.textContent);
                
                // 如果需要执行特定操作，例如删除列表项，可以在这一部分编写代码
                // event.target.parentNode.removeChild(event.target);
            }
        });

        // 如果我们为每个li都单独绑定事件处理器：
        // var listItems = document.querySelectorAll('#list li');
        // for (var i = 0; i < listItems.length; i++) {
        //     listItems[i].addEventListener('click', function(event) {
        //         console.log('你点击了：' + this.textContent);
        //     });
        // }
    </script>

</body>
</html>

在这个例子中，我们没有为每一个列表项<li>分别添加点击事件监听器，而是将监听器添加到了它们共同的父元素<ul id="list">上。当用户点击任何一个列表项时，事件会冒泡到父元素，然后触发我们在父元素上设置的事件处理器。处理器会检查触发事件的实际目标，并根据目标类型执行相应的操作。这样，即使动态添加或删除列表项，也无需重新为新添加的列表项绑定事件处理器，提高了代码的效率和灵活性。

最后求点赞，求分享，求抱抱…

m0_74242675

关注

27
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
JavaScript之事件第九天

自定义右键菜单在JavaScript中实现时，通常会涉及阻止默认的右键菜单显示，并创建一个自定义菜单元素，然后根据鼠标点击的位置动态定位这个菜单。// 阻止默认的右键菜单 var menu = document . getElementById('customMenu');// 根据鼠标位置定位菜单 menu . style . display = 'block';// 在这里可以添加逻辑来处理菜单项点击或关闭菜单（例如，在用户点击页面其他地方时隐藏菜单） });
复制链接

扫一扫