JavaScript中几个主要的知识点（2） ---- DOM事宜

2024年5月17日 172次阅读 来源: 折丹

JavaScript中几个最主要的大知识点

  1. 面向对象

  2. DOM事宜

  3. 异步交互ajax

事宜

事宜就是文档和浏览器的霎时交互行动

1.事宜范例

  • 点击: click

  • 滚轮: scroll

  • 滑动: move

  • 进入: enter

  • 加载: load

2.事宜机制

  • 事宜的监听(事宜的绑定)

    • 经由过程on+事宜名 这类范例绑定的事宜都叫做DOM0级事宜

    • DOM0级事宜，同一个元素的同一个事宜监听，绑定的触发运转函数，不能反复绑定，有且只能绑定一回，下一次绑定的会将上一次的给覆蓋掉

    • 事宜设为null，移除事宜的监听

    • 监听事宜，不仅是浏览器的一种机制，也是浏览器给予DOM文档元素的属性，即事宜的监听是时刻存在的，然则事宜触发时刻运转的处置惩罚函数，是我们本身定义的

  • 事宜的触发：触发事宜时刻运转绑定的处置惩罚函数

JS中的事宜，实在是以一个类的情势存在的，每一个绑定的事宜实在都是这个类的一个实例 (援用数据范例的对象) ，浏览器会给我们的一切的事宜触发函数中，默许传入一个实参，就是当前事宜的事宜对象(event)，在这个事宜对象中，保存着当前事宜一切信息

事宜对象存在于一切的事宜的触发处置惩罚函数中，事宜对象中有一些经常运用的属性，用于掌握交互中的结果。

  • clientX/clientY：鼠标点击点对应屏幕左上角的位置信息

  • pageX/pageY：鼠标点击的点对应body左上角的位置信息

  • keyCode：键盘事宜中键盘对应的键盘码

    • Backspace： keyCode:8 删除键

    • enter： keyCode：13 回车键

    • space： keyCode：32 空格键

    • arrowLeft/Up/Right/Down： keyCode：37 / 38 / 39 / 40 小键盘左 / 上 / 右 / 下

事宜对象还存在一些兼容性：在规范浏览器下他的事宜对象存在于当前函数的作用域中，而在ie中存在于window作用域下。

//处置惩罚事宜对象的兼容性写法
event=event|| window.event;

//处置惩罚事宜源的兼容性写法
event.target || event.srcElement

//处置惩罚事宜冒泡的兼容性写法
event.stopPropagation() || event.cancelBubble=true;

//阻挠默许行动的兼容写法
event.preventDefault() || event.returnValue=false;
3.事宜托付的头脑

有时刻我们需要对一个DOM元素下的多个子元素绑定雷同的事宜，比如说为表格增加可删除一行的功用，平常的要领是轮回绑定事宜，然则如许的方法明显机能不高，这时刻就能够只为其父元素绑定事宜，经由过程事宜托付来完成其多个子元素的雷同事宜结果。

事宜托付的道理为：依据事宜流的流传机制，我们在父级标签上监听事宜，经由过程捕捉和冒泡机制，在触发子集的事宜的时刻，冒泡流传给父级，来触发父级的事宜处置惩罚函数

那末什么是事宜得出流传机制呢？总的来说能够把事宜流的流传机制分为两到三个阶段：

  1. 事宜捕捉阶段：从DOM最外层标签HTML最先往子元素捕捉事宜源

  2. 捕捉到事宜对象（能够归到第一阶段）

  3. 冒泡流传：从捕捉到事宜源的元素最先往父级元素举行事宜冒泡，DOM0级事宜中，事宜绑定函数的触发都发生在冒泡阶段

DOM2级事宜

DOM2级事宜就是DOM0级事宜的优化，同一个文档对象同一个事宜，能够绑定多个事宜处置惩罚顺序，还能够掌握事宜处置惩罚顺序的实行阶段在捕捉或许冒泡阶段实行。

1.在规范浏览器中，绑定DOM2级事宜的要领为：addEventListener()

  • 第一个参数为事宜范例：[String] click / mouseover / blur …

  • 第二个参数为事宜处置惩罚函数：[Function] listener

  • 第三个参数为事宜处置惩罚函数是不是在冒泡阶段实行：[Boolean] ture/false

假如直接触发的是事宜源的监听事宜，没有事宜托付的情况下，则冒泡和捕捉会同时发生，此时会依据函数的誊写先后顺序实行事宜处置惩罚顺序

事宜绑定函数中的this指向当前绑定事宜的DOM对象，this还即是currentTarget。
运用 removeEventListener() 来移除事宜，参数必需与要移除的事宜处置惩罚函数地点指针雷同。

2.在低版本IE浏览器（6-8）中，绑定DOM2级事宜的要领为：attachEvent()

IE中的DOM2级事宜的事宜处置惩罚顺序,都是在冒泡阶段实行的。

  • 第一个参数为事宜范例：[String] onclick / onmouseover / onblur …

  • 第二个参数为事宜处置惩罚顺序：：[Function] listener

IE下DOM2级事宜的处置惩罚函数是绑定在全局(window)下,所以其内部this指向window，IE下DOM二级事宜还存在反复实行屡次雷同的处置惩罚函数和函数实行乱序的题目，能够用 定阅 – 宣布 形式处理这些兼容性题目。
运用detachEvent()来移除事宜，参数一样必需与要移除的事宜地点指针雷同

    原文作者：折丹
    原文地址: https://segmentfault.com/a/1190000009923937
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