JavaScript中事件的绑定

最新推荐文章于 2025-07-07 09:53:19 发布

原创最新推荐文章于 2025-07-07 09:53:19 发布 · 743 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文详细介绍了JavaScript中事件的绑定，包括获取子节点和兄弟节点的方法，事件注册的传统方式与事件监听方式，事件流的概念，事件对象，事件委托，以及如何禁止右键菜单和鼠标选中。还讲解了鼠标事件对象和键盘事件的处理，提供了实用的代码示例。

JavaScript中事件的绑定

文章目录

JavaScript中事件的绑定
前言
一、节点的层级
- 1. 获取子节点的方式：
- 2. 获取兄弟节点或兄弟元素的方式
二、事件的注册
总结

前言

当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。

一、节点的层级

1. 获取子节点的方式：

childNodes属性：返回当前节点所有子节点的集合（NodeList），返回元素包括元素、文本和其他节点
children属性：只返回了子元素节点的集合（HTMLCollection）
firstChild/lastChild：获取第一个/最后一个子节点（可以是元素节点可以说文本节点）
firstElementChild：返回第一个子元素
lastElementChild：返回最后一个子元素

2. 获取兄弟节点或兄弟元素的方式

nextSibling：返回后一个兄弟节点
perviousSibling：返回前一个兄弟节点
nextElementSilbing：返回下一个兄弟元素
perviousElementSilbing：返回前一个兄弟元素

二、事件的注册

事件注册又称为事件的绑定

1.传统方式：

对象.事件名 = 事件处理程序

例如：
		
btn.onclick = function() { }

优点：同一个对象的同一个事件只能注册一个处理程序，后面注册的程序会将前面注册的程序覆盖掉(唯一性)

2.事件监听方式:

同一个对象的同一个事件添加多个事件处理程序

1、早期的浏览器：dom对象.attachEvent(type,callback)

 type参数：表示事件的类型，如click、change、foucs等
				
callback参数：是回调函数，表示事件处理程序

2、标准浏览器: dom对象.addEventListener(type,callback,[capture])

 type参数：表示事件的类型，如click、change、foucs等
				
callback参数：是回调函数，表示事件处理程序
				
capture参数：可选参数，用来指定事件处理的方式；true表示事件在捕获阶段处理;false表明在冒泡阶段处理

3.删除事件：

dom对象.事件名 = null

dom对象.detachEvent(type, callback);	 -->早期浏览器版本的删除

dom对象.removeEventListener(type,callback)  -->标准浏览器的删除

4.事件流：

是指当事件发生时，会在发生事件的元素节点与DOM树根节点之间按照特定的顺序进行传播，这个过程称之为事件流。

5.事件的对象：

当事件被触发后由系统自动生成。它是与事件有关的数据信息的集合。

a、事件对象的属性：

e.target：触发事件的对象

e.type：事件的类型

6.事件的委托：

不给子元素注册事件，而是给父元素注册事件。事件处理代码在父元素的事件中执行。
优点：只操作一次DOM，可以提高程序的性能。

7.禁止右键菜单

禁止contextmenu事件的默认行为

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

8.禁止鼠标选中

禁止selectstart事件的默认行为

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

9.鼠标事件对象

 clientX：浏览器可视窗口区域的x坐标
		
 clientY：浏览器可视窗口区域的y坐标
		
 pageX：文档中x坐标
		
 pageY：文档中的y坐标
		
 screenX：屏幕中的x坐标
		
 screenY：屏幕中的y坐标

实现鼠标移动时显示对应坐标

代码如下：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            position: absolute;
            top: 2px;
        }
        
        div {
            /* 要做鼠标跟随，必须要绝对定位 */
            position: absolute;
        }
    </style>
</head>

<body>
    <!-- <img src="./images/1.gif"> -->
    <div></div>

    <script>
        var aa = document.querySelector('div')
        document.addEventListener('mousemove', function(e) {
            var x = e.screenX;
            var y = e.screenY;


            aa.style.left = x + 'px';
            aa.style.top = y + 'px';
            //console.log(x, y)
            aa.innerText = 'x:' + x + 'y:' + y;

        })
    </script>

</body>

10.键盘事件

用户在使用键盘时触发的事件

键盘事件对象：KeyBoardEvent，其属性keyCode返回的是按键的ASCII码值，通过ASCII码值可以判断出用户按了哪个键

		String.fromCharCode() : 将ASCII码值转换成字母
		
		String.charCodeAt(): 将字母转换成对应的ASCII码

实现键盘按键弹出对应警告：
在这里插入图片描述

代码如下：

<body>
    搜索：<input type="text">

    <script>
        var search = document.querySelector('input')

        document.addEventListener('keyup', function(e) {
            for (var i = 0; i < 100; i++) {
                if (e.keyCode == i) {
                    alert('你按了' + String.fromCharCode(e.keyCode))
                    console.log(String.fromCharCode(e.keyCode))
                }
            }
        })
    </script>
</body>