新手总是时不时会纠结一下 点击事件
 我们都知道这些小东西不难 但是偶尔难道不会想想我们可能对这些即使小kiss的问题的认知其实不够清晰 一个认识不清晰的东西使用时 总会有油然而生的不安感 从而用的不放心  不舒坦 何况细节上的处理总是最能表现一个人实际经验是否丰富 技术水平是否可以称为高手的地方
 导入jquery.js文件库之后

 <script type="javascript">

        $(function(){

                $('#xx').click(function(){

                             console.log('xxxxxxx');

                 })

         })

 </script>

以上为最常见的写法        用jquery与coffeescript后

 <script type="text/coffeescript">

           $('#xx').click ->

                                cosole.log('xxxxxxx')

 </script>

传统dom里的click         首先应该知道有个html有个事件属性 onclick 从而很方便的在onclick里直接调用function
而function定义在js脚本文件里 所有主流浏览器都支持此属性 如

 <button onclick="regexp()">go regexp</button>

 <script>

         function regexp(){

                console.log('xxxxx');

         }

 </script>

或者onclick="return regexp()" 效果一样的,不用纠结

form表单里 则常用有onsubmit属性 在点击调交后,文档尚未发送请求前 同步地激活调用的function 用来进行验证，多原始和简单的验证方式
 这样function里若return了 false 请求就不会发送

 <form method="post" onsubmit="return go_pass()">

  <button class="btn" type="submit">go pass</button>

 </form>

 <script>

        function go_pass(){

           console.log('xxxxx');

           if(xxx){

                      return false;

           }

        }

 </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()"

曾经我见过很奇怪的一种写法

 <form method="post" action="/xx/xx">

       <button type="submit" onclick="return check()">check</button>

 </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的)

 document.getElementById("tea").onclick=function(){

              console.log('check a');

              return false;

              console.log('check');

 };

至于经验丰富的人用的多的是

  $("p").bind("click", function(){

            console.log( $(this).text() );

 });

或者 视情况（涉及到异步加载进来的元素或者脚本时，由于页面渲染已经完成，事件已经绑定过一次，或者....通过事件委托和起泡,绑定点击事件）

 $("body").on("click",'.resp_click' function(){

                           console.log( 'xxxx' );

  });

对于未来可能会新加进来的元素仍能起效的,  jquery除了on,以前还有一个live(不过1.9后官方已废弃了,目前用着1.8.2的jquery中文api译本的童鞋大概需要注意下)

