欢迎来到.net学习网

欢迎联系站长一起更新本网站!QQ:879621940

您当前所在位置:首页 » Html » 正文

热门阅读

给对象设置事件与事件代理

创建时间:2012年05月16日 15:32  阅读次数:(5106)
分享到:

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不向上冒泡。
来源:.net学习网
说明:所有来源为 .net学习网的文章均为原创,如有转载,请在转载处标注本页地址,谢谢!
【编辑:Wyf

打赏

取消

感谢您的支持,我会做的更好!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

最新评论

共有评论0条
  • 暂无任何评论,请留下您对本文章的看法,共同参入讨论!
发表评论:
留言人:
内  容:
请输入问题 64+23=? 的结果(结果是:87)
结  果: