新手总是时不时会纠结一下 点击事件
我们都知道这些小东西不难 但是偶尔难道不会想想我们可能对这些即使小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>
not recommand
想说这个完全是反面教材 首先不论能否达到目的
最直接的理由是逻辑混乱 语义化不明
以上关于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