1.javascript中为元素添加事件处理程序的方法
有以下几种方式,可以为javascript元素添加事件处理程序
(1) 直接将事件处理代码写在html中
(2) 定义一个函数，赋值给html元素的onXXX属性
(3) 使用element.onXXX方式
以上三种方式,请看下面代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <title>添加事件的方法</title> <style> div {border:1px solid blue;margin:10px;} div#divGrandpa {padding:10px;background-color:#aaaaaa;} div#divFather {padding:10px;background-color:#bbbbbb;} div#divSon {padding:10px;background-color:#cccccc;} </style> </head> <body> <div id="divGrandpa" style="width:500px;height:20px;" onclick="alert('直接将事件处理代码写在html中');">(1) 直接将事件处理代码写在html中 </div> <div id="divFather" style="width:500px;height:20px;" onclick="clk()" >(2) 定义一个函数，赋值给html元素的onXXX属性 </div> <div id="divSon" style="width:500px;height:20px;" >(3) 使用element.onXXX方式 </div> </div> </body> <script> function clk() { alert('定义一个函数，赋值给html元素的onXXX属性'); } function clk1() { alert('使用element.onXXX方式'); } var clkEle = document.getElementById('divSon'); //这种方式,必须将本行代码放到上面的html代码<div ...>后面, //否则导致找不到divSon,返回null clkEle.onclick = clk1; </script> </html>
(4) 使用addEventListener或attachEvent
这是目前推荐的方式，较前两种方式功能更为强大，可以为元素添加多个事件handler，
支持事件冒泡或捕获，前三种方式默认都是冒泡。
IE6/7/8仍然没有遵循标准而使用了自己专有的attachEvent，且不支持事件捕获。
注意attachEvent的第一个参数需要加上个"on"，比如click事件时,传递参数需要是on+click=onclick
addEventListener第三个参数为false表示事件冒泡，true
attachEvent没有第三个参数，默认就是冒泡，没有捕获。
这种方式代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <title>浏览器事件机制——冒泡处理</title> <style> div {border:1px solid blue;} div#divGrandpa {padding:40px;background-color:#f00;} div#divFather {padding:40px;background-color:#0f0;} div#divSon {padding:40px;background-color:#00f;} </style> </head> <body> <div id="divGrandpa" style="width:300px;height:200px;" > I am Grandpa <div id="divFather" style="width:200px;height:120px;" > I am father <div id="divSon" style="width:100px;height:40px;" > 点击我 I am son </div> </div> </div> <script> function showSon() { alert("I am son"); } function showFather() { alert("I am father"); } function showGrandpa() { alert("I am Grandpa"); } var grandpa = document.getElementById("divGrandpa"); var father = document.getElementById("divFather"); var son = document.getElementById("divSon"); if(window.addEventListener) { grandpa.addEventListener("click", showGrandpa, true); father.addEventListener("click", showFather, true); son.addEventListener("click", showSon, true); } else if (window.attachEvent) { grandpa.attachEvent("onclick", showGrandpa); father.attachEvent("onclick", showFather); son.attachEvent("onclick", showSon); } </script> </body> </html>
2. 事件模型与事件传播
javascript的事件模型可以分为2个级别DOM0,DOM1,DOM2
(参考:http://www.trans4fun.org/2011/12/%E3%80%90javascript%E4%BA%8B%E4%BB%B6%E7%B3%BB%E5%88%97%E3%80%91dom%E4%BA%8B%E4%BB%B6%E6%9C%BA%E5%88%B6%E7%AE%80%E6%98%8E%E6%95%99%E7%A8%8B/)
注:这里DOM1级别的似乎有误,没有DOM1级别事件.
注:似乎有DOM3了,但是貌似跟事件关系不大,可参考http://blog.sina.com.cn/s/blog_825442790101354v.html
前面说的添加时间处理程序方式(1)(2)(3)中处理方式就是DOM0级别的,
方式(3)的好处是将JavaScript和HTML分离开来。
它通过给HTML元素设置一个属性，该属性是一个回调函数来实现事件的注册。
然而，这种方式给一个元素的同一事件只允许一个处理器。
方式(4)是DOM级别2,对于DOM级别2的事件最大的好处就是一个事件可以注册许多处理器。
不仅如此，你还可以指定处理器是在捕获阶段还是冒泡阶段被触发（
通过设置”addEventListener()”函数的第三个参数来指定 – true表示在捕获阶段，false表示在冒泡阶段）
(注:没有DOM1级的事件:DOM级别1于1998年10月1日成为W3C推荐标准。
1级DOM标准中并没有定义事件相关的内容，所以没有所谓的1级DOM事件模型。
参考:http://blog.ueder.info/333.html)
事件传播的过程详解:
(1)DOM0级的事件模型中,浏览器把时间分派给发生事件的文档元素,那个对象具有适合的时间句柄,就运行这个句柄.
除此之外,不用执行其他操作.(摘自JavaScript权威指南,犀牛书第5版400页.)
实际测试发现,DOM0级别的方式定义的事件,默认是冒泡的.
比如下面的代码:
在div标签的onclick的onclick属性中指定事件处理函数.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <title>浏览器事件机制——冒泡处理</title> <style> div {border:1px solid blue;} div#divGrandpa {padding:40px;background-color:#f00;} div#divFather {padding:40px;background-color:#0f0;} div#divSon {padding:40px;background-color:#00f;} </style> </head> <body> <div id="divGrandpa" style="width:300px;height:200px;" onclick="showGrandpa();" > I am Grandpa <div id="divFather" style="width:200px;height:120px;" onclick="showFather();"> I am father <div id="divSon" style="width:100px;height:40px;" onclick="showSon();" > 点击我 I am son </div> </div> </div> <script> function showSon() { alert("I am son"); } function showFather() { alert("I am father"); } function showGrandpa() { alert("I am Grandpa"); } </script> </body> </html>