新手总是时不时会纠结一下 点击事件
我们都知道这些小东西不难 但是偶尔难道不会想想我们可能对这些即使小kiss的问题的认知其实不够清晰 一个认识不清晰的东西使用时 总会有油然而生的不安感 从而用的不放心 不舒坦 何况细节上的处理总是最能表现一个人实际经验是否丰富 技术水平是否可以称为高手的地方 导入jquery.js文件库之后1
以上为最常见的写法 用jquery与coffeescript后
1
传统dom里的click 首先应该知道有个html有个事件属性 onclick 从而很方便的在onclick里直接调用function
而function定义在js脚本文件里 所有主流浏览器都支持此属性 如1 2
或者οnclick="return regexp()" 效果一样的,不用纠结
form表单里 则常用有onsubmit属性 在点击调交后,文档尚未发送请求前 同步地激活调用的function 用来进行验证，多原始和简单的验证方式
这样function里若return了 false 请求就不会发送14 5
function里有的人会简写成 return; 不写false,return为空为null将同样终止function执行 其效用和return false是完全一样的 因为return false后 其后的语句同样不会被执行 return false的目的: 就是终止函数执行
概括一下， 函数里return后的语句不会被执行 无论return的是什么 true or false or null or whatever
需要注意的是逻辑上 跳转action 与function是否执行 是独立的两部分 w3c也不会把它们混杂在一起
onsubmit这里有必要解释一下 οnsubmit="return go_pass()"当你需要做一个对是否执行function后跳转action的判断时 请使用 οnsubmit="return go_pass()"曾经我见过很奇怪的一种写法
1
想说这个完全是反面教材 首先不论能否达到目的
最直接的理由是逻辑混乱 语义化不明 以上关于return 或者不加return 对a标签的跳转和onclick的影响也是适用的 (return 会阻止浏览器默认的行为)只有极少数html元素没有onclick事件属性 这些元素 为<base>、<bdo>、<br>、<head>、<html>、<iframe>、<meta>、<param>、<script>、<style> 或 <title>
结果是只要是想加点击事件的元素都支持onclick事件属性就是了此外还有一种传统dom里的onclick 事件属性写法(只是换了种方式罢了,另外也比较少见,但是是等价于onclick的)1 document.getElementById("tea").οnclick=function(){2 console.log('check a');3 return false;4 console.log('check');5 };
至于经验丰富的人用的多的是
1 $("p").bind("click", function(){2 console.log( $(this).text() );3 }); 或者 视情况（涉及到异步加载进来的元素或者脚本时，由于页面渲染已经完成，事件已经绑定过一次，或者....通过事件委托和起泡,绑定点击事件）
1 $("body").on("click",'.resp_click' function(){2 console.log( 'xxxx' );3 }); 对于未来可能会新加进来的元素仍能起效的, jquery除了on,以前还有一个live(不过1.9后官方已废弃了,目前用着1.8.2的jquery中文api译本的童鞋大概需要注意下)
这样做有些好处 当某个情况下我不要这个点击事件时我可以解绑,可以很方便的传递数据等(详见jquery手册bind 与unbind on 与off)
1 function handler(event) {2 cosole.log(event.data.foo);3 }4 $("p").bind("click", {foo: "bar"}, handler)5 //和6 $("p").unbind( "click" ); 另外onclick有好几种写法 现在网页上的点击事件有很多其实是这样的 <a href="javascript:void(0)" οnclick="do()">xxxxx</a> 并不推荐在a的href里使用javascript:协议 可能会遇到问题 比如这会导致点击时在ie下gif停止播放
其实可以这样
<a href="#" οnclick="do();return false;">xxxx</a> 但这样在ie6下可能会由于href先触发 页面刷新了一次而使浏览器舍弃了do()的执行 不过好的是现在是2015年,ie6已经可以说退出历史舞台了此外较少见的方式还有(其实也不少见,新人估计会少见趴)
1 element.addEventListener('click', function() { xxxxxx }, false); 需要注意的是在ie9及以上 才可用 但支持主流浏览器
ie9以下 请使用：element.attachEvent('onclick', function() { xxxxx }); 此方式也work 用起来感觉很棒 尤其是在最近开始火起来的移动端互联网开发里 有一个touch 事件 这些响应式的网页里这种事件监听的脚本写法是很常见的 比如这样封装一下 引自 http://stackoverflow.com/questions/6348494/addeventlistener-vs-onclick1 function addEvent(element, evnt, funct){ 2 if (element.attachEvent) return element.attachEvent('on'+evnt, funct); 3 4 else return element.addEventListener(evnt, funct, false); 5 } 6 7 // example 8 addEvent( 9 document.getElementById('myElement'),10 'click',11 function () { alert('hi!'); }12 ); 或者类似这样 引自:http://jackleechina.iteye.com/blog/1595397
1 if(window.addEventListener){ // Mozilla, Netscape, Firefox 2 3 //element.addEventListener(type,listener,useCapture); 4 button.addEventListener('click', alert('11'), false); 5 button.addEventListener('click', alert('12'), false); 6 //执行顺序11 -> 12 7 } 8 else { // IE 9 10 button.attachEvent('onclick', function(){alert('21');}); 11 button.attachEvent('onclick', function(){alert('22');});12 //执行顺序22 -> 21 13 } 通用的是click点击事件 但是因为click事件在移动端会出现延迟响应的情况 约200ms,触发移动端的点击常用tap事件来代替
关于事件监听器 分离在后面的tips详细点总结下http://i.cnblogs.com/EditPosts.aspx?opt=1