Javascitp事件绑定方式之差异

原创
2013/07/09 14:38
阅读数 597

关于javascript事件绑定的资料网上已有很多,这里总结自己使用过程中遇到的问题及得出的想法。

事件绑定的方式
1. DOM中直接绑定,如onlick=”function(){}”
2. DOM对象属性绑定,如obj.onclick=function(){}
3. DOM对象obj.attachEvent("onclick",function(){}) 进行绑定

某日做一ajax分页显示
html代码如下:

<p class="pagelist"> 
    <span class="cur">1</span> 
    <span>2</span> 
    <span>3</span>
</p>

Javascript代码如下:

$(‘span’).click(page);
Function page(){
    //发送请求,接收新页面内容,并生成新的分页列表
    $.post(url,postdata,function(data){
        $(‘. pagelist’).html(data.pagelist);
    },”json”)
}

出现问题
页面加载完毕,点击页码内容刷新,再次点击页码内容不刷新

解决办法
很笨的方法,换成了第一种绑定方式

<p class="pagelist"> 
    <span class="cur" onclick=”page()”>1</span> 
    <span onclick=”page()”>2</span> 
    <span onclick=”page()”>3</span>
</p>
Function page(){
    //发送请求,接收新页面内容,并生成新的分页列表,且新的分布列表里包含onclick绑定
    $.post(url,postdata,function(data){
        $(‘. pagelist’).html(data.pagelist);
    },”json”)
}

分析原因
通过第二种方式进行事件绑定时,随着页面加载完成,页面里现有的$(‘span’)对象的onclick属性值为page,当使用ajax请求刷新列表内容后,新的$(‘span’)对象的onclick属性并不是page值,导致再次点击不刷新。

第二种解决办法
刚才看了万戈的闲谈 JavaScript 之事件绑定,受到启发,觉得应该可以通过把事件的绑定上移至父级元素(‘. pagelist’)去解决这个问题。

 表单验证上的差异
<form action=”” method=”post” onsubmit=”return function(){}”>
采用这种方式进行绑定,在浏览器调试模式下修改代码删除onsubmit=”return function(){}”表单就可以不验证直接提交。如果采用DOM对象属性绑定,即使代码被修改仍无法跳过js表单验证。




展开阅读全文
打赏
0
13 收藏
分享
加载中
更多评论
打赏
0 评论
13 收藏
0
分享
返回顶部
顶部