事件的相关知识

最新推荐文章于 2024-05-20 22:14:20 发布

Monday99s

最新推荐文章于 2024-05-20 22:14:20 发布

阅读量36

点赞数

分类专栏： javascript 文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/qq_52400625/article/details/124808282

版权

javascript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

事件的组成

事件源----（谁触发了）
事件类型—（什么事）
事件处理函数–（干了什么）

注册事件或者叫绑定事件方式

传统注册方式	方法监听注册方式
利用 on 开头的事件 onclick	w3c 标准推荐方式
`<button onclick = "alert("hi")"></button>`	addEventListener() 它是一个方法
btn.onclick = function() {}	IE9 之前的 IE 不支持此方法，可使用 attachEvent() 代替
特点：注册事件的唯一性	特点：同一个元素同一个事件可以注册多个监听器
同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数	按注册顺序依次执行

注意点

addEventListener事件监听方式

语法：
	eventTarget.addEventListener(type,listener[,useCapture])
	
	
	type:事件类型字符串，比如click,mouseover,注意这里不要带on
	listener：事件处理函数，事件发生时，会调用该监听函数
	useCapture：可选参数，是一个布尔值，默认是 false。（设置函数是冒泡还是捕获阶段，默认冒泡）

attachEvent事件监听方式(兼容)

语法：
	eventTarget.attachEvent(eventNameWithOn,callback)
	
	eventNameWithOn：事件类型字符串，比如 onclick 、onmouseover ，这里要带 on
	callback： 事件处理函数，当目标触发事件时回调函数被调用
	ie9以前的版本支持

删除事件或者叫解绑事件方式

removeEventListener删除事件方式

语法：
	eventTarget.removeEventListener(type,listener[,useCapture]);（参数介绍如上）

detachEvent删除事件方式(兼容)

语法：
	eventTarget.detachEvent(eventNameWithOn,callback);（参数介绍如上）

传统事件删除方式

语法：
	eventTarget.onclick = null;

事件对象（e=e||window.event)

事件对象属性方法	说明
e.target	返回触发事件的对象标准
e.srcElement	返回触发事件的对象非标准 ie6-8使用
e.type	返回事件的类型比如`click` `mouseover` 不带on
e.cancelBubble (使用：e.cancelBubble = true; 阻止冒泡)	该属性阻止冒泡，非标准，ie6-8使用
e.returnValue （使用：event.returnValue=false阻止默认）	该属性阻止默认行为非标准，ie6-8使用
e.preventDefault() （使用：e.preventDefault()）	该方法阻止默认行为标准比如不让链接跳转
e.stopPropagation() （使用：e.stopPropagation()）	阻止冒泡标准。

e.target 和 this 的区别：

this 是事件绑定的元素，这个函数的调用者（绑定这个事件的元素）
e.target 是事件触发的元素。

鼠标事件（ MouseEvent ）

常见的鼠标事件

鼠标事件	触发条件
onclick	鼠标点击左键触发
onmouseover（onmouseenter没有冒泡）	鼠标移入触发
onmouseout（onmouseleave没有冒泡）	鼠标离开触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发

鼠标事件对象属性

鼠标事件对象	说明
e.clientX	返回鼠标相对于浏览器窗口可视区的X坐标
e.clientY	返回鼠标相对于浏览器窗口可视区的Y坐标
e.pageX（重点）	返回鼠标相对于文档页面的X坐标 IE9+ 支持
e.pageY（重点）	返回鼠标相对于文档页面的Y坐标 IE9+ 支持
e.screenX	返回鼠标相对于电脑屏幕的X坐标
e.screenY	返回鼠标相对于电脑屏幕的Y坐标

获取相对于“触发事件的元素”的坐标

通过 event 对象的 offsetX 和 offsetY 可以获取到鼠标相对于当前所指向对象的坐标
获取相对于浏览器可视区域的坐标

