DOM编程事件与简单编程

最新推荐文章于 2025-10-17 14:26:08 发布
原创 最新推荐文章于 2025-10-17 14:26:08 发布 · 583 阅读 · 8 ·
CC 4.0 BY-SA版权
rej177
文章标签：

#javascript #开发语言 #ecmascript

本文介绍了DOM编程中的事件处理，包括事件绑定、事件监听方法，如点击、鼠标悬浮等，以及event事件对象的属性如clientX、clientY、keyCode。同时，讨论了事件冒泡机制和如何阻止浏览器默认行为，展示了如何通过JavaScript实现动态交互，如输入框长度限制、鼠标移入移出效果和复选框全选功能。此外，还提供了三种不同的动态时钟实现示例。

文章目录

事件绑定

DOM编程中的事件，指用户或浏览器执行的某个动作，如点击鼠标、按键、打开页面等等。在事件触发时，可以执行一些逻辑操作来响应该事件，实现与用户交互的动态效果和功能。

常见的DOM事件包括：

  1. 鼠标事件：click（单击）、doubleclick（双击）、mousedown（鼠标按下）、mouseup（鼠标抬起）、mousemove（鼠标移动）等。

  2. 键盘事件：keydown（按下键盘）、keyup（松开键盘）等。

  3. 表单事件：submit（提交表单）、reset（重置表单）等。

  4. 焦点事件：focus（获取焦点）、blur（失去焦点）等。

  5. 窗口事件：load（页面加载完成）、unload（页面关闭）、resize（窗口大小改变）等。

  6. 其他事件：change（表单元素值改变）、scroll（滚动）等。

通过JavaScript代码，可以为某个DOM元素添加事件监听器，以便在事件触发时执行相应的操作。例如：

var button = document.getElementById('myButton');
button.addEventListener('click', function() {
  console.log('Button clicked!');
});

以上代码为ID为myButton的按钮添加了一个click事件监听器，当用户单击该按钮时，控制台会输出“Button clicked!”。

绑定式

【示例代码】：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            border: 2px solid black;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div>
        你好 世界！
    </div>
</body>
<script>
    let div = document.querySelector('div')
    //绑定式 事件绑定
    div.onclick = () => {
        div.style.fontSize="40px"
        div.style.color="aqua"
    }
</script>
</html>

在这里插入图片描述
上面的代码实现了在点击指定元素时，会将该元素的字体大小修改为 40px，将元素的字体颜色修改为 aqua。

解释如下：

  1. 首先在 HTML 代码中定义了一个 div 元素，内容为 “你好 世界！”。

  2. 在 JavaScript 代码中，先通过 document.querySelector 方法获取页面上第一个 div 元素，存储在变量 div 中。

  3. 使用 div.onclick 方法对 div 元素添加点击事件监听器，当元素被点击时，会触发 click （点击）事件，随后执行回调函数，将该元素的字体大小修改为 40px，字体颜色修改为 aqua。

总体来说，该代码实现了在点击指定元素时，实现了修改该元素样式的效果，以实现页面交互的效果。

事件监听方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            border: 2px solid black;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div>
        你好 世界！
    </div>
</body>
<script>
    let div = document.querySelector('div')
    // 调用事件监听方法 完成事件绑定
    div.addEventListener('mouseover',() => {
        div.innerText='Hello World!'
    },false)
</script>
</html>

鼠标悬停在上面会改变文字内容
在这里插入图片描述
上面的代码实现了在鼠标移动到指定元素上方时，会触发 mouseover （悬停）事件，从而执行相应的事件处理函数，将该元素的文本内容修改为 “Hello World!”。

解释如下：

  1. 首先在 HTML 代码中定义了一个 div 元素，内容为 “你好 世界！”。

  2. 在 JavaScript 代码中，先通过 document.querySelector 方法获取页面上第一个 div 元素，存储在变量 div 中。

  3. 调用 div.addEventListener 方法，对 div 元素添加鼠标悬浮事件监听器，当鼠标移到该元素上时，会触发 mouseover 事件，随后执行回调函数，将该元素的文本内容修改为 “Hello World!”。

  4. false 参数是用来指定事件在捕获阶段还是冒泡阶段触发，这里设为 false 表示在冒泡阶段触发事件。

总体来说，该代码实现了在鼠标悬浮在指定元素时，动态修改该元素的文本内容，以实现页面交互的效果。

