Javascript：绑定事件处理处器

来源：互联网发布：淘宝卡通行走人偶编辑：程序博客网时间：2024/06/05 07:56

objectTarget.addEventListener("eventType",handler,captrueFlag);

该方法为objectTarget绑定事件处理器handler.

第一个参数是事件类型字符串（例如：click keypress）

第二个参数是事件处理函数

第三个参数是监听事件传播的哪个阶段(true 表示监听捕获阶段，false表示监听的冒泡阶段).

代码如下：

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=GBK" /><title> Javascript DOM事件机制 </title></head><body><div id="test"><!-- div元素的子元素：按钮 --><input id="bn" type="button" value="想看结果就点我" /></div><hr /><div id="results"> </div><script type="text/javascript">// 事件处理函数var click1 = function(event) {// 该事件处理函数简单输出事件的当前对象document.getElementById("results").innerHTML += "事件捕获阶段: " + event.currentTarget + "<br />";}// 事件处理函数function click2(event) {// 该事件处理函数简单输出事件的当前对象document.getElementById("results").innerHTML +="事件冒泡阶段：" + event.currentTarget + "<br />";}// 为bn按钮绑定事件处理函数（捕获阶段）document.getElementById("bn").addEventListener("click" , click1 , true); // 为test对象绑定事件处理函数（捕获阶段）document.getElementById("test").addEventListener("click" , click1 , true); // 为bn按钮绑定事件处理函数（冒泡阶段）document.getElementById("bn").addEventListener("click" , click2 , false); // 为按钮所在的div对象绑定事件处理函数（冒泡阶段）。document.getElementById("test").addEventListener("click" , click2 , false);</script></body></html>

0 0