通过 event 对象的 clientX 和 clientY 可以获取鼠标相对于浏览器视口（即滚动条之外的部分忽略掉）的坐标
获取相对文档的坐标(pageX和pageY)

如果需要获取鼠标相对于网页文档中的绝对坐标（即以页面左上角为参照点），那么就需要考虑页面滚动，也就是说将可视区域的坐标加上滚动距离。
获取相对于屏幕的坐标

通过 event 对象的 screenX 和 screenY 可以获取屏幕坐标（包括上面浏览器工具栏标签页）

禁止鼠标右键与鼠标选中

contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单
selectstart 禁止鼠标选中

<body>
    <h1>我是一段不愿意分享的文字</h1>
    <script>
        // 1. contextmenu 我们可以禁用右键菜单
        document.addEventListener('contextmenu', function(e) {
                e.preventDefault(); // 阻止默认行为
            })
            // 2. 禁止选中（左键） selectstart
        document.addEventListener('selectstart', function(e) {
            e.preventDefault();

        })
    </script>
</body>

键盘事件（KeyboardEvent）

常见的键盘事件

键盘事件	触发条件
onkeyup	某个键盘按键被松开时触发（不识别大小写A和a返回的都是65）
onkeydown	某个键盘按键被按下时触发（不识别大小写A和a返回的都是65）
onkeypress	某个键盘按键被按下时触发，但是它不识别功能键，比如 ctrl shift 箭头等

三个事件的执行顺序是： keydown – keypress — keyup

键盘事件对象属性

键盘事件对象属性	说明
e.keyCode(或e.which)	返回该键值的ASCII值
e.shiftKey	shift键
e.ctrlKey	ctrl键
e.altKey	alt键

表单/表单元素事件

常见的表单/表单元素事件

表单/表单元素事件	触发条件
onchange	必须文本框内容在文本框失去焦点的时候内容和上次比较有改变
oninput	文本框里面增加或者减少哪怕一个字符都会出发，不用失去焦点
onsubmit	submit事件是表单的事件，不是表单元素的事件,也就是说加在表单上（其他事件一般加在表单元素上）

触摸事件（主要指移动端）

常见的触摸事件

触摸事件	触发条件
ontouchstart	手指刚触摸到元素
ontouchmove	手指在元素上移动
ontouchend	手指离开元素

触摸事件对象属性

触摸事件对象属性	说明
e.touches	e.touches记录的你手指的坐标

元素偏移量

offset系列属性

offset系列属性	作用
element.offsetParent	返回作为该元素带有定位的父级元素，如果父级没有定位，返回body
element.offsetTop	返回元素相对带有定位的父元素上方的偏移
element.offsetLeft	返回元素相对带有定位的父元素左边框的偏移
element.offsetWidth	返回自身包括padding、边框、内容区的宽度，返回数值不带单位
element.offsetHeight	返回自身包括padding、边框、内容区的高度

client系列属性

client系列属性	作用
element.clientTop	返回元素上边框的大小
element.clientLeft	返回元素左边框的大小
element.clientWidth	返回自身包括 padding、内容区的宽度，不含边框、返回值无单位
element.clientHeight	返回自身包括 padding、内容区的高度，不含边框、返回值无单位

scroll系列属性

scroll系列属性	作用
element.scrollTop	返回被卷去的上侧的距离，返回数值不带单位
element.scrollLeft	返回被卷去的左侧距离，返回数值不带单位
element.scrollWidth	返回自身是实际的宽度。不含边框
element.scrollHeight	返回自身实际的高度，不含边框

Monday99s

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
事件的相关知识

事件的组成事件源----（谁触发了）事件类型—（什么事）事件处理函数–（干了什么）注册事件或者叫绑定事件方式传统注册方式方法监听注册方式利用 on 开头的事件 onclickw3c 标准推荐方式<button onclick = "alert("hi")"></button>addEventListener() 它是一个方法btn.onclick = function() {}IE9 之前的 IE 不支持此方法，可使用 attach
复制链接

扫一扫