请说明JavaScript中处理事件的步骤,说说步骤吧,谢谢

2022-03-22 科技 79阅读
Javascript中事件处理
事件处理分为三个阶段:捕获-处理-起泡。

以点击按钮为例:
捕获阶段:由外层到内层,首先调用给Window注册的click捕获阶段监听方法,然后document、body、一层层的父节点,一直到按钮本身。

处理阶段:调用按钮本身的click监听方法。

起泡阶段:从按钮开始,从内层到外层,依次调用各级父节点的起泡阶段监听方法,直到Window。

但是,对于IE8及更低版本IE,不支持捕获阶段,因此捕获阶段的事件监听目前尚不通用。

通常的事件处理方法形式为:

[javascript]viewplaincopy
functioneventHandler(e){
e=e||window.event;
vartarget=e.target||e.srcElement;
......

}
e为事件对象,当事件触发时,作为参数传进来,但对于IE8及更低版本IE不适用,只能通过全局的event变量访问,好在不会出现同时处理两个事件的情况。

如何注册事件监听方法?
(1)直接写在HTML里,DOM元素的属性里。

[javascript]viewplaincopy
CLICK
CLICK2

(2)在Javascript中,赋值给相应的DOM元素。

[javascript]viewplaincopy
document.getElementById('btn2').onclick=eventHandler;

(3)addEventListener

[javascript]viewplaincopy
document.getElementById('btn2').addEventListener('click',eventHandler,false);

这里第三个参数是标识何时触发eventHandler,false表示在事件起泡阶段触发,true表示在事件捕获阶段触发。因为在IE8即更低版本不支持事件捕获,因此不经常使用true。
可以给同一个控件调用多次此注册方法,注册多个handler。
removeEventListener与之对应。

在IE8及更低版本IE中,使用attachMent代替。

[javascript]viewplaincopy
document.getElementById('btn2').attachEvent('onclick',eventHandler);
此时,浏览器仅支持事件起泡,不支持事件捕获,因此无第三个参数。

detachEvent与之对应。

阻止浏览器默认操作
对于通过第一种、第二种方法注册的监听方法,返回值如果为false,就阻止进一步的浏览器默认操作。以超链接为例:

[javascript]viewplaincopy
http://www.baidu.com"onclick="alert(1);returnfalse">LINK

点击了这个LINK后,因为返回值为false,因此不会跳转到百度首页(默认操作)。

对于通过第三种方法注册的监听方法,返回值无效,可以通过event.preventDefault()来阻止浏览器的默认操作。对于IE8即更低版本IE,不支持preventDefault方法,只能通过event.returnValue=false来实现。因此,阻止浏览器默认操作的通用写法为:

[javascript]viewplaincopy
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue=false;//IE8-
}

阻止事件起泡

[javascript]viewplaincopy
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble=true;
}
声明:你问我答网所有作品(图文、音视频)均由用户自行上传分享,仅供网友学习交流。若您的权利被侵害,请联系fangmu6661024@163.com