JavaScript与HTML之间的交互是通过事件实现的。事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间,是用户或浏览器自身执行的某种动作。诸如click、load、mousemover,都是事件的名字。可以使用侦听器来预订事件,以便事件发生时,执行相应的代码。而响应某个事件的函数就叫做事件处理程序。对于一个事件,DOM元素通常拥有事件方法属性和事件处理程序属性,如click方法和onclick属性。

  在DOM0级规范中,通过JavaScript制定事件处理程序的传统方式,就是将一个函数赋值给一个事件处理程序属性。如:

var btn = document.getElementById('myBtn');
btn.onclick = function(){
console.log('click');
}

  DOM2级规范中,制定事件处理程序的方式,使用addEventListener函数,如:

var btn = document.getElementById('myBtn');
btn.addEventListener('click', function(){
console.log('click');
}, false);

  

  看过以上基础之后,开始步入主题。大部分元素都支持click与dblclick,然而在实际工作中,发现这两个事件之间绑定与触发方式还是有很多不同。

  1、通过以上两种来绑定的click事件,都可以通过在代码中调用element.click()方法来触发。而对于dblclick,我发现元素都没有dblclick方法。

  

  2、对于click想要在代码中触发click事件,有两种选择:第一,直接调用元素的click方法。第二,使用自己定义事件。对于dblclick,如果想要利用代码触发dblclick,只能使用自定义事件的方式。

  

  在某些情况下,我们可能有想利用单击模拟双击的需求,这种需求分为两种:

  1、同正常绑定dom元素的触发顺序一致,当用户点击一下时,触发click事件,当用户在极短时间内点击两下时,触发顺序为click-click-dblclick:

  

  2、当用户单击时,触发click。当用户在极短时间内双击时,只触发dblclic:

  

  这种处理方式有一个缺点:当用户单击时,会延迟一段时间,然后触发单击事件

元素的click与dblclick的更多相关文章

  1. dblclick([[data],fn]) 当双击元素时,会发生 dblclick 事件。

    dblclick([[data],fn]) 概述 当双击元素时,会发生 dblclick 事件.大理石量具哪家好 当鼠标指针停留在元素上方,然后按下并松开鼠标左键时,就会发生一次 click.在很短的 ...

  2. jQuery - 同时添加click和dblclick事件

    添加事件的代码比较简单,有两种方法: $("abc").bind({"click":fn,"dblclick":fn}); $(" ...

  3. html 子元素和父元素都监听了 click 事件,点击子元素时为何先触发的是父元素的 click 事件?

    先上一段代码,点击子元素时先触发的是父元素的 click 事件 <html> <head> <script type="text/javascript" ...

  4. 给DOM元素绑定click事件也有学问

    最简单的莫过于使用click方法: 1 <input id="btn" type="button" value="BUTTON" on ...

  5. 如何通过js在子页面调用父页面元素的click事件

    //获取父页面的某个元素var node = window.parent.document.getElementById("btnReturn");//调用该元素的Click事件 ...

  6. google跟踪代码管理器gtm无法给相同class元素绑定click事件埋点解决

    Google 跟踪代码管理器是一个跟踪代码管理系统 (TMS),可以帮助您快速轻松地更新网站或移动应用上的跟踪代码及相关代码段(统称为“代码”).将一小段跟踪代码管理器代码添加到项目后,您可以通过网页 ...

  7. click([[data],fn]) 触发每一个匹配元素的click事件。

    click([[data],fn]) 概述 触发每一个匹配元素的click事件. 这个函数会调用执行绑定到click事件的所有函数.大理石平台精度等级 参数 fnFunctionV1.0 在每一个匹配 ...

  8. 【转】jQuery - 同时添加click和dblclick事件

    特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过.如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/ ...

  9. JQuery给元素绑定click事件多次执行的解决方法

    原绑定方法: $(".subNavdiv").click(function () { ###### }); 这种方法只会在原click方法中继续添加新方法: 解决办法更改绑定方法为 ...

随机推荐

  1. 一.Timesten安装

    一,安装timesten IMDB并测试 1. 创建数据库相关用户和组 groupadd timesten useradd -g timesten -G dba timesten passwd tim ...

  2. 一个轻量级分布式RPC框架--NettyRpc

    1.背景 最近在搜索Netty和Zookeeper方面的文章时,看到了这篇文章<轻量级分布式 RPC 框架>,作者用Zookeeper.Netty和Spring写了一个轻量级的分布式RPC ...

  3. 使用Word 2013发布cnblogs随笔

    博客园支持Word或者OneNote一键发布文章. 获取cnblogs的URL地址,类似http://rpc.cnblogs.com/metaweblog/your_name 打开word中的管理账户 ...

  4. IntelliJ Idea 常用快捷键 列表

    1. -----------自动代码-------- 常用的有fori/sout/psvm+Tab即可生成循环.System.out.main方法等boilerplate样板代码 例如要输入for(U ...

  5. js获取浏览器body或窗宽度高度合集

    <script type="text/javascript"> var s = " "; document.documentElement.scro ...

  6. Javascript实现的数组降维——维度不同,怎么谈恋爱

    数组的元素可能是数组,这样一层层嵌套,可能得到一个嵌套很深的数组,数组降维要做的事就是把嵌套很深的数组展开,一般最后得到一个一维数组,其中的元素都是非数组元素,比如数组[1, [2, 3, [4, 5 ...

  7. WebAPI图片上传

    public Task<HttpResponseMessage> PostFormData() { // Check if the request contains multipart/f ...

  8. NXP恩智浦P87C51/52/54/58/591芯片解密单片机破解多少钱?

    NXP恩智浦P87C51/52/54/58/591芯片解密单片机破解 芯片解密型号: P87C51x2.P87C52x2.P87C54x2.P87C58x2.P87C591  单片机解密 #####[ ...

  9. 深入理解Javascript--闭包

    原网站http://www.cnblogs.com/xiaoloulan/p/5980569.html 在了解闭包之前需要了解下作用域的工作原理作为基础,传送门. 闭包是一个老生常谈的问题,在面试中也 ...

  10. 十个免费的web应用安全检测工具

    Websites are getting more and more complex everyday and there are almost no static websites being bu ...