javascript初探（四）------事件对象

chuck-Gemini

已于 2023-03-13 22:34:20 修改

阅读量126

点赞数

分类专栏： # JavaScript 文章标签： javascript 前端 html

于 2021-03-06 13:57:25 首次发布

本文链接：https://blog.csdn.net/chucksun0426/article/details/114380616

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、概述

HTML 事件例子：
- 用户点击鼠标（或移至元素上）、键盘时
- 网页、图像加载后
- 输入字段被改变时、表单被提交时
事件本质：事件对象，为元素对象内的隐含对象，跟属性节点对象和文字节点对象同级
函数绑定：JS代码能够与事件绑定，即事件发生时会调用相应代码执行
DOM 事件标准描述了事件传播的 3 个阶段：
- 捕获阶段（Capturing phase）：事件（从 Window）向下走近元素。
- 目标阶段（Target phase）：事件到达目标元素。
- 冒泡阶段（Bubbling phase）：事件从元素上开始冒泡（可以取消event.cancelBubble = true;）。
事件委派：冒泡应用，常在父元素节点添加事件监听，捕获子元素节点的事件，集中处理

二、函数绑定

2.1 单事件内联绑定

写法

// 标签文字元素会在点击后调用内联js语句执行
<h1 onclick="this.innerHTML='更新后文本!'">点击文本!</h1>

2.2 单事件外部绑定

写法(不能写在onload事件里见2.3)

<!DOCTYPE html>
<html>
<head>
    <script>
    	// event对象调用的时候会隐式传入，event.target不会变化，
        // 它永远指向事件触发的那个元素节点对象,此处即为h1元素节点对象
        function changetext() {
            event.target.innerHTML = "更新后文本!";
        }
    </script>
</head>
<body>
    <h1 onclick="changetext()">点击文本!</h1>
</body>
</html>

2.3 多事件绑定

常规

<!DOCTYPE html>
<html>

<head>
    <script>
    	// onload事件：html页面加载后再调用脚本内方法，否则以下语句会逐行执行
    	// 而此时元素节点还未创建，报错
        window.onload = function() {
        	// 获取元素节点对象
        	const h1_elem = document.querySelector("h1")
        	// 此处为h1元素节点给事件绑定响应函数，可以累加，互不影响，依次调用响应函数
        	// 也可以移除：h1_elem.removeEventListener("click",changetext);
        	// 第三个参数：默认false，绑定冒泡阶段，true，绑定捕获捕获阶段
        	h1_elem.addEventListener("click",changetext);
        	// 此处为响应函数具体实现
            function changetext() {
            
            	// event由addEventListener函数隐式传入，event.target不会变化，
                // 它永远指向事件触发的那个元素节点对象,此处即为h1元素节点对象
                event.target.innerHTML = "更新后文本"
                
				// this会随冒泡动态变化，谁调用addEventListener即指向谁
                // this.innerHTML = "更新后文本!";
                
                // 返回true，仅此处二者相等
            	alert(this == event.target);
            }
        }
    </script>
</head>

<body>
    <!-- 不用在此绑定事件 -->
    <h1>点击文本!</h1>
</body>

</html>

this 与event.target区别

<!DOCTYPE html>
<html>

<head>
    <script>
        window.onload = function() {
            const h1_elem = document.querySelector("div")
            h1_elem.addEventListener("click", changetext);
            function changetext() {
                // 返回DIV
                alert(this.nodeName);
                // 返回H1
                alert(event.target.nodeName);
                // 返回false
                alert(this == event.target);
            }
        }
    </script>
</head>

<body>
    <div>
        <h1>点击文本1!</h1>
        <h1>点击文本2!</h1>
    </div>
</body>

</html>

三、事件

3.1 常用事件

通用事件列表

事件	描述
onchange	元素节点改变
onload	一张页面或一幅图像完成加载
onresize	窗口或框架被重新调整大小
onscroll	当文档被滚动时发生的事件
onunload	用户退出页面( <body> 和 <frameset>)

表单事件列表

