脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JavaScript某元素点击的监听和触发

JavaScript关于某元素点击事件的监听和触发

 更新时间：2022年07月01日 10:30:01   作者：松子鱿果果  
本文主要介绍了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某元素点击的监听和触发内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

最新评论