AI 助理
文档备案控制台
开发者社区 开发与运维 文章 正文

JavaScript 技术篇-js代码触发dom元素绑定事件实例演示，jquery触发元素绑定事件方法

2021-12-14 698
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： JavaScript 技术篇-js代码触发dom元素绑定事件实例演示，jquery触发元素绑定事件方法

     

原生 js 直接作为方法调用即可触发。

// 定位登录按钮
let login_btn = document.querySelector("#login_div > div > div.login-content > div.content-right > div > div > div.login-panel-input.login-submit-panel > button");
// 调用按钮事件进行点击
login_btn.click();

image.png

可以看到效果图：

2.gif

jquery 通过 trigger() 方法触发点击事件。

$("#login_div  > div > div.login-content > div.content-right > div >  div > div.login-panel-input.login-submit-panel >  button").trigger("click")

使用前提是该 dom 元素必须绑定的事件才能出发，他的祖先元素绑定的事件他触发不了，所以这里要把 Ancestors All 取消勾选一下。

image.png

喜欢的点个赞❤吧！

           

文章标签：
JavaScript
前端开发
关键词：
JavaScript技术
JavaScript代码
JavaScript JS
JavaScript方法
JavaScript代码触发
小蓝枣
目录
相关文章
游客lijmi4663rgsa
|
JavaScript 前端开发 API
JavaScript中通过array.map(）实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等，array.map(）的使用详解（附实际应用代码）
array.map(）可以用来数据转换、创建派生数组、应用函数、链式调用、异步数据流处理、复杂API请求梳理、提供DOM操作、用来搜索和过滤等，比for好用太多了，主要是写法简单，并且非常直观，并且能提升代码的可读性，也就提升了Long Term代码的可维护性。 只有锻炼思维才能可持续地解决问题，只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助，麻烦您点个赞支持一下，还可以收藏起来以备不时之需，有疑问和错误欢迎在评论区指出~
游客lijmi4663rgsa
707 1
光明顶阳顶天
|
缓存 编解码 JavaScript
DOM 和 BOM 在项目中应用时的性能优化方法
【10月更文挑战第19天】总之，优化 DOM 和 BOM 的性能需要综合考虑多个方面，通过合理的设计和技术手段，提升项目的运行效率和用户体验。在实际开发中，要不断地进行性能优化实践，以适应不断变化的需求和技术发展。
光明顶阳顶天
370 63
我是快乐的嘟嘟
|
JavaScript 前端开发 索引
js中DOM的基础方法
【10月更文挑战第31天】这些DOM基础方法是操作网页文档结构和实现交互效果的重要工具，通过它们可以动态地改变页面的内容、样式和行为，为用户提供丰富的交互体验。
我是快乐的嘟嘟
306 49
龙大吉
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧，涵盖 DOM 获取、修改、创建、删除元素的方法，事件处理，性能优化及与其他前端技术的结合，助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧，涵盖 DOM 获取、修改、创建、删除元素的方法，事件处理，性能优化及与其他前端技术的结合，助你构建动态交互的网页应用。
龙大吉
941 5
大树营养快线
|
JavaScript 前端开发 开发者
.js的dom元素操作
【10月更文挑战第29天】通过灵活运用这些 DOM 元素操作方法，JavaScript 可以实现丰富的网页交互效果，如动态更新页面内容、响应用户操作、创建和删除页面元素等。在实际开发中，开发者可以根据具体的需求和场景，选择合适的 DOM 元素操作方法来实现所需的功能，为用户提供更加流畅和动态的网页体验。
大树营养快线
368 4
大树营养快线
|
JavaScript 前端开发 API
除了事件委托，还有哪些处理大量 DOM 元素的方法？
【10月更文挑战第29天】
大树营养快线
242 0
游客44yag4ft7nckq
|
JavaScript
DOM 节点列表长度（Node List Length）
DOM 节点列表长度（Node List Length）
游客44yag4ft7nckq
191 6
游客44yag4ft7nckq
|
JavaScript
DOM 节点列表长度（Node List Length）
DOM 节点列表长度（Node List Length）
游客44yag4ft7nckq
142 16
游客44yag4ft7nckq
|
JavaScript
HTML DOM 节点树
HTML DOM 节点是指在 HTML 文档对象模型中，文档中的所有内容都被视为节点。整个文档是一个文档节点，每个 HTML 元素是元素节点，元素内的文本是文本节点，属性是属性节点，注释是注释节点。DOM 将文档表示为节点树，节点之间有父子和同胞关系。
游客44yag4ft7nckq
351 3
游客44yag4ft7nckq
|
JavaScript
HTML DOM 节点
HTML DOM（文档对象模型）将HTML文档视为节点树，其中每个部分都是节点：文档本身是文档节点，HTML元素是元素节点，元素内的文本是文本节点，属性是属性节点，注释是注释节点。节点间存在父子及同胞关系，形成层次结构。
游客44yag4ft7nckq
284 3

热门文章

最新文章

  • 1
    源码分析-react3-创建dom
  • 2
    Dom4j节点处理器的实现
  • 3
    文档对象模型DOM(二)
  • 4
    深入浅出javascript DOM编程
  • 5
    【SSD系列】DOM0, DOM1, DOM2, DOM3, DOM4，知多少
  • 6
    Python+selenium 自动化-调用dom节点的click()监听事件，强力操作节点！穿透元素进行点击，节点被遮挡不可点击解决方法
  • 7
    Easy DOM-based XSS detection via Regexes
  • 8
    javascript基础知识和Dom编程学习
  • 9
    DOM——拷贝.clone()与替换.replaceWith() 和.replaceAll()及包裹.wrap()
  • 10
    使用Dom生成xml文件和解析xml文件
  • 1
    局域网监控其他电脑的设备信息管理 Node.js 跳表算法
    244
  • 2
    Chrome 下载大文件报错！用 Streamsaver.js 完美填坑
    4431
  • 3
    百宝箱开放平台 ✖️ Node.js SDK
    395
  • 4
    电脑管控软件的进程优先级调度：Node.js 红黑树算法
    345
  • 5
    企业上网监控系统的恶意 URL 过滤 Node.js 布隆过滤器算法
    381
  • 6
    JavaScript进阶挑战：巩固核心知识点
    244
  • 7
    js实现promise常用场景使用示例
    379
  • 8
    基于 Node.js 图结构的局域网设备拓扑分析算法在局域网内监控软件中的应用研究
    438
  • 9
    Nest.js控制器深度解析：路由与请求处理的高级特性
    467
  • 10
    js react antd 实现页面低分变率和高分变率下字体大小自适用，主要是配置antd
    387

    • 相关课程

    更多
  • JavaScript入门与实战
  • JavaScript 自学手册文档教程
  • jQuery开发教程

    • 相关电子书

    更多
  • JavaScript异步编程
  • Delivering Javascript to World
  • 编程语言如何演化-以JS的private为例
    • 下一篇
    [网络安全] Dirsearch 工具的安装、使用详细教程