event 事件对象

事件对象的属性和方法根据不同的事件类型会有所不同，下面是一些常见的事件对象属性和方法：

  • target：获取触发事件的目标元素
  • type：获取事件类型（例如click、mouseover等）
  • clientX、clientY：获取相对于浏览器窗口的鼠标X、Y轴坐标
  • offsetX、offsetY：获取相对于触发事件上鼠标的X、Y轴坐标
  • keyCode：获取触发键盘事件的键码值
  • preventDefault()：阻止浏览器默认行为
  • cancelBubble()：阻止事件冒泡
  • timeStamp：获取事件触发的时间戳
  • preventDefault()：阻止浏览器默认行为

除了以上常见的属性和方法，事件对象还可以包含其它特定于事件类型的属性和方法，具体可以根据需要查阅文档。

client、offset

【示例代码】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            border: 1px solid red;
            margin-left: 300px;
            margin-top: 100px;
        }
    </style>
</head>
<body>
    <div>

    </div>
</body>
<script>
    let div = document.getElementsByTagName('div')[0]
    div.addEventListener('click',() => {
        console.log(event.clientX,event.clientY);
        console.log(event.offsetX,event.offsetY);
    },false)
</script>
</html>

输出效果：
在这里插入图片描述

keyCode 键盘事件

keyCode表示当前按下的键的键码（keyCode），是一个数值型（number）
在处理键盘事件时，可以使用keyCode属性来判断用户按下了哪个按键。
不过需要注意的是，keyCode属性在不同的浏览器中可能会有不同的值，因此最好使用keyCode属性的标准化写法event.keyCode。

【示例代码】：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            border: 1px solid red;
            margin-left: 300px;
            margin-top: 100px;
        }
    </style>
</head>
<body>
    <div>

    </div>
</body>
<script>
    document.onkeydown = () => {
        console.log(event.keyCode);
    }
</script>
</html>

输出结果：
在这里插入图片描述

事件冒泡

在 DOM 中，事件冒泡（Event Bubbling）是当我们在一个按钮上点击鼠标时，它会首先触发按钮本身的click事件，然后逐级向上传播到该按钮所在的上一级元素（例如容器DIV），再到上一级元素（例如包含该DIV的父元素），直到传递到文档的根节点。

事件冒泡的优点是可以让我们避免给每个子元素都添加事件监听器，而是将事件监听器添加到它们的父元素上，从而在需要时逐级向下代理事件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            border: 1px solid red;
            margin-left: 300px;
            margin-top: 100px;
        }
    </style>
</head>
<body>
    <div>
        <p>事件冒泡</p>
    </div>
</body>
<script>
    let div = document.getElementsByTagName('div')[0]
    let p = document.querySelector('p')

    div.addEventListener('click',() => {
        console.log(event.clientX,event.clientY);
        console.log(event.offsetX,event.offsetY);
    },false)

    p.onclick = () =>{
        console.log('p标记被点击了');
    }
</script>
</html>

输出效果：
在这里插入图片描述
事件冒泡也可能会导致一些问题，例如当某个子元素上的事件被触发但不希望传递到其父元素时，我们需要及时停止其向上冒泡。
这时可以使用event.cancelBubble = true;方法终止事件冒泡。

    p.onclick = () =>{
        console.log('p标记被点击了');
        event.cancelBubble = true;  //阻止  取消事件冒泡
    }

再次点击文字：
在这里插入图片描述

阻止浏览器默认行为

event.preventDefault();

阻止表单提交或链接跳转或右键

    document.oncontextmenu = () =>{
        event.preventDefault();  //阻止默认行为
    }

鼠标不能右键了

DOM编程

用户名输入框长度限制

实现在输入框失去焦点时，判断输入的用户名是否至少6个字符，如果不足6个字符，则在下方提示框中显示错误信息，否则隐藏错误信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input{
            width: 200px;
            height: 30px;
            /* 去掉输入框默认的外线样式 */
            outline: none;
            border-color: #298cce;
            border-width: 1px;
        }

        /* 伪类 获得焦点时生效 */
        input:focus{
            border-style: dashed;
        }
        p{
            color: red;
            display: none;
        }
    </style>
</head>
<body>
    <input type="text" placeholder="请输入用户名">
    <p>用户名至少6个字符</p>
