新手总是时不时会纠结一下 点击事件
 我们都知道这些小东西不难 但是偶尔难道不会想想我们可能对这些即使小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. 【PHP项目】伪静态规则

    伪静态规则写法RewriteRule-htaccess详细语法使用 2016年03月30日 16:53:59 阅读数:20340 伪静态实际上是利用php把当前地址解析成另一种方法来访问网站,要学伪静 ...

  2. 特殊sql查询方法实例

    一.if条件查询:SELECT sum(if(is_buy > 0 ,1,0)) AS friend_count_all_cj, sum(if(is_buy = 0 ,1,0)) AS frie ...

  3. python爬虫：利用正则表达式爬取豆瓣读书首页的book

    1.问题描述: 爬取豆瓣读书首页的图书的名称.链接.作者.出版日期,并将爬取的数据存储到Excel表格Douban_I.xlsx中 2.思路分析: 发送请求--获取数据--解析数据--存储数据 1.目 ...

  4. The Extinction of Some Languages【一些语言的消失】

    The Extinction of Some Languages Languages have been coming and going for thousands of years, 语言的产生和 ...

  5. ImageButton的坑 ImageButton 有问题

    最近在用ImageButton,发现,我如果new ImageButton,并且 设置Warp_content,但是它并不会正真的warp,它会有一个边框. 不知道怎么回事. 后来,在代码里面使用Im ...

  6. laravel - ReflectionException in Container.php, Class not found?

    SIGN UPSIGN IN CATALOG SERIES PODCAST DISCUSSIONS ReflectionException in Container.php, Class not fo ...

  7. Eclipse 修改字符集---Eclipse教程第02课

    默认情况下 Eclipse 字符集为 GBK,但现在很多项目采用的是 UTF-8,这是我们就需要设置我们的 Eclipse 开发环境字符集为 UTF-8, 设置步骤如下: 在菜单栏选择 Window ...

  8. 运用Pascal来破坏DLL的一个实例

    运用Pascal来破坏DLL文件的一个实例 关于Pascal静态调用和动态的调用DLL的学习您可以看Delphi/Lazarus栏目. Uses Dos; {调用DOS库} Const Root='C ...

  9. 用Chrome浏览器，学会这27个超好用功能

    一些非常有用的隐藏捷径 1. 想要在后台打开一个新的标签页而不离开现有的页面,这样就不会打断目前的工作了?按住 Ctrl 键或 Cmd 并点击它.如果你要在一个全新的窗口中打开一个链接,那就按 Shi ...

  10. jekens介绍及服务搭建

    https://blog.csdn.net/achuo/article/details/51086599 https://blog.csdn.net/qq_37372007/article/detai ...