5.给对象设置事件
(1)对象内嵌属性<ELEMENT EventName = "FuncationName();" >
例:<input type=”button” onclick=”fn_Save()”/>
事件名不区分大小写
(2)对象属性<ObjectName>.<EventName>=<FunctionName>
例:document.getElementById(“btnSave”).onclick = fn_Save;
事件名区分大小写
(3) <ObjectName>.attachEvent(<EventName>,<FunctionName>)
例:document.getElementById(“btnSave”). attachEvent(“onclick”,fn_Save);
通过attachEvent给对象设置事件允许一个对象有多个处理方法。
document.getElementById(“btnSave”). attachEvent(“onclick”,fn_Save1);
document.getElementById(“btnSave”). attachEvent(“onclick”,fn_Save2);
document.getElementById(“btnSave”). attachEvent(“onclick”,fn_Save3);
执行顺序为fn_Save3? fn_Save2? fn_Save1
事件名区分大小写
使用detachEvent分离事件处理函数
[object].attachEvent(“name_of_event_handler”,fnHandler);
[object].detachEvent(“name_of_event_handler”,fnHandler);
这种处理方法只在IE上有效,Mozilla系列需要使用addEventListener方法给对象设置事件,使用removeEventListener方法删除事件处理函数。
[object].addEventListener(“name_of_event”,fnHandler,bCapture);
[object].removeEventListener(“name_of_event”,fnHandler,bCapture);
document.getElementById(“btnSave”). addEventListener (“onclick”,fn_Save,false);
(4)命名脚本 <SCRIPT FOR = object EVENT = EventName>
例:
<script for=btnSave event=onclick>
…
</script>
这种处理方法只在IE上有效。
For和event属性值可以使用引号括起来,也可以不括。
事件名区分大小写
6.事件代理
以下代码使用事件代理,可以直接处理,无需遍历
<ul id="resource">
<li><a href="http://www.163.com">http://www.163.com"</a></li>
<li><a href="http://www.sina.comcn">http://www.sina.com.cn"</a></li>
<li><a href="http://www.lmwlove.com">http://www.lmwlove.com"</a></li>
<li><a href="http://www.qq.com">http://www.qq.com"</a></li>
</ul>
//使用事件代理
var resource = document.getElementById("resource");
resource.attachEvent("onclick", fn_navigate);
function fn_navigate() {
var target = event.srcElement;
if (target.nodeName.toLowerCase() == "a") {
alert(target);
return false;
}
}
7.冒泡型事件IE:
具体html元素 父元素1 父元素N body html document
可以通过window.event.cancelBubble = true不向上冒泡。