</body>
<script>
    let input = document.querySelector('input')
    // blur 失去焦点事件
    input.onblur = () =>{
        // value属性代表输入框输入的数据
        // value属性结果是字符串类型
        let name = input.value
        if (name.length < 6) {
            let p = document.getElementsByTagName('p')[0]
            p.style.display = 'block'
        }else{
            let p = document.getElementsByTagName('p')[0]
            p.style.display = 'none'
        }

    }
</script>
</html>

请添加图片描述

鼠标移入移出

示例：
在这里插入图片描述
就是把鼠标放在某个位置会弹出一个框（提示）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            width: 300px;
            color: orange;
            text-decoration: underline;
            margin-top: 200px;
            margin-left: 150px;
        }
        div{
            width: 200px;
            height: 200px;
            background-color: #fff;
            border: 1px solid blue;
            position: absolute;
            top: 50px;
            left: 50px;
            display: none;
        }

    </style>
</head>
<body>
    <p>姓名填写规则</p>
    <div>姓名必须是至少两个汉字</div>
</body>
<script>
    let p = document.querySelector('p')
    let div = document.querySelector('div')
    // 鼠标移入
    p.addEventListener('mouseover',()=>{
        let x = event.clientX
        let y = event.clientY
        div.style.left = x+'px'
        div.style.top = y+'px'
        div.style.display = 'block'
    },false)
    // 鼠标移出
    p.addEventListener('mouseout',()=>{
        div.style.display='none'
    },false)
</script>
</html>

输出效果 ：
请添加图片描述

复选框全选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>全选</button><br>
    <!-- input[type=checkbox]*5 -->
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
</body>
<script>
    let button = document.querySelector('button')
    button.addEventListener('click',() => {
        let box = document.querySelectorAll('input')

        box.forEach((x) => {
            x.checked = true  //chencked 选中属性，只有单选和复选才有
        })
    },false)

</script>
</html>

输出效果：
请添加图片描述

DOM编程实现动态时钟

以下是一个使用 JavaScript 和 DOM 编程实现的动态实时的时钟应用：

第一种：

HTML：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>时钟</title>
    <style>
      #clock {
        font-size: 2em;
        font-weight: bold;
        text-align: center;
        margin-top: 50px;
      }
    </style>
  </head>
  <body>
    <div id="clock">00:00:00</div>
    <script src="clock.js"></script>
  </body>
</html>

JavaScript：
js代码在script标签内

function updateTime() {
  var now = new Date();
  var hours = now.getHours();
  var minutes = now.getMinutes();
  var seconds = now.getSeconds();
  hours = (hours < 10 ? '0' : '') + hours;
  minutes = (minutes < 10 ? '0' : '') + minutes;
  seconds = (seconds < 10 ? '0' : '') + seconds;
  var timeString = hours + ':' + minutes + ':' + seconds;
  document.getElementById('clock').innerHTML = timeString;
}

setInterval(updateTime, 1000);

在这里插入图片描述

该 JavaScript 代码定期更新时钟显示，以显示当前时间。
函数 updateTime 获取当前时间，并将其格式化为 HH:MM:SS 的字符串。然后，该字符串被插入到具有 id="clock" 的 <div> 元素中。
setInterval 函数每隔 1000 毫秒（即一秒）调用一次 updateTime 函数，以使时钟保持同步。
最终HTML 中通过 <script> 标签引入该 JavaScript 文件。

第二种：

在 HTML 部分中，我们使用 <div> 元素来包含时钟元素，并使用 <span> 元素来分别显示小时、分钟和秒钟部分的值。

在 CSS 部分中，我们设置了一些样式来使页面看起来更加美观。设置了背景颜色、时钟的位置和样式，以及字体大小和颜色。

在 JavaScript 部分中，我们使用 window.setInterval() 函数每秒更新一次时钟的时间。首先使用 new Date() 获取当前的时间，并根据当前的时间设置每个时间部分的内容。使用三目运算符来将小时、分钟和秒钟的值转换为两位数的字符串。如果当前小时是 9，则我们会将其转换为字符串 “09”。

