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!");
});

元素触发的监听实质上就是给元素额外添加一个点击事件,从而实现元素的监听。

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值