您现在的位置是:网站首页> 编程资料编程资料
JavaScript关于某元素点击事件的监听和触发_javascript技巧_
2023-05-24
359人已围观
简介 JavaScript关于某元素点击事件的监听和触发_javascript技巧_
场景:在javascript中,如果引用了某个框架中的元素,元素已在原框架实现并内置了点击事件,此时我们希望自己新建的元素的点击事件也触发和前述元素一样的效果。
举例:假设现存在元素A,元素B
方法①:元素A的点击事件会触发元素B的点击事件
方法②:直接监听元素B的点击事件
一. 触发元素同步效果
最终实现效果:


button标签的test()点击事件绑定a标签的点击事件
方法一: 原生JavaScript的click()点击事件
function test(){ $(".layui-layer-max")[0].click(); }方法二:JQuery事件 — trigger()方法
function test(){ //trigger的参数除了"click"以外,还支持"select"、"focus"等等 $(".layui-layer-max").trigger("click"); }两种方法都可行,不过有些框架可能会覆写了这些方法,导致方法失效,两种方法都可以试试。
二. 触发元素监听效果
最终实现效果:

监听a标签的点击事件
方法一: 原生JavaScript监听
$(".layui-layer-max")[0].addEventListener("click", test); function test(){ console.log("EventListener success!") }方法二:JQuery监听
$(".layui-layer-max").click(function(){ console.log("EventListener success!"); });元素触发的监听实质上就是给元素额外添加一个点击事件,从而实现元素的监听。
到此这篇关于JavaScript关于某元素点击事件的监听和触发的文章就介绍到这了,更多相关JavaScript某元素点击的监听和触发内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!
相关内容
- Rxjs map, mergeMap 和 switchMap 的区别与联系_javascript技巧_
- 微信小程序实现表单验证源码_javascript技巧_
- vue封装jquery修改自身及兄弟元素的方法_vue.js_
- JavaScript中rxjs与 Observable 两大类操作符解析_javascript技巧_
- React 中的列表渲染要加 key的原因分析_React_
- JS中的几种循环和跳出方式_javascript技巧_
- JS ES5创建常量详解_javascript技巧_
- 微信小程序实现日期格式化_javascript技巧_
- 微信小程序实现触底加载_javascript技巧_
- 微信小程序实现吸顶盒效果_javascript技巧_
