Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >代码触发,手动触发touchstart事件,touch事件,click事件,自定义事件

代码触发,手动触发touchstart事件,touch事件,click事件,自定义事件

作者头像
全栈程序员站长
发布于 2022-09-06 11:46:14
发布于 2022-09-06 11:46:14
5.1K00
代码可运行
举报
运行总次数:0
代码可运行

大家好,又见面了,我是你们的朋友全栈君。

工作中有时候会用到需要用代码去手动触发某个事件或者是自定义事件,通常触发click事件的做法为eleme.click(),遇到touchstart就行不通了。
可以使用以下方式
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 创建事件.
var event = document.createEvent('Events');
// 初始化一个点击事件,可以冒泡,无法被取消
event.initEvent('touchstart', true, false);
// 设置事件监听.
elem.addEventListener('touchstart', function (e) { 
   
  // e.target 就是监听事件目标元素
}, false);
// 触发事件监听
elem.dispatchEvent(event);
initEvent已经从 Web 标准中删除,虽然一些浏览器目前仍然支持它,不建议再使用此方法,可以使用Event构造函数
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var event = new Event('touchstart');
//监听
elem.addEventListener('touchstart', function (e) { ... }, false);
// 触发event.
elem.dispatchEvent(event);

Event构造函数也可以使用自定义事件

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var event = new Event('CustomEvent');
//监听
elem.addEventListener('CustomEvent', function (e) { ... }, false);
// 触发event
elem.dispatchEvent(event); 

