]]>
- 可以对同一物g的同一事gl定多个事g处理E序?
- 可以通过事g三个阶D|好地控制何时触发事g处理E序?
- 工作?DOM 元素Q而不仅是 HTML 元素?/li>
事g分发时添?eventListener
不会立即触发 eventListenerQ可能会在下一个事件流Q比如冒泡阶D）中触发?/p>
多个相同?eventListener
如下Q三个参数完全相同，q且W二个参C是匿名函数?/p>
document.getElementById("myBox").addEventListener("click", Go, false);
document.getElementById("myBox").addEventListener("click", Go, false);
会抛弃多余的Q只保留一个，对应?removeEventListener 也只用一ơ就可以了（removeEventListener 用法?addEventListener 完全相同Q?/p>
但如果是W二个参数是匿名函数Q比如：
document.getElementById("outDiv").addEventListener("click", function () { document.getElementById("info").innerHTML += "1";}, false);
document.getElementById("outDiv").addEventListener("click", function () { document.getElementById("info").innerHTML += "1";}, false);
则三个均有效Qƈ且无法用 removeEventListener 除去?/p>
this
事g处理E序中，this 变成了触发事件的控gQ但我们仍推荐用 event.target ?event.currentTarget?/p>
早期的事件监?/span>
?DOM0 中，我们?obj.onclick = FuncNameQ由于兼Ҏ好Q应用非常广泛，只是功能不如 addEventListener 强大?/p>
内存问题
前面提到了许多用域名函数的地方Q有时这是没办法的，请参?a target="_blank">在各览器中动态添加事Ӟ参数?/a>Q但q会D内存问题?/p>
一旦事件绑定之后，该绑定代?a target="_blank">作用?/a>的变量就都保留下来，不会?JavaScript 引擎回收Q这可能会引起占用大量内存的问题Q由?removeEventListener 无法删除匿名函数的事件处理程序，只有在物Ӟ比如按钮Q去除之后，该内存才可能得到回收?/p>
事gcd
DOM 事gcd是分?UIEvent、UIEvent:KeyEvent、UIEvent:MouseEventQ不同的事g有不同的属性和ҎQ但常用的来说我们都不会用错Q比如我们不会在鼠标事g中去取键盘|Ctrl、Alt、Shift 除外Q，所以我们没有必要深I?/p>
该对象的属性和Ҏ有：
view 只读Q对象，发生事g?Window 对象?/p>
type 只读Q字W串。比如鼠标点M件的cdQclick?/p>
eventPhase 只读Q数字，事g正l历的阶Dc?Q捕P2Q目标，3Q冒泡?/p>
target 只读Q对象，z֏事g的目标对象。比如鼠标是点击在哪个按钮上的?/p>
currentTarget 只读Q对象，当前正在调用监听器的对象Q也是当前 addEventListener 是绑定在哪个对象上的?/p>
timeStamp 只读Q数字，用毫U表CZ件发生时距计机开机的旉?/p>
cancelable 只读Q布，处理事g的默认行为是否可以停止。主要针对一些系l事Ӟ如果gؓ trueQ则 event ?preventDefault Ҏ可以使用Q否则不可用?/p>
preventDefault() L览器的默认行ؓQ比如在文本框中打字触发 keydownQ如?keydown 事g处理E序中调用了 preventDefault()Q所打的字就不会跑到文本框中去，注意Q此时不要弹?alert 对话框，否则可能不v作用。IE 中在事g处理E序中用 return false 实现cM功能?/p>
bubbles 只读Q布，事g是否开启冒泡功能?/p>
stopImmediatePropagation q个东西?JavaScript 中是个属性，而不是方法，布尔Q但具体试q未发现其用途，不知是不?bug?/p>
stopPropagation() 停止当前的事件流传播Q但不会停止当前正在处理的对象。IE 中用 event.cancelBubble = true 实现cM功能?/p>
cancelBubble 布尔Q是否取消冒泡，不徏议?/span>Q用 stopPropagation() 代替?/p>
preventBubble() L冒Q?span class="caution">不徏议?/span>Q用 stopPropagation() 代替?/p>
preventCapture() L捕获Q?span class="caution">不徏议?/span>Q用 stopPropagation() 代替?/p>
detail 只读Q数字，提供旉的额外信息，对于 click 事g、mousedown 事g?mouseup 事gQ这个字D代表点ȝơ数?/p>
isChar 只读Q布，按下的按键值是否是字符Q比如按?Ctrl 键时Q就q回 false。不q您?Firefox 中测试时Q该值L falseQFirefox 官方已经说明q是一?bug?/p>
altKey 只读Q布，是否按下?Alt 键?/p>
ctrlKey 只读Q布，是否按下?Ctrl 键?/p>
shiftKey 只读Q布，是否按下?Shift 键?/p>
metaKey 只读Q布，是否按下?Meta 键?/p>
下面一些属性很有意思，请仔l区别?/span> charCode 只读Q数字，字符Q英文、数字、符P?Unicode 倹{?/p>
keyCode 只读Q数字，键盘按键倹{?/p>
button 只读Q数字，鼠标按键倹{?/p>
which 只读Q数字，键盘按键值或鼠标按键倹{?/p>
可以看出Qwhich 只有一Ҏ有包括：那就?keypress Ӟ不如 keyCode 那么全，但实际上Qkeypress 事g中用于非字符键的情况较少Q所以一般还是用 which 代替全部?/span>
]]>
2 <div id="middleDiv">
3 <div id="inDiv">请在此点击鼠标?/span></div>
4 </div>
5 </div>
6
7 <div id="info"></div>
2 var middleDiv = document.getElementById("middleDiv");
3 var inDiv = document.getElementById("inDiv");
4 var info = document.getElementById("info");
5
6 outDiv.addEventListener("click", function () { info.innerHTML += "outDiv" + "<br>"; }, false);
7 middleDiv.addEventListener("click", function () { info.innerHTML += "middleDiv" + "<br>"; }, false);
8 inDiv.addEventListener("click", function () { info.innerHTML += "inDiv" + "<br>"; }, false);
上述是我们测试的代码Q根?info 的显C来定触发的顺序，有三?addEventListenerQ?useCapture 可选gؓ true ?falseQ所?2*2*2Q可以得?8 D不同的E序?/p>
- 全ؓ false Ӟ触发序为：inDiv、middleDiv、outDivQ?
- 全ؓ true Ӟ触发序为：outDiv、middleDiv、inDivQ?
- outDiv ?trueQ其他ؓ false Ӟ触发序为：outDiv、inDiv、middleDivQ?
- middleDiv ?trueQ其他ؓ false Ӟ触发序为：middleDiv、inDiv、outDivQ?
- ……
最l得出如下结论：
- true 的触发顺序L?false 之前Q?
- 如果多个均ؓ trueQ则外层的触发先于内层；
- 如果多个均ؓ falseQ则内层的触发先于外层?/li>
下面提供全部代码Q您可以更改其中?true、false |来进行测试。注意，不适用?IE?br />
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3 <html xmlns="http://www.w3.org/1999/xhtml">
4
5 <head>
6 <meta http-equiv="Content-Language" content="zh-cn" />
7 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
8 <title>useCapture</title>
9 <style type="text/css">
10 #outDiv
11 {
12 padding:10px 10px 10px 10px;
13 border:1px solid red;
14 }
15
16 #middleDiv
17 {
18 padding:10px 10px 10px 10px;
19 border:1px solid green;
20 }
21
22 #inDiv
23 {
24 padding:10px 10px 10px 10px;
25 border:1px solid blue;
26 }
27 </style>
28 </head>
29
30 <body>
31
32 <div id="outDiv">
33 <div id="middleDiv">
34 <div id="inDiv">请在此点击鼠标?/span></div>
35 </div>
36 </div>
37
38 <div id="info"></div>
39
40 <script language="javascript" type="text/javascript">
41 <!--
42 //千一|络 www.cftea.com
43
44 var outDiv = document.getElementById("outDiv");
45 var middleDiv = document.getElementById("middleDiv");
46 var inDiv = document.getElementById("inDiv");
47 var info = document.getElementById("info");
48
49 outDiv.addEventListener("click", function () { info.innerHTML += "outDiv" + "<br>"; }, false);
50 middleDiv.addEventListener("click", function () { info.innerHTML += "middleDiv" + "<br>"; }, false);
51 inDiv.addEventListener("click", function () { info.innerHTML += "inDiv" + "<br>"; }, false);
52 //-->
53 </script>
54
55 </body>
56
57 </html>
]]>
当一个事件发生时Q分Z个阶D：
捕获阶段 从根节点开始顺序而下Q检每个节Ҏ否注册了事g处理E序。如果注册了事g处理E序Qƈ?useCapture ?trueQ则调用该事件处理程序。（IE 中无此阶Dc）
目标阶段 触发在目标对象本w注册的事g处理E序Q也U?span class="itemTitle">正常事gz֏阶段?/p>
冒阶段 从目标节点到根节点，每个节Ҏ否注册了事g处理E序Q如果注册了事g处理E序Qƈ?useCapture ?falseQ则调用该事件处理程序?
举例
2 <div id="div2">
3 <div id="div3">
4 <div id="div4">
5 </div>
6 </div>
7 </div>
8 </div>
如果?d3 上点击鼠标，事g是q样的：
捕获阶段 ?div1 处检是否有 useCapture ?true 的事件处理程序，若有Q则执行该程序，然后再同样地处理 div2?/p>
目标阶段 ?div3 处，发现 div3 是鼠标点击的节点，所以这里ؓ目标阶段Q若有事件处理程序，则执行该E序Q这里不?useCapture ?true q是 false?/p>
冒阶段 ?div2 处检是否有 useCapture ?false 的事件处理程序，若有Q则执行该程序，然后再同样地处理 div1?/p>
注意Q上q捕获阶D和冒阶段中，实际?div1 之上q应该有l点Q比如有 bodyQ但q里不讨论?/p>
JS:attachEvent和addEventListener 使用Ҏ
addEventListenerҎ 用于 Mozillapd
举例:
document.getElementById("btn").onclick = method1;document.getElementById("btn").onclick = method2;document.getElementById("btn").onclick = method3;写成q样Q?br />
var btn1Obj = document.getElementById("btn1"); //object.attachEvent(event,function);btn1Obj.attachEvent("onclick",method1);btn1Obj.attachEvent("onclick",method2);btn1Obj.attachEvent("onclick",method3);如果是MozillapdQƈ不支持该ҎQ需要用到addEventListener
var btn1Obj = document.getElementById("btn1");//element.addEventListener(type,listener,useCapture);btn1Obj.addEventListener("click",method1,false);btn1Obj.addEventListener("click",method2,false);btn1Obj.addEventListener("click",method3,false);使用实例Q?br />
1?nbsp;var el = EDITFORM_DOCUMENT.body; //先取得对象，EDITFORM_DOCUMENT实ؓ一个iframe
if (el.addEventListener){
el.addEventListener('click', KindDisableMenu, false);} else if (el.attachEvent){ el.attachEvent('onclick', KindDisableMenu);
}2?nbsp;if (window.addEventListener) { window.addEventListener('load', _uCO, false);} else if (window.attachEvent) { window.attachEvent('onload', _uCO);}]]>
|
function LTrim(str){
var i; for(i=0; i<str.length; i++){ if(str.charAt(i)!=" ") break; str=str.substring(i,str.length) ; return str; } } var i ; for(i=str.length-1; i>=0; i++){ if(charAt(i)!=" ") break; } str = str.substring(0, i+1) ; } return LTrim(RTrim(str)) ; } if(Trim(document.form1.title.value == "")){ alert("Sorry ! title is Empty !") ; document.form1.title.focus() ; return false ; } if(Trim(document.form1.cont.value == "")){ alert("Sorry ! cont is Empty !") ; document.form1.cont.focus() ; return false; } return true ; |
]]>
以下是dtree的用法示例：
1Q初始化菜单
<script type="text/javascript">
<!--
var Tree = new Array;
// nodeId | parentNodeId | nodeName | nodeUrl
Tree[0] = "1|0|Page 1|#";
Tree[1] = "2|1|Page 1.1|#";
Tree[2] = "3|1|Page 1.2|#";
Tree[3] = "4|3|Page 1.2.1|#";
Tree[4] = "5|1|Page 1.3|#";
Tree[5] = "6|2|Page 1.1.1|#";
Tree[6] = "7|6|Page 1.1.1.1|#";
Tree[7] = "8|6|Page 1.1.1.2|#";
Tree[8] = "9|1|Page 1.4|#";
Tree[9] = "10|9|Page 1.4.1|#";
Tree[10] = "11|0|Page 2|#";
//-->
</script>
2Q调用函?br /> <div class="tree">
<script type="text/javascript">
<!--
createTree(Tree,1,7); // starts the tree at the top and open it at node nr. 7
//-->
</script>
</div>
昄Q如果用动态的脚本来初始化菜单数组Qasp,jsp均可Q，那就可以很方便的实现动态的树型菜单了?/span>
2。jsp动态实?br /> 分以下步骤实现动态的树型菜单Q?br /> 1Q在数据库徏tree_info表，有nodeIdQparentNodeIdQnodeNameQnodeUrl四个字段Q来存储节点信息?br /> 2Q编写javac，用于从数据库扑և节点信息Qƈ且生成javascript脚本?br /> 3Q编写tagcR用于封装逻辑Q简化jsp的开发?br /> 4Q徏一个webE序q行试?/span>
3。详l过E?br />
1Q在数据库徏表，脚本如下Q?br />
CREATE TABLE `test`.`tree_info` (
`node_id` INTEGER UNSIGNED NOT NULL DEFAULT -1,
`parent_id` INTEGER UNSIGNED NOT NULL DEFAULT -1,
`node_name` VARCHAR(45) NOT NULL,
`ref_url` VARCHAR(45) NOT NULL,
PRIMARY KEY(`node_id`)
)
我用mysql数据库，如果脚本l节有出入，误行修?br />
按照上面的dTreeCZ插入数据
2Q编写TreeInfo.javaQ这个类用于装节点信息
package com.diegoyun.web.tree;
/**
* @author Diegoyun
* @version 1.0
*/
public class TreeInfo {
private int nodeId = -1;//node id
private int parentId = -1;//parentId
private String nodeName = null;//node name
private String url = null;//url references
public int getNodeId() {
return nodeId;
}
public void setNodeId(int nodeId) {
this.nodeId = nodeId;
}
public int getParentId() {
return parentId;
}
public void setParentId(int parentId) {
this.parentId = parentId;
}
public String getNodeName() {
return nodeName;
}
public void setNodeName(String nodeName) {
this.nodeName = nodeName;
}
public String getUrl() {
return url;
}
public void setUrl(String url) {
this.url = url;
}
}
~写TreeUtil.javaQ用于从数据库得到节点信息，装到TreeInfo对象Qƈ生成javascript脚本
TreeUtil.java
package com.diegoyun.web.tree;
import java.util.Collection;
import java.util.ArrayList;
import java.util.Iterator;
import java.util.List;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.Connection;
import java.sql.DriverManager;
/**
* @author Diegoyun
* @version 1.0
*/
public class TreeUtil {
public static List retrieveNodeInfos(){
List coll = new ArrayList();
String driverName = "com.mysql.jdbc.Driver";
String host = "localhost";
String port = ":3306";
String serverID = "test";
String userName = "root";
String userPwd = "root";
String url = "jdbc:mysql://" + host + port + "/" + serverID ;
Connection conn = null ;
PreparedStatement ps = null;
ResultSet rs = null;
try{
Class.forName(driverName).newInstance();
conn = DriverManager.getConnection(url , userName , userPwd);
String sql = "select * from tree_info";
ps = conn.prepareStatement(sql);
rs = ps.executeQuery();
TreeInfo info = null;
while(rs!=null && rs.next()){
info = new TreeInfo();
info.setNodeId(rs.getInt(1));
info.setParentId(rs.getInt(2));
info.setNodeName(rs.getString(3));
info.setUrl(rs.getString(4));
coll.add(info);
}
// if(rs!=null){
// rs.close();
// rs=null;
// }
// if(ps!=null){
// ps.close();
// ps=null;
// }
}catch(Exception e){
System.out.println(e);
}
return coll;
}
public static String createTreeInfo(List alist){
StringBuffer contents = new StringBuffer();
contents.append("<!--\n");
contents.append("var Tree = new Array;");//create a array in javascript
TreeInfo info =null;
for(int max = alist.size(),i=0;i<max;i++){
info = (TreeInfo)alist.get(i);
//define elements of array
contents.append("Tree[");
contents.append(i);
contents.append("]=\"");
contents.append(info.getNodeId());
contents.append("|");
contents.append(info.getParentId());
contents.append("|");
contents.append(info.getNodeName());
contents.append("|");
contents.append(info.getUrl());
contents.append("\";");
}
contents.append("docment.writer(Tree);");
contents.append("http://-->");
return contents.toString();
}
public static void main(String[]args){
List alist = TreeUtil.retrieveNodeInfos();
// TreeInfo info = null;
// for(Iterator i = c.iterator();i.hasNext();){
// info = (TreeInfo)i.next();
// System.out.println("*****" + info.getNodeName());
// }
System.out.println(TreeUtil.createTreeInfo(alist));
}
}
3)~写标签c?br />
InitTreeTag.java
package com.diegoyun.web.taglibs;
import com.diegoyun.web.tree.TreeUtil;
import javax.servlet.jsp.tagext.TagSupport;
import javax.servlet.jsp.JspException;
import java.io.IOException;
/**
* @author Diegoyun
* @version 1.0
*/
public class InitTreeTag extends TagSupport{
public int doEndTag() throws JspException {
StringBuffer tree = new StringBuffer();
tree.append("<script type=\"text/javascript\">\n");
tree.append(TreeUtil.createTreeInfo(TreeUtil.retrieveNodeInfos()));
tree.append("</script>\n");
try{
pageContext.getOut().println(tree.toString());
}catch(IOException ioe){
ioe.printStackTrace();
}
return super.doEndTag();
}
}
ShowTreeTag.java :
package com.diegoyun.web.taglibs;
import javax.servlet.jsp.tagext.TagSupport;
import javax.servlet.jsp.JspException;
import java.io.IOException;
/**
* @author Diegoyun
* @version 1.0
*/
public class ShowTreeTag extends TagSupport{
public int doEndTag() throws JspException {
StringBuffer buffer = showTree();
try {
pageContext.getOut().println(buffer.toString());
}
catch (IOException ioe) {
ioe.printStackTrace();
}
return super.doEndTag();
}
private StringBuffer showTree(){
StringBuffer sb = new StringBuffer();
sb.append("<div class=\"tree\">\n");
sb.append("<script type=\"text/javascript\">\n");
sb.append("<!--\n");
sb.append("createTree(Tree);\n");
sb.append("http://-->\n");
sb.append("</script>\n");
sb.append("</div>\n");
return sb;
}
}
标签的tld如下Q?br />
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE taglib
PUBLIC "-//Sun Microsystems, Inc.//DTD JSP Tag Library 1.2//EN"
"http://java.sun.com/dtd/web-jsptaglibrary_1_2.dtd">
<taglib>
<tlib-version>1.0</tlib-version>
<jsp-version>1.2</jsp-version>
<short-name>tree</short-name>
<!--initTreeTag-->
<tag>
<name>init</name>
<tag-class>com.diegoyun.web.taglibs.InitTreeTag</tag-class>
<body-content>empty</body-content>
</tag>
<!--ShowTreeTag-->
<tag>
<name>show</name>
<tag-class>com.diegoyun.web.taglibs.ShowTreeTag</tag-class>
<body-content>empty</body-content>
</tag>
</taglib>
4Q徏立webq程Q编写jspq行试?/span>
index.jsp如下Q?br />
<%@ page language="java"%>
<%@ taglib uri="/WEB-INF/tlds/tree.tld" prefix="tree"%>
<html>
<head>
<title>Tree example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="StyleSheet" href="tree.css" type="text/css">
<script type="text/javascript" src="tree.js"></script>
<tree:init/>
</head>
<body>
<b>Tree example :</b><br /><br />
<tree:show/>
<br /><br />
</body>
</html>
试Qenjoy yourselfQ?/span>
4。待解决问题
dTree有点bugQ如果把cssQimgQjs的\径改变，树就有可能不会正显C?nbsp;
]]>
]]>
]]>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload=initAll ;
function initAll(){
document.getElementById("test01").onclick=test ;
}
function test(evt){
var src = evt ? evt.target : window.event.srcElement ;
alert(src) ;
return false ;
}
</script>
</head>
<body>
<center>
<a id="test01">test01</a>
</center>
</body>
</html>
]]>