最后使用 document.getElementsByClassName() 和 document.querySelector() 函数来获取每个时间部分的元素，并将其内容更新为当前时间。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 300px;
            height: 100px;
            background-color: yellowgreen;
            /* 透明度 */
            opacity: 0.6; 
            /* 固定定位 */
            position: fixed;
            top: 30px;
            right: 20px;
            /* 文字居中 弹性布局*/
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .time{
            font-size: 40px;
            font-weight: bold;
            color: gold;
        }
        .second{
            font-size: 25px;
            color: brown;
        }
    </style>
</head>
<body>
    <div>
        <span class="time">15</span>：
        <span class="time">51</span>：
        <span class="second">33</span>
    </div>
</body>
<script>
    window.setInterval(()=>{
        let now = new Date()
        let hours = now.getHours()
        let minutes = now.getMinutes()
        let seconds = now.getSeconds()
        hours = hours<10?'0'+hours:hours
        minutes = minutes<10?'0'+minutes:minutes
        seconds = seconds<10?'0'+seconds:seconds

        let h = document.getElementsByClassName('time')[0]
        let m = document.getElementsByClassName('time')[1]
        let s = document.querySelector('.second')

        h.innerText = hours
        m.innerText = minutes
        s.innerText = seconds
    },1000)
</script>
</html>

在这里插入图片描述

第三种：

这一种是对第二种代码的优化：

调整字体大小和颜色，使它们更加醒目。
背景色和文字颜色之间的对比度过低，将背景色更改为深色。
将 HTML 中的 元素替换为更具语义的 

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Clock</title>
  <style>
    body {
      background-color: #181818;
    }
    
    div {
      width: 300px;
      height: 100px;
      background-color: #444;
      opacity: 0.9;
      position: fixed;
      top: 30px;
      right: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: Arial, sans-serif;
    }
    
    .time {
      font-size: 40px;
      font-weight: bold;
      color: #f7ca88;
      margin: 0 5px;
    }
    
    .second {
      font-size: 25px;
      color: #f7ca88;
      margin-left: 5px;
    }
  </style>
</head>

<body>
  <div>
    <time class="time" datetime=""></time>:
    <time class="time" datetime=""></time>:
    <time class="second" datetime=""></time>
  </div>
  <script>
    const [hour, minute, second] = document.querySelectorAll('time');
    setInterval(() => {
      const now = new Date();
      hour.textContent = now.getHours().toString().padStart(2, '0');
      minute.textContent = now.getMinutes().toString().padStart(2, '0');
      second.textContent = now.getSeconds().toString().padStart(2, '0');
      const isoTime = `${hour.textContent}:${minute.textContent}:${second.textContent}`;
      hour.setAttribute('datetime', isoTime);
      minute.setAttribute('datetime', isoTime);
      second.setAttribute('datetime', isoTime);
    }, 1000);
  </script>
</body>

</html>

在这里插入图片描述

