Javascitp事件绑定方式之差异

关于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表单验证。

来源：oschina

链接：https://my.oschina.net/u/582290/blog/143426

标签

javascript

事件绑定