web学习笔记（二十四）

shan33__

已于 2024-03-07 14:49:07 修改

阅读量2.9k

点赞数 82

分类专栏：笔记文章标签：学习笔记 javascript 开发语言 ecmascript 前端 html

于 2024-03-05 09:54:30 首次发布

本文链接：https://blog.csdn.net/shan33__/article/details/136412416

版权

笔记专栏收录该内容

82 篇文章 6 订阅

订阅专栏

2.3 e.target 和 this 的区别：

2.4事件对象的兼容性问题

3.事件委托

4.键盘事件

1.事件流

1.1事件流的定义

就是事件在页面中的传播机制，事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程就是DOM事件流。

1.2事件流的三个阶段

（1）捕获阶段：网景最早提出，现在我们使用的浏览器都已经不使用这个阶段了，了解即可，从最外层节点向内层进行传播，如果没有操作则继续向下传播，直到目标。

（2）目标阶段：就是当前操作的节点。

（3）冒泡阶段： IE 最早提出，现在浏览器大都使用冒泡机制，从里层向外层进行传播，直到最顶层。

1.3没有冒泡机制的事件

大部分事件都要冒泡机制，但有一些事件没有冒泡机制，需要我们注意一下。

onmouseenter	当鼠标进入的时候
onmouseleave	当鼠标离开的时候
onfocus	当获焦的时候
onblur	当失焦的时候
onresize	当窗口尺寸改变的时候
onload	当页面加载的时候

1.4事件流总结

onclick和attchEvent只能得到冒泡阶段。
addEventListener(type, listener[, useCapture])第三个参数如果是 true，表示在事件捕获阶段调用事件处理程序；如果是 false（不写默认就是false），表示在事件冒泡阶段调用事件处理程序。
在时间开发中我们很少用事件捕获，更多的使用事件冒泡。
通过e.cancelBubble=true;或者e.stopPropagation()可以阻止冒泡。根据浏览器的版本不同，可能会有问题产生，下面的代码可以解决兼容性的问题，从而更好的阻止冒泡的发生。
```
    if(e.stopPropagation){
                e.stopPropagation()
            }else{
                e.cancelBubble=true;
            }
```

2.事件对象和事件委托

2.1什么是事件对象

事件对象event(e)就是函数中的形参，这个形参是系统帮我们创建的，里面包含了跟事件相关的一系列信息数据，不需要传递实参过去。可以直接使用

  var btn = document.querySelector('#btn');
        btn.onclick = function (e) {
            console.log(e);
            // 输出鼠标事件对象 

        }

2.2 事件对象中需要关注的属性和方法

e.cancelBubble	阻止冒泡属性，取值为true或false，所有版本都支持
e.stopPropagation()	阻止冒泡的方法，只支持ie9以上版本
clientX和clientY	鼠标在可视区域的坐标（不包含滚动条）
pageX和pageY	鼠标在页面的坐标（包含滚动条）
e.screenX和e.screenY	鼠标在屏幕中的位置（当前页面，包含地址栏和标签栏）
e.target	返回触发事件的对象
e.srcElement	也是返回触发事件的对象
e.type	返回事件的类型
e.returnValue	阻止默认事件的属性，比如不让链接跳转
e.preventDefault()	阻止默认事件的方法，比如不让链接跳转（比较万能）

补充阻止默认动作的方法：

（1）阻止超链接跳转动作：<a href="iavascript:;"></a>

（2）阻止表单的提交动作： <form action="return false"></form>或者用下面的代码也可以完成这个工作。

   form.onsubmit=function(e){
            e.preventDefault();
        }

（3）阻止右击菜单动作：

  document.oncontextmenu=function(e){
            e.preventDefault();
        }

（4）阻止选中的动作，禁止鼠标选中：

    document.onselectstart=function(e){
            e.preventDefault();
        }

2.3 e.target 和 this 的区别：

this 是事件绑定的元素，这个是函数的调用者（绑定这个事件的元素）

e.target 是事件触发的元素。

2.4事件对象的兼容性问题

标准浏览器中是浏览器给方法传递的参数，只需要定义形参 e 就可以获取到。
在 IE6~8 中，浏览器不会给方法传递参数，如果需要的话，需要到 window.event 中获取查找。

解决办法:e = e || window.event;

3.事件委托

事件委托也称为事件代理，在 jQuery 里面称为事件委派。事件委托就是利用冒泡机制，比如我们通过cloneNode克隆出来的节点，然后新节点事件不生效，此时就可以通过事件委托来解决。

解决思路：不给被克隆的元素加事件，委托给父辈的元素代替他添加这个事件，然后利用冒泡原理影响设置每个子节点。一般在使用时搭配e.target(事件触发的元素)来完成一些事情。

利用事件委托我们减少了访问DOM的次数，减少了整个页面的交互就绪时间，提高了程序的性能。

4.键盘事件

onkeypress	按下（使用率较低，功能键（ctrl alt shift）不识别，区分大小写）
onkeydown	按下（不区分大小写）
onkeyup	松开（不区分大小写）