JavascriptDOM事件

行之所致

已于 2023-06-09 08:55:53 修改

阅读量358

点赞数 1

分类专栏： Javascript 文章标签： javascript

于 2020-01-18 15:02:43 首次发布

本文链接：https://blog.csdn.net/weixin_44811301/article/details/104030300

版权

11 篇文章 0 订阅

订阅专栏

DOM2级事件规定的事件流包括三个阶段：
事件捕获阶段、处于目标阶段和事件冒泡阶段。
在这里插入图片描述

HTML事件处理程序
某个元素支持的每种事件，都可以使用一个HTML 特性来指定，这个特性与相应事件处理程序同名。
这个特性的值应该是能够执行的 JavaScript代码。

<input type="button" value="Click Me" onclick="alert('Clicked')" /> 
// 当点击按钮的时候alert()函数触发

DOM2事件处理程序

1 给DOM的一个特殊属性赋值一个处理函数
2 btn.addEventListener(“click”, function(){ alert(this.id); }, false); 传递true事件流为事件捕获。

一、在事件处理程序内部， e.target 获取真正触发事件的元素。
二、currentTarget 获取绑定事件的元素。
this指向永远和currentTarget指向一致（只考虑this的普通函数调用)
在这里插入图片描述

在这里插入图片描述
offsetX：鼠标指针相对于目标界面左侧的边框内沿，也就是紧挨着padding外沿的距离。

如果对文档坐标和视口坐标理解不透的参考我的博文 https://blog.csdn.net/weixin_44811301/article/details/104030518

e.clientX e.clientY(视口坐标) 用来获取鼠标在浏览器可视区的位置。如果是移动端参考移动端的屏幕的可视区。
e.pageX e.pageY(文档坐标) 用来获取鼠标在文档中的位置。
也可以通过clientX/Y计算: 鼠标在文档中的位置 = e.clientX/Y鼠标在浏览器可视区位置 + 文档滚动出去的距离
获取文档滚动出去的距离
var scrollTop = document.documentElement.scrollTop
var scrollLeft = document.documentElement.scrollLeft

e.screenX/ e.screenY: 是手指的触摸点相对于设备（和浏览器可视区有区别）左上角的坐标距离。
和浏览器可视区有区别：比方说把浏览器缩小放到中间。做获取还是参照屏幕取值。

e.offsetX/e.offsetY 鼠标点击元素获取鼠标点击元素的当前坐标。

鼠标在盒子上的某个点按下，拖动盒子，盒子跟着鼠标移动的基本原理
第一步：获取鼠标在盒子中的位置 = 鼠标在文档上的位置 - 盒子在文档上的位置

第二步：获取偏移量鼠标在文档上的位置 - 鼠标在盒子中的位置。

第三步：设置偏移量

应用场景: 对"事件处理程序过多"问题的解决方案就是事件委托。
原理: 事件委托利用了事件冒泡，

例如: 给ul下的每个li注册事件，那么不用循环遍历注册了，给ul元素注册就行了。
由于所有列表项都是这个UI元素的子节点，而且li的事件会冒泡，所以单击事件最终会被这个函数处理。
简单：当子元素的事件冒泡到父ul元素时，你可以检查事件对象的target属性，捕获真正被点击的节点元素的引用。

btn.onclick = null; //移除事件处理程序

e.stopPropagation(); 添加到子元素的事件上