这样做有些好处 当某个情况下我不要这个点击事件时我可以解绑,可以很方便的传递数据等(详见jquery手册bind 与unbind on 与off)

 function handler(event) {

             cosole.log(event.data.foo);

  }

        $("p").bind("click", {foo: "bar"}, handler)

                //和

        $("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已经可以说退出历史舞台了

此外较少见的方式还有(其实也不少见,新人估计会少见趴)

 element.addEventListener('click', function() { xxxxxx }, false);

需要注意的是在ie9及以上 才可用 但支持主流浏览器
          ie9以下 请使用：element.attachEvent('onclick', function() { xxxxx });
          此方式也work 用起来感觉很棒
          尤其是在最近开始火起来的移动端互联网开发里 有一个touch 事件 这些响应式的网页里这种事件监听的脚本写法是很常见的
          比如这样封装一下 引自 http://stackoverflow.com/questions/6348494/addeventlistener-vs-onclick

 function addEvent(element, evnt, funct){

     if (element.attachEvent)  return element.attachEvent('on'+evnt, funct);

     else   return element.addEventListener(evnt, funct, false);

  }

        // example

        addEvent(

                document.getElementById('myElement'),

                'click',

                 function () { alert('hi!'); }

        );

或者类似这样 引自:http://jackleechina.iteye.com/blog/1595397

  if(window.addEventListener){          // Mozilla, Netscape, Firefox  

      //element.addEventListener(type,listener,useCapture);

      button.addEventListener('click', alert('11'), false);

      button.addEventListener('click', alert('12'), false);

      //执行顺序11 -> 12

  }

  else {                                // IE  

      button.attachEvent('onclick', function(){alert('21');});

      button.attachEvent('onclick', function(){alert('22');});

      //执行顺序22 -> 21

  }

通用的是click点击事件 但是因为click事件在移动端会出现延迟响应的情况 约200ms,触发移动端的点击常用tap事件来代替
关于事件监听器 分离在后面的tips详细点总结下

http://i.cnblogs.com/EditPosts.aspx?opt=1

tips 前端 点击事件的更多相关文章

  1. [前端][自定义DOM事件]不使用setTimeout实现双击事件或n击事件

    使用setTimeout实现双击事件 例如,这样: let div = document.getElementById("div"); doubleClick(div, funct ...

  2. 微信小程序tips集合:无法输入文字/随时查看页面/元素审查/点击事件/数据绑定

    1:编辑文档无法输入文字 出现这种情况一般是因为之前编辑的文档未保存,所有在其他文档输入的时候会自动输入到未保存的文档中,在文档暂时编辑完毕后要ctrl+s随手保存,不然会出现无法打字情况 2: 随时 ...

  3. 【前端】vue2.x 配合 bootstrapTable 动态添加元素和绑定点击事件，事件无效 解决

    背景: 使用bootstrap-table 表格插件时,每一行的最后一班会加操作按钮列.如果不加入vue的话,使用插件自己的列属性formatter:function(value, row, inde ...

  4. asp.net 页面上的点击事件

    asp.net 页面上 服务器端控件Button 有两个click事件如 <asp:Button ID="Button1" runat="server" ...

  5. 今天依然是 JQ点击事件之“点击淡入淡出事件”

    废话不多说,先贴代码,再解释 <script> $(document).ready(function(){ $("button").click(function(){ ...

  6. 如何绑定android点击事件--跳转到另一个页面并实现关闭功能？

    一.点击按钮跳转到另一个页面. eg:实现从一个页面点击跳转到另一个页面 1.首先在一个布局文件(.XML)中绘画了一个跳转按钮(id为btn1): <Button         androi ...

  7. Unity3D开发之NGUI点击事件穿透响应处理

    http://www.xuebuyuan.com/1936292.html 在使用NGUI 开发2D项目的时候,发现了一个问题,就是如果点出一个菜单,然后点击菜单上面的按钮的时候就会使得按钮下面的物品 ...

  8. 【转】Android - Button(按钮)的响应点击事件的4种写法

    原文网址:http://www.yrom.net/blog/2011/12/12/android-4-onclicklistener-of-button/ Button控件setOnclickList ...

  9. 纯CSS实现点击事件展现隐藏div菜单列表/元素切换

    在写移动端导航的时候经常用到点击按钮出现/隐藏导航条的情况,最常见的方法当然还是前端框架直接调用,省心省力,不易出错:当然还有使用纯JS实现的小代码段.我这里整理了纯CSS实现方式,给需要的人和给自己 ...

随机推荐

  1. Java源码解析——Java IO包

    一.基础知识: 1. Java IO一般包含两个部分:1)java.io包中阻塞型IO:2)java.nio包中的非阻塞型IO,通常称为New IO.这里只考虑到java.io包中堵塞型IO: 2. ...

  2. 微信小程序插件内页面跳转和参数传递

    在此以插件开发中文章列表跳传文章详情为例. 1.首先在插件中的文章列表页面wxml中绑定跳转事件. bindtap='url' data-id="{{item.article_id}}&qu ...

  3. 第五章 标准I/O

    5.1 引言 本章说明标准 I/O 库.因为不仅在 UNIX 上,而且在很多操作系统上都实现了此库,所以它由 ISO C 标准说明. 标准 I/O 库处理很多细节,例如缓冲区分配,以优化长度执行 I/ ...

  4. 17-比赛1 C - Binary Nim （栈的游戏）

    题目描述 Tweedle-Dee 和 Tweedle-Dum 正在进行一场激烈的二进制 Nim 游戏.这是你没有玩过的船新版本,游戏包含 N 个栈,每个栈只包含 0 和 1 的元素.就像一般的 Nim ...

  5. SpringMVC文件上传——bean的配置【org.springframework.web.multipart.commons.CommonsMultipartResolver】

    一.简介 Spring MVC支持一个通用的多路上传解析器CommonsMultipartResolver,在Spring的配置文件中对CommonsMultipartResolver Bean进行配 ...

  6. Spark&Hive结合起来

    1.spark与Hive结合起来 前提:当你spark的版本是1.6.1的时候,你的Hive版本要1.2.1,用别的版本会有问题 我们在做的时候,Hive的版本很简单,我们只需要解压缩,告诉他Hive ...

  7. sparkStreaming统计各平台最近一分钟实时注册收入 时间段，平台，金额，订单数

    样例数据: __clientip=10.10.9.153&paymentstatus=0&__opip=&memberid=89385239&iamount=1& ...

  8. 10.2 ajax

    Ajax Ajax简介 AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”.即使用Javascript语言与服务器进行异步交互 ...

  9. 微信小程序 | 49，小程序入门集锦系列文章20篇

    以下20篇文章,都是关于微信小程序的文章,以入门常见问题为主.如发现谬误,请与笔者联系. [小程序入门集锦]1,微信小程序在哪里打开 [小程序入门集锦]2,小程序商店 [小程序入门集锦]3,微信小程序 ...

  10. 1079: [SCOI2008]着色方案

    链接 思路 首先是dp,如果直接用每个种颜色的剩余个数做状态的话,复杂度为5^15. 由于c<=5,所以用剩余数量的颜色的种类数做状态:f[a][b][c][d][e][last]表示剩余数量为 ...