DOM 事宜深入浅出（二）

2024年3月6日 246次阅读 来源: 劳卜

在DOM事宜深入浅出（一）中，我重要给人人解说了差别DOM级别下的事宜处置惩罚顺序，同时引见了事宜冒泡和捕捉的触发道理和要领。本文将继承引见DOM事宜中的知识点，重要侧重于DOM事宜中Event对象的属性和要领。

那末什么是DOM事宜中Event对象呢？事宜对象（event object）指的是与特定事宜相干且包括该事宜细致信息的对象。我们可以经由过程通报给事宜处置惩罚顺序的参数猎取事宜触发后所发作的一系列要领和属性。

Event对象

Event对象现实上是一个事宜处置惩罚顺序的参数，当挪用事宜时，我们只须要将其传入事宜函数就可以猎取。代码以下：

function getEvent(event) {
    event = event || window.event;
}

上面的事宜函数传入了一个名叫Event的参数作为事宜对象，同时做了浏览器兼容处置惩罚。在IE8及之前本版当中，经由过程设置属性注册事宜处置惩罚顺序时，挪用的时刻并未通报事宜对象，须要经由过程全局对象window.event来猎取。所以上述代码中我们应用 || 来做推断，假如event对象存在则运用event，不存在则运用window.event。

Event对象包括了几个要领和多个属性，经由过程这些要领和属性我们可以猎取事宜的细致信息并进行相干处置惩罚。

Event对象要领

Event对象重要有以下两个要领，用于处置惩罚事宜的流传（冒泡、捕捉）和事宜的作废。

1.stopPropagation

stopPropagation要领重要用于阻挠事宜的进一步流传，比方阻挠事宜继承向上层冒泡。

function getEvent(event) {
    event.stopPropagation();
}

child.addEventListener('click', getEvent, false);

假如你须要兼容IE8及以下版本浏览器，则须要应用cancelBubble来替代stopPropagation，由于低版本IE不支撑stopPropagation要领。

function getEvent(event) {
    event = event || window.event;
        
    if (event.stopPropagation) {
        event.stopPropagation();
    } else {
        event.cancelBubble = true;
    }
}

cancelBubble是IE事宜对象的一个属性，设置这个属性为true能阻挠事宜进一步流传。

2.preventDefault

preventDefault要领用于作废事宜的默许操纵，比方a链接的跳转行动和表单自动提交行动就可以用preventDefault要领来作废。代码以下：

<a id="go" href="https://www.baidu.com/">制止跳转</a>
var go = document.getElementById('go');

function goFn(event) {
    event.preventDefault();

    console.log('我没有跳转！');
}

go.addEventListener('click', goFn, false);

经由过程preventDefault，我们胜利阻挠了a链接的跳转行动。不过，在IE9之前的浏览器中须要设置returnValue属性为false来完成。以下：

function goFn(event) {
    event = event || window.event;
    
    if (event.preventDefault) {
        event.preventDefault();
    } else {
        event.returnValue = false;
    }
    
    console.log('我没有跳转！');
}

除了以上Event对象的两个重要要领，当前DOM事宜范例草案在Event对象上还定义了另一个要领，命名为stopImmediatePropagation。

3.stopImmediatePropagation

和stopPropagation比拟，stopImmediatePropagation一样可以阻挠事宜的流传，差别点在于其还可以把这个元素绑定的同范例事宜也阻挠了。如：

var go = document.getElementById('go');

function goFn(event) {
    event.preventDefault();
    event.stopImmediatePropagation(); // 阻挠事宜冒泡并阻挠同范例事宜
    
    console.log('我没有跳转！');
}

function goFn2(event) {
    console.log('我是同范例事宜！');
}

go.addEventListener('click', goFn, false);
go.addEventListener('click', goFn2, false);

我们在a链接上继承加了一个点击事宜，假如我们在goFn要领中添加了stopImmediatePropagation要领，那末goFn2要领将不会被实行，同时也不会将点击事宜冒泡至上层。

须要注重的是，stopImmediatePropagation现在一部分浏览器尚不支撑，然则像jQuery如许的库封装了跨平台的stopImmediatePropagation要领。

Event对象属性

与Event对象的要领比拟，因Event对象的属性相对较多，文本没法逐一解说，所以重要引见现实项目中经常使用的Event对象属性。

1.type属性

经由过程type我们可以猎取事宜发作的范例，比方点击事宜我们猎取的是’click’字符串。

var go = document.getElementById('go');

function goFn(event) {
    console.log(event.type); // 输出'click'
}

go.addEventListener('click', goFn, false);

2.target属性

target属性重要用于猎取事宜的目的对象，比方我们点击a标签猎取的是a标签的html对象。

var go = document.getElementById('go');

function goFn(event) {
    var target = event.target;
    
    console.log(target === go) // 返回true
}

go.addEventListener('click', goFn, false);

在IE8及之前版本，我们须要运用srcElement而非target。兼容计划以下：

function goFn(event) {
    var event = event || window.event,    
        target = event.target || event.srcElement;
    
    console.log(target === go) // 返回true
}

3. 鼠标事宜属性

在用鼠标触发事宜时，重要的事宜属性包括鼠标的位置和按键的状况，比方：clientX和clientY指定了鼠标在窗口坐标中的位置，button和which指定了按下的鼠标键是哪一个。

function moveFn(event) {
    console.log(event.screenX) // 猎取鼠标基于屏幕的X轴坐标
    console.log(event.screenY) // 猎取鼠标基于屏幕的Y轴坐标
    console.log(event.clientX) // 猎取鼠标基于浏览器窗口的X轴坐标
    console.log(event.clientY) // 猎取鼠标基于浏览器窗口的Y轴坐标
    console.log(event.pageX) // 猎取鼠标基于文档的X轴坐标
    console.log(event.pageY) // 猎取鼠标基于文档的Y轴坐标
}

function clickFn(event) {
    console.log(event.button) // 猎取鼠标按下的键。非IE浏览器中0为鼠标左键，1为鼠标中键，2为鼠标右键
    console.log(event.which) // 猎取指定事宜上哪一个键盘键或鼠标按钮被按下
}

document.addEventListener('mouseover', moveFn, false);
document.addEventListener('click', clickFn, false);

4.键盘事宜属性

在用键盘触发事宜时，重要的事宜属性包括键盘的按键keyCode和是不是按下特别键，比方：keyCode指定了按下键的键码值，ctrlKey指定是不是按下了ctrl键。

function keyFn(event) {
    console.log(event.keyCode); // 猎取按下键的键码值
    console.log(event.ctrlKey); // 猎取是不是按下了ctrl键
    console.log(event.shiftKey); // 猎取是不是按下了shift键
    console.log(event.altKey); // 猎取是不是按下了alt键
    console.log(event.metaKey); // 猎取是不是按下了meta键
}

document.addEventListener('keyup', keyFn, false);

相似的事宜属性另有表单事宜属性和window事宜属性等，这里不再做细致引见。有兴致的同砚可以查阅相干材料。

总结

本文重要解说了DOM事宜中Event对象的经常使用属性和要领，同时也引见了其在IE中的兼容性问题及解决计划。但是关于DOM事宜的知识点远不止这些，愿望仅此可以协助初识DOM的开发者。

备注：文本参考自《Javascript威望指南》一书及慕课网教程《DOM事宜揭秘》。

本文为劳卜原创文章，首发于微信民众号：前端呼啦圈（Love-FED）
转载请说明来自——微信民众号：前端呼啦圈（Love-FED）

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