事件处理机制

JavaScript中事件处理
事件处理分为三个阶段:捕获 - 处理 - 起泡。

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

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

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

function eventHandler(e) {  
    e = e || window.event;  
    var target = e.target || e.srcElement;  
    ... ...  
      
} 

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

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

<button id="btn" onclick="alert(123)">CLICK</button>  
<button id="btn2" onclick="eventHandler()">CLICK2</button>  

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

document.getElementById('btn2').onclick = eventHandler;  

(3)addEventListener

document.getElementById('btn2').addEventListener('click',eventHandler, false)

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

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

document.getElementById('btn2').attachEvent('onclick', eventHandler);

此时,浏览器仅支持事件起泡,不支持事件捕获,因此无第三个参数。
detachEvent与之对应。

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

<a href="http://www.baidu.com" onclick="alert(1);return false">LINK</a>  

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

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

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

阻止事件起泡

if(e.stopPropagation) {  
    e.stopPropagation();  
} else {  
    e.cancelBubble = true;  
}  
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,948评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,371评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,490评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,521评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,627评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,842评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,997评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,741评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,203评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,534评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,673评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,339评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,955评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,770评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,000评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,394评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,562评论 2 349

推荐阅读更多精彩内容

  • 以下文章为转载,对理解JavaScript中的事件处理机制很有帮助,浅显易懂,特分享于此。 什么是事件? 事件(E...
    jxyjxy阅读 3,030评论 1 10
  • 与界面编程紧密相关的就是事件处理机制,当用户在程序界面上执行各种操作时,应用程序必须为用户动作提供响应动作,这种响...
    GB_speak阅读 2,312评论 0 3
  • 1 概述 当Android系统捕获到触摸事件后,如何准确地传递给真正需要这个事件的View呢?Android系统给...
    小芸论阅读 5,019评论 2 38
  • js事件的三个阶段分别为:捕获、目标、冒泡事件捕获:父级元素先触发,子元素后触发W3C--addEventList...
    饭饭七阅读 583评论 0 0
  • 前言 你的时间有限,不要浪费于重复别人的生活。不要让别人的观点淹没了你内心的声音。 Android事件处理概述 A...
    olaH阅读 1,913评论 0 2