【1】http://www.cnblogs.com/hh54188/archive/2012/02/08/2343357.html
【2】http://www.cnblogs.com/hh54188/archive/2012/02/17/2355658.html
1. 冒泡和捕获
2. 绑定机制
(1)行内事件绑定模型 inline event registration model
行内事件绑定模型的缺陷: javascript脚本与HTML标签混在一起,而且如果页面上有不止一个超链接需要同样的处理函数,需要写很多遍,在重复的同时也给维护带来了困难。
http://www.digital-web.com/articles/separating_behavior_and_structure_2/
或者
默认行为 default action
有默认行为的元素有:超链接,onload, unload(?浏览器事件响应)
当我们点击超链接时,他会首先触发doSomething(),然后转到google。
阻止默认行为
无法阻止的默认行为:unload
- 使用返回值false阻止默认行为,这种情况下他会触发doSomething(),但是不会跳转到google
- W3C: preventDefault()
【2】中提高更改window.status,使用Chrome/Firefox/IE10没有更改,网上有人说是出于安全性考虑。
(2)传统事件绑定模型(【2】中的说法)
优点: 跨浏览器绑定事件的唯一方式
局限性:只能绑定一个函数,确切的说添加和删除绑定的多个函数的时候比较复杂(【2】)
element.onclick = doSomething;
【2】中提到“事件名称”必须是小写;赋值的函数doSomething不带括号。
赋值的函数带括号
element.onclick = doSomething(); //将doSomething()函数执行的结果赋值给whatever, 在执行这条赋值语句的时候,doSomething()被执行
赋值的函数不带括号
element.onclick = doSomething; //将doSomething函数绑定在onclick上,当onclick事件发生时,doSomething()被执行
(3.1)W3C事件绑定
优点:可以绑定任意数量的处理函数
缺点:无法找出某个元素绑定的函数(DOM Level 3中有,但是还没有被浏览器支持)
使用addEventListener()绑定函数,三个参数分别为:
- 事件类型eventType,可以是click, mouseout, mouseover等
- 需要执行的函数doSomething
- 布尔值boolean,true 或 false,表示处理函数在事件捕获阶段还是冒泡阶段执行,false表示冒泡阶段执行,true表示捕获阶段执行
element.addEventListener(eventType, doSomething, boolean);
疑问:addEventListener不会阻止默认行为?(学习完后回来)
(3.2)微软事件绑定 【2】
如果和W3C模型比较,微软模型有两个严重的缺陷:
- 事件总是冒泡的,没有捕获的可能性
- 处理函数总是被引用,而非复制。所以其中的this关键字总是指向window,一点用都没有。
使用attachEvent绑定函数:
element.attachEvent('click', doSomething);
移除绑定使用:
element.detachEvent('click', doSomething)