Javascitp事件绑定方式之差异
2013-07-09 00:00
260 查看
关于javascript事件绑定的资料网上已有很多,这里总结自己使用过程中遇到的问题及得出的想法。
事件绑定的方式
1. 在DOM中直接绑定,如onlick=”function(){}”
2. DOM对象属性绑定,如obj.onclick=function(){}
3. DOM对象obj.attachEvent("onclick",function(){}) 进行绑定
某日做一ajax分页显示
html代码如下:
Javascript代码如下:
出现问题
页面加载完毕,点击页码内容刷新,再次点击页码内容不刷新
解决办法
很笨的方法,换成了第一种绑定方式
分析原因
通过第二种方式进行事件绑定时,随着页面加载完成,页面里现有的$(‘span’)对象的onclick属性值为page,当使用ajax请求刷新列表内容后,新的$(‘span’)对象的onclick属性并不是page值,导致再次点击不刷新。
第二种解决办法
刚才看了万戈的闲谈 JavaScript 之事件绑定,受到启发,觉得应该可以通过把事件的绑定上移至父级元素(‘. pagelist’)去解决这个问题。
表单验证上的差异
<form action=”” method=”post” onsubmit=”return function(){}”>
采用这种方式进行绑定,在浏览器调试模式下修改代码删除onsubmit=”return function(){}”表单就可以不验证直接提交。如果采用DOM对象属性绑定,即使代码被修改仍无法跳过js表单验证。
事件绑定的方式
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表单验证。
相关文章推荐
- 关于点击click事件以及事件绑定的方式
- jQuery三种事件绑定方式.bind(),.live(),.delegate()
- 事件绑定的几种常见方式
- jQuery绑定事件-多种实现方式总结
- 【jquery】jquery绑定事件的方式 bind() delegate() live()以及on()
- jQuery为动态元素绑定事件的方式
- 浅谈Jquery中的bind(),live(),delegate(),on()绑定事件方式
- Javascript事件绑定的几种方式
- js绑定事件的常用方式
- Android为按钮控件绑定事件的五种实现方式
- jquery绑定事件的三种方式详解
- Dom事件的三种绑定方式
- 详解react关于事件绑定this的四种方式
- jQuery四种事件绑定方式.bind(),.live(),.delegate(),on()的区别
- jquery动态为添加的元素绑定事件如果需要两种以上形参的话拼接方式
- jquery中取消和绑定hover事件的正确方式
- jQuery四种事件绑定方式.bind(),.live(),.delegate(),on()的区别
- JavaScript---事件绑定方式(传递参数)
- 事件绑定的几种常见方式
- D 04_JS事件的两种绑定方式,元素绑定和DOM绑定