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

目录
  • 一. 触发元素同步效果
    • 方法一： 原生JavaScript的click()点击事件
    • 方法二：JQuery事件 — trigger()方法
  • 二. 触发元素监听效果
    • 方法一： 原生JavaScript监听
    • 方法二：JQuery监听

场景：在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某元素点击的监听和触发内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 利用chrome浏览器进行js调试并找出元素绑定的点击事件详解

    前言 大家有没有遇到这样的一个问题,我们在分析一些大型电子商务平台的Web前端脚本时,想找到一个元素绑定的点击事件,并不是那么容易,因为有些前端脚本封装的比较隐蔽,甚至有些加密脚本,用传统的查找元素ID.或者页面源码方法去找,可能最后徒劳无功.下面我来介绍利用chrome浏览器来查找元素绑定的事件. Chrome开发工具中最有用的面板Sources.Sources面板几乎是最常用到的Chrome功能面板,也是解决一般问题的主要功能面板.通常只要是开发遇到了js报错或者其他代码问题,在审视一遍代码

  • vue.js click点击事件获取当前元素对象的操作

    Vue.js可以传递$event对象 <body id="app"> <ul> <li v-on:click="say('hello!', $event)">点击当前行文本</li> <li>li2</li> <li>li3</li> </ul> <script> new Vue({ el: '#app', data: { message: 'He

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

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

    目录 一. 触发元素同步效果 方法一: 原生JavaScript的click()点击事件 方法二:JQuery事件 — trigger()方法 二. 触发元素监听效果 方法一: 原生JavaScript监听 方法二:JQuery监听 场景:在javascript中,如果引用了某个框架中的元素,元素已在原框架实现并内置了点击事件,此时我们希望自己新建的元素的点击事件也触发和前述元素一样的效果. 举例:假设现存在元素A,元素B 方法①:元素A的点击事件会触发元素B的点击事件方法②:直接监听元素B的点

  • jQuery移除或禁用html元素点击事件常用方法小结

    本文实例讲述了jQuery移除或禁用html元素点击事件常用方法.分享给大家供大家参考,具体如下: 移除或禁用html元素的点击事件可以通过css实现也可以通过js或jQuery实现. 一.CSS方法 .disabled { pointer-events: none; } 二.jQuery方法 方法一 $(this).click(function (event) { event.preventDefault(); } 方法二 $('a').live('click', function(event

  • nodejs事件的监听与触发的理解分析

    本文实例分析了nodejs事件的监听与触发.分享给大家供大家参考.具体分析如下: 关于nodejs的事件驱动,看了<nodejs深入浅出>还是没看明白(可能写的有点深,或者自己理解能力不够好),今日在图灵社区看到一篇关于nodejs事件的监听与触发,由于给出的例子比较多人,很容易理解,所以也大致明白了nodejs事件驱动. 以下内容参考了图灵社区的文章(地址:http://www.ituring.com.cn/article/177478) 首先来了解一下nodejs的Event模块: Nod

  • angular中实现li或者某个元素点击变色的两种方法

    本文介绍了angular中实现li或者某个元素点击变色的两种方法,分享给大家,希望对大家有帮助 先说一种最直接了当的不需要js控制. 方法一:直接在用ng-class就可以控制: <p ng-click="state=1;" ng-class="{active:state==1}">浮伤年华</p> <p ng-click="state=2;" ng-class="{active:state==2}&quo

  • JavaScript给按钮绑定点击事件（onclick）的方法

    本文实例讲述了JavaScript给按钮绑定点击事件(onclick)的方法.分享给大家供大家参考.具体分析如下: 我们可以通过设定按钮的onclick属性来给按钮绑定onclick事件 <!DOCTYPE html> <html> <head> <script> function displayDate() { document.getElementById("demo").innerHTML=Date(); } </script

  • layui 数据表格 点击分页按钮 监听事件的实例

    找了 很多 关于表格分页 点击事件 请求, table.render 并不支持监听点击事件,所以我就把 table.render 和 laypage.render结合在一起 (我也不想写分页的,但是后台讲数据多 ,要加分页,被逼无奈 ,想了一个方法) 先上图 代码 .html <div> <table class="layui-hide" id="test" lay-filter="demo"></table>

  • JS针对浏览器窗口关闭事件的监听方法集锦

    本文实例总结了JS针对浏览器窗口关闭事件的监听方法.分享给大家供大家参考,具体如下: 方式一:(适用于IE浏览器,而且刷新不提示,只在点击浏览器关闭按钮的时候提示) <script type="text/javascript"> window.onbeforeunload=onclose; function onclose() { if(event.clientX>document.body.clientWidth&&event.clientY<

  • Android4.0.x Home键事件拦截监听的方法

    本文实例讲述了Android4.0.x Home键事件拦截监听的方法.分享给大家供大家参考,具体如下: 在2.3.x 的主要做法如下,具体实现网上有很多文章 @Override public void onAttachedToWindow() { this.getWindow().setType(WindowManager.LayoutParams.TYPE_KEYGUARD); super.onAttachedToWindow(); } 代码移植到4.0.1后 this.getWindow()

  • Android开发实现控件双击事件的监听接口封装类

    写项目时,要求仿微信朋友圈,双击顶栏置顶,于是封装了双击回调接口,方便大家拿来就用 /** * Created by Administrator on 2018/4/24. * 双击 */ public class OnDoubleClickListener implements View.OnTouchListener{ private int count = 0;//点击次数 private long firstClick = 0;//第一次点击时间 private long secondC

  • Kotlin 实现按钮点击跳转监听事件方式

    例子:首页Guiding页面点击按钮跳转到主页面 package com.example.naizu.mavec import android.app.Activity import android.content.Intent import android.os.Bundle import android.widget.Toast import kotlinx.android.synthetic.main.activity_guiding.* class Guiding : Activity(

随机推荐