事件	描述
onsubmit	表单提交时触发
onfocus	元素获取焦点时触发，即点进输入框，输入框即获得焦点
oninput	元素获取用户输入时触发
onfocusout	元素即将失去焦点时触发
onsearch	用户向搜索域输入文本时触发 ( <input=“search”>)

事件节点属性

属性名	描述
clientX	相对可见窗口左上角的x坐标，为Number类型
clientY	相对可见窗口左上角的x坐标，为Number类型
pageX	相对页面左上角的x坐标，为Number类型，会随着页面滚动而改变
pageY	相对页面左上角的x坐标，为Number类型，会随着页面滚动而改变
screenX	相对显示屏幕的x坐标，为Number类型
screenX	相对显示屏幕的y坐标，为Number类型

属性节点调用方法：event.属性名；
取消事件的默认动作：event.preventDefault();，例如a标签点击就会跳转，取消就不会跳转了
完全列表：太多了，点此连接跳转w3shool，现用现查

3.1 鼠标事件

addEventListener函数：首参数传入的事件名需要去掉on，如onclick变为click

事件列表

事件	描述
onclick	用户点击元素节点时触发
onmouseover	鼠标移到元素节点区域时触发，如鼠标移到图片内时，图片变大
onmouseenter	鼠标移入元素节点区域的瞬间触发，不冒泡
onmouseleave	鼠标移出元素节点区域的瞬间触发，不冒泡
ondblclick	用户双击元素节点时触发
onmousemove	鼠标在元素节点区域中时触发，持续跟踪鼠标坐标
onmouseover	鼠标在进入元素节点时触发，在移出元素节点时再次触发关闭此事件
onsubmit	确认按钮被点击时触发
onwheel	鼠标滚轮滚动，固定毫秒触发一次`event.deltaY`获得滚动值，有正负

滚轮控制黑盒子高度的案例

<!DOCTYPE html>
<html>

<head>
    <script>
        window.onload = function() {
            const box1 = document.querySelector("#box1");
            // 绑定鼠标滚轮事件
            box1.onwheel = function() {
            	// 不在乎值，仅在乎大小，手指向前推滚轮
                if (event.deltaY < 0) {
                	// this指向调用函数的对象box1，每次滚动加10px
                    this.style.height = this.clientHeight + 10 + "px";
                // 手指向后推滚轮
                } else {
                    this.style.height = this.clientHeight - 10 + "px";
                }
            }
        }
    </script>
    <style>
        #box1 {
            width: 300px;
            height: 300px;
            background: #000;
        }
    </style>
</head>

<body>
    <div id="box1">
</body>

</html>

3.2 键盘事件

键盘事件：通常绑定给可以获得焦点的元素节点（如表单）或document
事件列表
事件描述
onkeydown 键盘被按下瞬间触发
onkeyup 键盘弹起瞬间触发
onkeypress 某个键盘按键被按下并松开
事件节点属性
属性名描述
event.keyCode 返回键盘键的编码，可用于判断
event.altKey 返回布尔值，“ALT” 是否被按下，同理ctrlKey，shiftKey

事件	描述
onkeydown	键盘被按下瞬间触发
onkeyup	键盘弹起瞬间触发
onkeypress	某个键盘按键被按下并松开

属性名	描述
event.keyCode	返回键盘键的编码，可用于判断
event.altKey	返回布尔值，“ALT” 是否被按下，同理ctrlKey，shiftKey

上一篇：javascript初探（三）------DOM
下一篇：javascript初探（五）------BOM

chuck-Gemini

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
javascript初探（四）------事件对象

目录一、概述二、基本绑定方式三、常用事件一、概述HTML 事件的例子：当用户点击鼠标（或移至元素上）、键盘时当网页、图像加载后当输入字段被改变时、表单被提交时事件绑定：JavaScript代码能够与事件绑定，即事件发生时会调用相应代码执行二、基本绑定方式内联绑定// 标签文字元素会在点击后调用内联js语句执行<h1 onclick="this.innerHTML='更新后文本!'">点击文本!</h1>标签调用函数<!DOCTYPE html
复制链接

扫一扫