JavaScript事件漫谈

2018/03 15 12:03

内容概要:

event对象,事件在多个浏览器中的兼容,事件的传播机制,JS自定义事件,jQuery的自定义事件的绑定与触发

Event对象

Event对象属于HTML DOM对象。Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。事件通常与函数结合使用,函数不会在事件发生前被执行!

标准Event属性

标准Event方法

想要了解更多Envent对象信息,请访问:

http://www.w3school.com.cn/jsref/dom_obj_event.as

事件在多个浏览器中的兼容:

IE是把event事件对象作为全局对象window的一个属性;可以使用event或window.event来访问;FireFox和Chrome等主流浏览器是通过把【事件对象】作为【事件响应函数】的【参数】进入传入的。当然我们还需要注意Event对象在不同浏览器中的属性和方法会所有不同,需要我们具体使用时注意做兼容。

//兼容性的写法示例:

domElement.onclick = function(e) {

e = e || window.event; //或(||)书写顺序有讲究,不能随意换

}

事件一般可以分为:鼠标事件,键盘时间,接口事件,以及自定义事件

事件的传播机制:

两种模型

以前,Netscape和Microsoft是不同的实现方式。

Netscape中,div先触发,这就叫做事件捕获。

Microsoft中,p先触发,这就叫做事件冒泡。

两种事件处理顺序刚好相反。IE只支持事件冒泡,Mozilla, Opera 7 和 Konqueror两种都支持,旧版本的Opera's 和 iCab两种都不支持 。

事件捕获

当你使用事件捕获时,父级元素先触发,子级元素后触发,即div先触发,p后触发。

事件冒泡

当你使用事件冒泡时,子级元素先触发,父级元素后触发,即p先触发,div后触发。

W3C模型

W3C模型是将两者进行中和,在W3C模型中,任何事件发生时,先从顶层开始进行事件捕获,直到事件触发到达了事件源元素。然后,再从事件源往上进行事件冒泡,直到到达document。

程序员可以自己选择绑定事件时采用事件捕获还是事件冒泡,方法就是绑定事件时通过addEventListener函数,它有三个参数,第三个参数若是true,则表示采用事件捕获,若是false,则表示采用事件冒泡。

ele.addEventListener('click',doSomething2,true)

true=捕获

false=冒泡

传统绑定事件方式

在一个支持W3C DOM的浏览器中,像这样一般的绑定事件方式,是采用的事件冒泡方式。

ele.onclick = doSomething2

IE浏览器

如上面所说,IE只支持事件冒泡,不支持事件捕获,它也不支持addEventListener函数,不会用第三个参数来表示是冒泡还是捕获,它提供了另一个函数attachEvent。

ele.attachEvent("onclick", doSomething2);

附:事件冒泡(的过程):事件从发生的目标(event.srcElement||event.target)开始,沿着文档逐层向上冒泡,到document为止。

事件的传播是可以阻止的:

• 在W3c中,使用stopPropagation()方法

• 在IE下设置cancelBubble = true;

在捕获的过程中stopPropagation();后,后面的冒泡过程也不会发生了~

3.阻止事件的默认行为,例如click <a>后的跳转~

• 在W3c中,使用preventDefault()方法;

• 在IE下设置window.event.returnValue = false;

不是所有的事件都能冒泡,例如:blur、focus、load、unload

 

JS自定义事件

谷歌、火狐自定义JavaScript事件

1、创建事件;

document.createEvent('HTMLEvents');

参数是字符串类型,表示要创建的事件类型。

uievents;

mutationevents;

htmlevents;

2、初始化事件;

ev.initEvent('listen', false, false);

参数说明:

eventType:事件名称;

canBubble:事件是否冒泡;

cancelable:是否可以用 preventDefault() 方法取消事件;

3、监听事件;

document.addEventListener(dataavailable, handler, param3);

参数说明:

dataavailable:监听的事件名称;

handler:处理函数;

param3:是否是扑获事件模型;

4、触发事件;

document.dispatchEvent(ev);

参数说明:

ev:第一步所创建的事件对象;

5、移除事件;

移除监听removeEventListener及ev.stopPropagation()

 

 

IE自定义JavaScript事件

注意,以上方式只适用于谷歌,如果希望IE也能够兼容,要并上兼容IE的方式。

其中谷歌与IE的对应关系为:

谷歌、火狐 IE
createEvent、initEvent createEventObject
addEventListener attachEvent
dispatchEvent fireEvent

IE自定义事件示例:

 

 

 

jQuery的自定义事件的绑定与触发

jQuery绑定与触发自定义事件更加方便,而且兼容性更好。

 

--转载请注明: https://www.guangboyuan.cn/javascript%e4%ba%8b%e4%bb%b6%e6%bc%ab%e8%b0%88/

发表回复

(必填)