JavaScript_DOM编程艺术.pdf
02-14
事件是JavaScript编程中不可或缺的一部分，JavaScript DOM编程艺术详细介绍了事件的概念和机制。作者会介绍如何使用事件监听器来捕捉用户的交互行为，并为不同类型的事件（如点击、键盘输入、表单提交等）编写相应的...
JavaScriptDOM编程艺术（第2版）PDF版本下载.txt
07-17
根据提供的文件信息，我们可以推断出这是一本关于JavaScript DOM编程技术的书籍——《JavaScript DOM编程艺术（第2版）》。尽管实际书籍内容并未给出，但从标题、描述及部分链接信息来看，这本书主要涉及JavaScript...
【DOM】DOM事件中target和currentTarget
ColdCoder的博客
04-08 855
DOM事件中target和currentTarget的概念： target和currentTarget都是事件对象中的属性 target是指获取事件的目标，是触发事件的真实元素 currentTarget是指其事件处理程序当前正在处理事件的那个元素，是事件绑定的元素 DOM事件中this和currentTarget的关系： 在事件处理程序内部，对象this始终等于currentTarget的值。 DOM事件中target和currentTarget的关系: 相等：当事件处理程序直接绑定在目标元素上
DOM事件对象中的this和target
KAMHUNCHAN的博客
02-08 279
【JavaScript】DOM进阶/操作元素/Target/冒泡/Intersection API/部分案例
记忆超差的本人的博客
02-09 244
DOM进阶/操作元素/Target/冒泡/Intersection API/部分案例/生命周期简单介绍，js文件加载的几种方法
DOM对象 target属性
benben0729的专栏
09-02 894
target属性返回的是事件的目标节点 结合事件捕获去理解 事件捕获我们知道是document  -》 &lt;html&gt;  -》&lt;body&gt;  -》&lt;div&gt;这么顺序捕获的 &lt;ul&gt; &lt;li&gt;go beijing&lt;/li&gt; &lt;li&gt;go shanghai&lt;/li&gt; &lt;l
DOM事件中target和currentTarget的区别
混世小妲己
03-21 523
target：触发事件的元素。 currentTarget：事件绑定的元素。 两者在没有冒泡的情况下，是一样的值，但在用了事件委托的情况下，就不一样了，例如： 代码： <ul id="ulT"> <li class="item1">fsda</li> <li class="item2">ewre</li> <li class="item3">qewe</li> <li class="it
JSDOM编程艺术代码.7z
10-30
《JavaScript.DOM编程艺术》是JavaScript开发者必读的经典之作，它深入浅出地介绍了如何使用JavaScript操作DOM（Document Object Model）来构建动态、交互式的Web页面。第二版更是对第一版的内容进行了更新和完善，...
JavaScript DOM编程艺术源代码
10-06
而压缩包内的文件"boom11235-2325149-用51单片机控制直流电机仿真图和程序_1601969511"虽然与JavaScript DOM编程无关，但可以作为其他领域的学习资源，如嵌入式系统或硬件控制。 总的来说，掌握JavaScript DOM编程...
JavaScript DOM编程艺术(中文第2版).pdf
01-16
javascript入门必备，本书讲述了JavaScript和DOM的基础知识，但重点放在DOM编程技术背后的思路和原则：预留退路、循序渐进和以用户为中心等，这些概念对于任何前端Web开发工作都非常重要。本书将这些概念贯穿在书中...
dom 事件对象中target与currentTarget区别
可遇，好孩子
10-23 1395
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="m10"> <a href="javascript:;">1</a> </div> <script> document.getElementById('m
HTML DOM target事件属性
杰希默克的博客
09-27 514
target时间属性是 标准Event属性。 定义：target事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口。 语法：event.target//实例：获取触发时间的元素 <html> <head> <script type="text/javascript"> function getEventTrigger(event){ x=event.targe
e.target--- dom事件对象event
杨咩咩
03-15 2293
event不会事件冒泡，值作用于此节点对象，不会传递到父节点或子节点 标准属性： 属性 描述 bubbles 返回布尔值，指示事件是否是起泡事件类型。 cancelable 返回布尔值，指示事件是否可拥可取消的默认动作。 currentTarget 返回其事件监听器触发该事件的元素。 eventPhase 返回事件传播的当前阶段。 target...
this和e.target的异同
weixin_30340745的博客
03-16 352
每次触发DOM事件时会产生一个事件对象（也称event对象），此处的参数e接收事件对象。而事件对象也有很多属性和方法，其中target属性是获取触发事件对象的目标，也就是绑定事件的元素，e.target表示该DOM元素，然后在获取其相应的属性值。 this和event.target的区别： js中事件是会冒泡的，所以this是可以变化的，但event.target不会变化，它永远是直...
HTML DOM target 属性
echo_pn
06-24 169
HTML DOM target 属性 定义和用法 target 属性可设置或返回在何处打开链接。 语法 anchorObject.target=_blank|_parent|_self|_top 四个保留的目标名称： _blank - 在一个新的未命名的窗口载入文档 _self - 在相同的框架或窗口中载入目标文档 _parent - 把文档载入父窗口或包含了超链接引用...
DOM中this与e.target的区别
qq_41189709的博客
08-05 450
<div>123</div> <ul> <li>abc</li> <li>abc</li> <li>abc</li> </ul> <script> // 1. e.target 返...
vue3：数组的.includes方法怎么使用
最新发布
fury的博客
10-17 563
问题回答这句代码什么意思？判断statusKey是否是'waiting'或是什么类型？✅ 字符串（string），比如'waiting'是对象还是数组？❌ 不是对象，也不是数组，只是一个字符串值用在什么场景？控制 UI 显示逻辑，比如按钮是否可点有没有更优写法？可用Set.has()提高性能，但includes更直观✅ 所以这行代码非常常见且合理，是一种简洁有效的状态判断方式。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

二哈喇子！

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

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

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

打赏作者

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

抵扣说明：

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

余额充值