DOM事件基础（二）

 Event对象

 

Event对象其实是一个事件处理程序的参数，当调用事件时，我们只需要将其传入事件函数就可以获取。代码如下：

function getEvent(event){

event = event || window.event;

}

 

上面的事件是将函数传入一个名为Event的参数作为事件对象,同事做了浏览器的兼容处理.

在IE8以前版本之中,通过设置属性注册事件处理程序时,调用的时候并未传递事件对象,需要通过全局对象

window.event来获取,所以上述代码中我们使用||来做判断如果event对象存在则使用event，不存在则使用window.event。

 

1.stopPropagation

 

stopPropagation方法主要用于阻止事件的进一步传播，比如阻止事件继续向上层冒泡

 

function getEvent(event){

event = event||window.event;

if(event.stopPropagation){

event.stopPropagation();

}else{

event.cancelBubble = ture;

}

}

 

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方法

 

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);

 

以上的这些知识点只是一些比较基础的知识 更多知识 随后更新

 

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