新手总是时不时会纠结一下 点击事件
 我们都知道这些小东西不难 但是偶尔难道不会想想我们可能对这些即使小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. thinkphp3.2 where 条件查询 复查的查询语句

    复查的查询语句 有的时候,我们希望通过一次的查询就能解决问题,这个时候查询条件往往比较复杂,但是却比多次查询库来的高效. 实在是搞不定的话就直接用$where[‘_string’] = ‘xxxx’, ...

  2. （洛谷）P2709 小B的询问

    题目描述 小B有一个序列,包含N个1~K之间的整数.他一共有M个询问,每个询问给定一个区间[L..R],求Sigma(c(i)^2)的值,其中i的值从1到K,其中c(i)表示数字i在[L..R]中的重 ...

  3. CONDENSE命令により、文字列から冗長スペースが削除

    CONDENSE 命令により.文字列から冗長スペースが削除されます. CONDENSE c [NO-GAPS]. この命令により.項目 c に先行空白が含まれる場合は削除され.その他の空白列がある場合 ...

  4. centos使用--防火墙

    目录 1 切换到zsh 1.1 查看系统当前的shell 1.2 查看bin下是否有zsh包 1.3 安装zsh包 1.4 切换shell至zsh 2 安装oh-my-zsh 2.1 oh-my-zs ...

  5. stop-hbase.sh出现stopping hbasecat:/tmp/hbase-root-master.pid:No such file or directory

    stop-hbase.sh出现stopping hbasecat:/tmp/hbase-root-master.pid:No such file or directory解决办法:在hbase-env ...

  6. [转] PHP在不同页面之间传值的三种常见方式

    转自: http://my.oschina.net/jiec/blog/196153 一. POST传值 post传值是用于html的<form>表单跳转的方法,很方便使用.例如: < ...

  7. javascript检测数组

    在ECMAScript5中的数组已经引入了isArray方法,该方法的目的就是检测变量是否为数组. 但是对于ie6.7等古老的浏览器是没有这样的方法的,在Zakas写的一本书上摘到一个函数,基本能优雅 ...

  8. 程序员必备PC维修法（软件篇）

    学会使用专业软件检测与修复电脑硬件故障问题也是程序员的一种软技能. windows篇 情景:如何获取电脑硬件的真实信息.(如何检验选购回来的硬件是否正品) 自检:使用AIDA64软件检查电脑硬件,能详 ...

  9. win10系统安装之GHOST还原（转+编辑）

    注意*:在以下操作中,你可能需要分区你的原来系统盘,如果是重装的话.现在我们使用SSD固态做系统盘盘,这个分区的话,点选mbr重新引导,以及对齐复选框. 如果前面过程都没问题,在安装过程中出现    ...

  10. OpenCV_1.0安装包下载

    OpenCV_1.0安装包下载 点击下载