新手总是时不时会纠结一下 点击事件
我们都知道这些小东西不难 但是偶尔难道不会想想我们可能对这些即使小kiss的问题的认知其实不够清晰 一个认识不清晰的东西使用时 总会有油然而生的不安感 从而用的不放心 不舒坦 何况细节上的处理总是最能表现一个人实际经验是否丰富 技术水平是否可以称为高手的地方
导入jquery.js文件库之后
1 <script type="javascript"> 2 $(function(){ 3 $('#xx').click(function(){ 4 console.log('xxxxxxx'); 5 }) 6 }) 7 </script>
以上为最常见的写法 用jquery与coffeescript后
1 <script type="text/coffeescript"> 2 $('#xx').click -> 3 cosole.log('xxxxxxx') 4 </script>
传统dom里的click 首先应该知道有个html有个事件属性 onclick 从而很方便的在onclick里直接调用function
而function定义在js脚本文件里 所有主流浏览器都支持此属性 如
1 <button onclick="regexp()">go regexp</button> 2 <script> 3 function regexp(){ 4 console.log('xxxxx'); 5 } 6 </script>
或者onclick="return regexp()" 效果一样的,不用纠结
form表单里 则常用有onsubmit属性 在点击调交后,文档尚未发送请求前 同步地激活调用的function 用来进行验证，多原始和简单的验证方式
这样function里若return了 false 请求就不会发送
1 <form method="post" onsubmit="return go_pass()"> 2 <button class="btn" type="submit">go pass</button> 3 </form> 4 5 <script> 6 function go_pass(){ 7 console.log('xxxxx'); 8 if(xxx){ 9 return false; 10 } 11 } 12 </script>
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这里有必要解释一下 onsubmit="return go_pass()"
当你需要做一个对是否执行function后跳转action的判断时 请使用 onsubmit="return go_pass()"
曾经我见过很奇怪的一种写法
1 <form method="post" action="/xx/xx"> 2 <button type="submit" onclick="return check()">check</button> 3 </form>
想说这个完全是反面教材 首先不论能否达到目的
最直接的理由是逻辑混乱 语义化不明
以上关于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").onclick=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)" onclick="do()">xxxxx</a>
并不推荐在a的href里使用javascript:协议 可能会遇到问题 比如这会导致点击时在ie下gif停止播放
其实可以这样
<a href="#" onclick="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-onclick
1 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