元素的click与dblclick

简介:

 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:

  

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

目录
相关文章
|
存储 JSON 前端开发
SpringMVC之JSON返回&异常处理机制(带你学习新的SpringMVC武功秘籍)
SpringMVC之JSON返回&异常处理机制(带你学习新的SpringMVC武功秘籍)
309 0
|
12月前
|
SQL 数据挖掘 数据库
从管控角度谈慢SQL治理
慢SQL指的是执行效率低、响应时间长的SQL查询,其定义需综合考虑执行时间、业务场景、资源消耗、频率及影响、用户体验等多个维度。产生慢SQL的原因包括硬件问题、无索引或索引失效、锁等待及不当的SQL语句。慢SQL会增加资源占用,影响其他请求响应时间,可能导致系统故障,引发数据不一致问题,并影响用户体验。优化慢SQL需善用工具发现、设置合理告警机制,并进行分级治理与长期追踪。
|
9月前
|
SQL 存储 数据处理
别让你的CPU打盹儿:Apache Doris并行执行原理大揭秘!
别让你的CPU打盹儿:Apache Doris并行执行原理大揭秘!
337 1
别让你的CPU打盹儿:Apache Doris并行执行原理大揭秘!
|
10月前
|
人工智能 搜索推荐 小程序
无广告,直达结果的AI搜索引擎
在信息海洋中寻找知识,却常被广告和无关结果困扰?秘塔AI搜索能完美解决这些问题。它无广告、直达结果,全网搜索内容提炼整合,并提供思维导图、相关事件及参考来源,让你高效获取精准答案。快来体验吧![访问地址](https://metaso.cn/)
413 6
无广告,直达结果的AI搜索引擎
|
传感器 监控 安全
智能家居系统:物联网技术的应用与挑战
在这篇文章中,我们将深入探讨智能家居系统背后的技术原理、实际应用以及面临的主要挑战。通过分析物联网技术如何实现家居自动化,并结合具体案例,本文旨在提供对智能家居发展现状和未来趋势的全面理解。
|
机器学习/深度学习 人工智能 自然语言处理
探索人工智能的未来:机器学习与深度学习的融合之路
【7月更文挑战第29天】随着科技的不断进步,人工智能领域正迎来前所未有的发展机遇。本文将深入探讨机器学习与深度学习这两大技术支柱如何相互促进,共同推动人工智能向更高层次发展。通过分析当前的研究趋势和技术挑战,我们将描绘出一个更加智能、互联的未来图景。
267 3
|
Java jenkins Linux
Linux安装Jenkins(Java11最新版)
Linux安装Jenkins(Java11最新版)
Linux安装Jenkins(Java11最新版)
N..
|
开发框架 前端开发 UED
Bootstrap弹出框与警告框
Bootstrap弹出框与警告框
N..
194 0
|
SQL 存储 关系型数据库
Python SQLAlchemy:需要了解的 3 个数据库操作功能
Python SQLAlchemy:需要了解的 3 个数据库操作功能
400 0