js事件（点击事件，键盘事件）

aaaaaaaallllll653

于 2024-09-25 17:14:42 发布

阅读量1k

点赞数 15

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/aaaaaaaallllll/article/details/142527901

版权

JavaScript事件

特效是由事件触发的
事件源：任何一个html元素（节点）都是一个事件源,一个事件源可以添加多个事件
键盘事件：keypress键盘事件，keyup抬起，keydown按下
鼠标事件文档：load加载表单：focus获得焦点，blur失去焦点，submit提交事件，change改变事件
其他：scroll滚动事件，select start选择事件

鼠标事件：

****事件	****说明
onclick	鼠标点击某个对象
ondblclick	鼠标双击某个对象
onmouseover	鼠标被移到某元素之上
onmouseout	鼠标从某元素移开
onmousemove	鼠标被移动
onmousedown	某个鼠标按键被按下
onmouseup	某个鼠标按键被松开
oncontextmenu	右键事件
onmousewheel	当滚轮被滚动的时候
onmouseenter	鼠标进入
onmouseleave	鼠标离开

onmouseenter 和 onmouseover的区别

1、onmouseover、onmouseout：鼠标经过时自身触发事件，经过其子元素时也触发该事件；（父亲有的东西，儿子也有），支持冒泡

2、onmouseenter、onmouseleave：鼠标经过时自身触发事件，经过其子元素时不触发该事件。（父亲的东西就是父亲的，不归儿子所有），不支持冒泡

键盘事件：

事件	说明
onkeypress[使用的比较少]	键盘的某个键被按下
onkeydown	键盘的某个键被按下或按住
onkeyup	键盘的某个键被松开

获取对应的键盘值：

document.onkeyup = function(){
    console.log(event.keyCode);
}

光标事件：

事件	说明
onfocus	元素获得焦点
onblur	元素失去焦点

窗口事件：

事件	说明
onresize	览器窗口被调整大小时发生

表单事件：

事件	说明
onsubmit	提交按钮被点击
onreset	重置按钮被点击
onselect	文本内容被选定
onchange	用户改变表单元素的内容
oninput	在用户输入时触发

单选框和复选框被选中：

复选框是否被选中需要判断复选框中的checked的值 true：选中 false：没选中

<input type="checkbox" id='inp'/>
<script>
    var oInp = document.querySelector('#inp');
    oInp.onclick = function(){
        console.log(this.checked);
    }
</script>

加载事件：

事件	说明
onload	页面或图像加载完成
onbeforeunload	页面卸载前执行

<script>
    // 页面加载完之后再执行js
    window.onload = function(){
        var oBox = document.getElementById('box');
        console.log(oBox.innerHTML);
    }
</script>
<div id='box'>hello world</div>

滚动事件：

事件	说明
onscroll	窗口发生滚动
scrollTo	滚动到指定位置【增加】

window.scrollTo(options) // option为对象格式 window.scrollTo(options) // option为对象格式

top 等同于 y-coord
left 等同于 x-coord
behavior 类型String,表示滚动行为,支持参数 smooth(平滑滚动),instant(瞬间滚动),默认值auto,实测效果等同于instant

offset系列用法：

offsetLeft : 用于获取元素到最近的定位父盒子的左侧距离
1. 计算方式: 当前元素的左边框的左侧到定位父盒子的左边框右侧
2. 如果父级盒子没有定位, 那么会接着往上找有定位的盒子
3. 如果上级元素都没有定位,那么最后距离是与body的left值
offsetTop : 用于获取元素到最近定位父盒子的顶部距离
1. 计算方式:当前元素的上边框的上侧到定位父盒子的上边框下侧
2. 如果父级盒子没有定位,那么会接着往上找有定位的盒子
3. 如果上级元素都没有定位,那么最后距离是与body的top值
offsetWidth :用于获取元素的真实宽度(包括元素宽度、内边距和边框，不包括外边距）
offsetHeight : 用于获取元素的真实高度（包括元素宽度、内边距和边框，不包括外边距）
offsetParent :用于获取该元素中有定位的最近父级元素
1. 如果当前元素的父级元素都没有进行定位,那么offsetParent为body
offsetX：event.offsetX
offsetY：event.offsetX

client系列用法：

clientWidth : 元素的宽度（包括元素宽度、内边框，不包括边框和外边框）
clientHeight: 元素的高度（包括元素宽度、内边框，不包括边框和外边框）
clientX : 获取鼠标事件发生时的应用客户端区域的水平坐标 event.clientX
clientY : 获取鼠标事件发生时的应用客户端区域的垂直坐标（不包含滚动上去的部分）

inner系列用法：

首先这两个属性是比较特殊的，只能由浏览器使用的。返回当前浏览器窗口大小所对应的宽高度

window.innerHeight (包含滚动条的宽度)

window.innerWidth

scroll系列用法：

scrollHeight :是一个只读属性，它返回该元素的像素高度（包含元素宽度、内边框，不包括边框和外边框），是一个整数，单位是像素 px
1. 如果内容不足,就是元素的高度
scrollWidth : 是一个只读属性，它返回该元素的像素高度（包含元素宽度，内边距（padding），不包含外边距（margin）、边框（border）），是一个整数，单位是像素 px
1. 如果内容不足,就是元素的宽度
scrollTop : onscroll事件发生时,元素向上卷曲出去的距离
1. 标准浏览器生效: document.documentElement.scrollTop
2. IE浏览器有效: document.body.scrollTop
scrollLeft : onscroll事件发生时,元素向左卷曲出去的距离
scrollIntoView 滚动元素的父容器

jjs中两种添加事件的方式

方式一：on+事件名
方法二：添加事件监听

添加事件监听：

语法1：element.addEventListener(event, function, useCapture)

Event：必须。字符串，指定事件名。

注意: 不要使用 "on" 前缀。例如，使用 "click" ,而不是使用 "onclick"。

Function：必须。指定要事件触发时执行的函数。

useCapture：可选。布尔值，(默认值, false. true 代表以事件捕获形式触发事件, false 代表以事件冒泡形式触发事件)

对比onclick和addEventListener

1.addEventListener可以对同一个元素绑定多个事件【相同事件】，执行顺序从上到下依次执行。而onclick同一个元素只能绑定一个【相同】事件，如有多个，后面的事件会覆盖前面的事件。

2.addEventListener的第三个参数为布尔类型，默认为false，也就是执行的冒泡机制，如为true，则执行捕获机制

3.addEventListener它对任何 DOM 元素都是有效的，而不仅仅只对 HTML 元素有效。点击查看dom分类

4.注册addEventListener事件时不需要写on，而onclick方式则必须加on

5.在移除事件上，onclick使用的是指针指向null，例如document.onclick = null，而addEventListener则使用的是独有的移除方法removeListener（要使用此方法，addEventListener必须执行的是外部函数或存在函数名，不然则不能使用）

6.addEventListener为DOM2级事件绑定，onclick为DOM0级事件绑定

DOM CSS动态样式