发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/150775.html原文链接:https://javaforall.cn

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
JavaScript 自定义事件的实现
自定义事件,就是有别于有别于带有浏览器特定行为的事件(类似 click, mouseover, submit, keydown 等事件),事件名称可以随意定义,可以通过特定的方法进行添加,触发以及删除。
逆葵
2019/04/25
8240
盘点原生JavaScript中直接触发事件的方式
JavaScript提供了多种方式来直接触发事件,无论是在用户交互、程序逻辑处理或是数据更新时。本文将全面探讨原生JavaScript中各种事件触发方式,并通过深入的技术案例分析,帮助开发者掌握这些方法在实际开发中的应用。
李游Leo
2025/01/21
1640
盘点原生JavaScript中直接触发事件的方式
JS自定义事件原生
说在开始,Javascript自定义事件类似设计的观察者模式,通过状态的变更来监听行为,主要功能解耦,易于扩展。多用于组件、模块间的交互。 原型模式下的js自定义事件 var EventTarget = function() { this._listener = {}; }; EventTarget.prototype = { constructor: this, addEvent: function(type, fn) { if (typeof type =
空空云
2018/09/27
3.1K0
向zepto.js学习如何手动(trigger)触发DOM事件
本文作者:IMWeb 谦龙 原文出处:IMWeb社区 未经同意,禁止转载 前言 前端在最近几年实在火爆异常,vue、react、angular各路框架层出不穷,咱们要是不知道个双向数据绑定
IMWeb前端团队
2018/01/08
4.3K0
向zepto.js学习如何手动(trigger)触发DOM事件
怎么创建 JavaScript 自定义事件
你肯定处理过很多的事件监听,比如点击事件或者表单提交。事件监听对许多用例来说很有帮助,但是有时我们需要创建自己的自定义事件来处理复杂的交互。在这片短文中,我将告诉你有关创建自定义事件,侦听自定义事件以及创建双击自定义事件所要了解的内容。
PHP开发工程师
2022/04/29
1.5K0
怎么创建 JavaScript 自定义事件
怎么创建 JavaScript 自定义事件
你肯定处理过很多的事件监听,比如点击事件或者表单提交。事件监听对许多用例来说很有帮助,但是有时我们需要创建自己的自定义事件来处理复杂的交互。在这片短文中,我将告诉你有关创建自定义事件,侦听自定义事件以及创建双击自定义事件所要了解的内容。
Jimmy_is_jimmy
2022/04/29
1.4K0
怎么创建 JavaScript 自定义事件
JS如何模拟鼠标点击X,Y坐标
https://developer.mozilla.org/zh-CN/docs/Web/API/Document/createEvent
一个会写诗的程序员
2018/10/09
15.9K0
JS如何模拟鼠标点击X,Y坐标
🔥JavaScript 自定义事件如此简单!
在前端开发世界中,JavaScript 和 HTML 之间往往通过 事件 来实现交互。其中多数为内置事件,本文主要介绍 JS自定义事件概念和实现方式,并结合案例详细分析自定义事件的原理、功能、应用及注意事项。
pingan8787
2020/02/22
1.6K0
js创建自定义事件或者自动触发已有事件
HTMLEvents:包括 ‘abort’, ‘blur’, ‘change’, ‘error’, ‘focus’, ‘load’, ‘reset’, ‘resize’, ‘scroll’, ‘select’, ‘submit’, ‘unload’.
IT工作者
2022/03/14
4K0
petite-vue源码剖析-双向绑定`v-model`的工作原理
双向绑定v-model不仅仅是对可编辑HTML元素(select, input, textarea和附带[contenteditable=true])同时附加v-bind和v-on,而且还能利用通过petite-vue附加给元素的_value、_trueValue和_falseValue属性提供存储非字符串值的能力。
PHP开发工程师
2022/03/15
8540
移动端Webapp中的那些Bug
持续更新… 测试浏览器 Chrome: 61.0.3163.73 Safari: 10.0(IOS 10.3.3) Github: webapp-bugs 1. IOS overflow: scrol
糊糊糊糊糊了
2018/05/09
3K0
移动端Webapp中的那些Bug
浅谈JavaScript的事件(事件模拟)
  事件经常由操作或者通过浏览器功能触发,通过JavaScript也可以触发元素的事件。通过JavaScript触发事件,也称为事件的模拟。 DOM中事件模拟   可以document的createEvent方法创建event对象。这个方法接收一个参数,即表示要创建的事件类型的字符串。在DOM2级中,所有这些字符串都使用英文复数形式,在DOM3级中都变成了单数。这几个字符串如下:UIEvents,一般化的ui事件,鼠标事件和键盘事件都继承于该事件,在DOM3级中是UIEvent;MouseEvents,一般
水击三千
2018/02/27
2.1K0
【移动端】touch事件及穿透事件
2007 苹果推出iphone,浏览器网页在iphone上显示时字体特别小,根本看不清楚
用户9914333
2022/12/14
2.1K0
【移动端】touch事件及穿透事件
JS里,事件的几个细节问题--(冒泡、自定义事件)
今天想实现一个事件自动订阅到指定class的元素之上的功能。这句话很拗口,稍后解释!
申君健
2018/09/21
1.5K0
24 个 ES6 实用方法,用来解决实际开发的 JS 问题
页面DOM里的每个节点上都有一个classList对象,程序员可以使用里面的方法新增、删除、修改节点上的CSS类。使用classList,程序员还可以用它来判断某个节点是否被赋予了某个CSS类。
Javanx
2020/03/09
8300
不用try catch,如何机智的捕获错误
我们知道,React中有个特性Error Boundary,帮助我们在组件发生错误时显示“错误状态”的UI。
刘小夕
2020/09/29
2.8K0
不用try catch,如何机智的捕获错误
【JS】2029- 如何创建 JavaScript 自定义事件?
假设,你正在构建一个复杂的 web 应用程序,你想到了可以预构建例如click和submit这样的事件,这很好,但如果你需要更特殊一点怎么办?
pingan8787
2024/04/30
2080
【JS】2029- 如何创建 JavaScript 自定义事件?
移动端前端常见的触摸相关事件touch、tap、swipe等整理
前端的很多事件在PC端和浏览器端可公用,但有些事件却只在移动端产生,如触摸相关的事件
书童小二
2018/09/03
2.6K0
移动端前端常见的触摸相关事件touch、tap、swipe等整理
JS事件流
HTML中与javascript交互是通过事件驱动来实现的,例如鼠标点击事件、页面的滚动事件onscroll等等,可以向文档或者文档中的元素添加事件侦听器来预订事件。想要知道这些事件是在什么时候进行调用的,就需要了解一下“事件流”的概念。
前端逗逗飞
2021/04/30
8.5K0
JS事件流
记好这24个ES6方法,用于解决实际开发的JS问题
页面DOM里的每个例程上都有一个classList对象,程序员可以使用里面的方法添加,删除,修改例程的CSS类。使用classList,程序员还可以用它来判断某处是否被替换了某人个CSS类。
艾编程
2023/01/13
1.4K0
记好这24个ES6方法,用于解决实际开发的JS问题
相关推荐
JavaScript 自定义事件的实现
更多 >
领券
💥开发者 MCP广场重磅上线!
精选全网热门MCP server,让你的AI更好用 🚀
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验