DOM第四章事件(下)

最新推荐文章于 2023-04-27 11:32:44 发布

小刘的前端之路

最新推荐文章于 2023-04-27 11:32:44 发布

阅读量385

点赞数 1

分类专栏： JS新篇文章标签： css3 前端 javascript

本文链接：https://blog.csdn.net/liuzizhoufaith/article/details/124191795

版权

本文深入探讨DOM事件，包括事件的传播机制（捕获阶段、目标阶段、冒泡阶段），拖拽操作的实现与问题解决，滚轮事件的应用及其常见问题，以及键盘事件的类型与特性，如onkeydown和onkeyup事件的使用。通过实例解析，展示了如何在实际开发中处理这些事件。

摘要由CSDN通过智能技术生成

第五讲.事件的传播

关于事件的传播,网景公司和微软公司有不同的理解

微软认为事件应该由内向外传播,也就是当事件触发时,应该先触发当前元素上的事件.称为事件的冒泡阶段

而网景公司(已倒闭)相反,认为事件应该是由外向内传播的.也就是事件触发时,应该先触发祖先元素的事件,然后再向内传播给后代元素.称为事件的捕获阶段

w3c综合了两个公司的方案,将事件的传播分成了三个阶段:

捕获阶段:从最外层的祖先元素(window),向目标的后代元素进行捕获,但是默认此时不会触发事件
目标阶段:事件捕获到了目标元素,捕获结束开始在目标元素上触发事件
冒泡阶段:事件从目标元素向它的祖先元素传递,依次触发祖先元素上的事件

默认是从第二阶段捕获到了才开始执行

如果希望在捕获阶段就触发事件,可以将addEventListener的第三个参数设置为true.

但是一般情况下我们不希望在捕获阶段执行,所以参数一般设置为false.

在ie8中没有捕获阶段.

第六讲.拖拽

拖拽box1元素

拖拽的流程:

当鼠标在被拖拽元素上按下时,开始拖拽
当鼠标移动时,被拖拽元素跟随鼠标移动
当鼠标松开时,被拖拽元素固定在当前位置

onmousedown事件鼠标被按下

onmousemove事件鼠标移动

onmouseup事件鼠标被松开

var box1=document.getElementById('box1');//获取box1
box1.onmousedown=function(){
   //为box1绑定鼠标按下事件
    document.onmousemove=function(event){
   
        event=event||window.wvent;//解决兼容性问题
        var left=event.clientX;//获取鼠标的坐标
        var top=event.clientY;
        
        box1.style.left=left+'px';//修改box1的位置
        box1.style.top=top+'px'