JavaScript關(guān)于某元素點擊事件的監(jiān)聽和觸發(fā)
更新時間：2022年07月01日 10:30:01 作者：松子魷果果
本文主要介紹了JavaScript關(guān)于某元素點擊事件的監(jiān)聽和觸發(fā)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
場景：在javascript中，如果引用了某個框架中的元素，元素已在原框架實現(xiàn)并內(nèi)置了點擊事件，此時我們希望自己新建的元素的點擊事件也觸發(fā)和前述元素一樣的效果。
舉例：假設(shè)現(xiàn)存在元素A，元素B
方法①：元素A的點擊事件會觸發(fā)元素B的點擊事件
方法②：直接監(jiān)聽元素B的點擊事件
一. 觸發(fā)元素同步效果
最終實現(xiàn)效果：
button標(biāo)簽的test()點擊事件綁定a標(biāo)簽的點擊事件
方法一： 原生JavaScript的click()點擊事件
function test(){
$(".layui-layer-max")[0].click();
}方法二：JQuery事件 — trigger()方法
function test(){
//trigger的參數(shù)除了"click"以外，還支持"select"、"focus"等等
$(".layui-layer-max").trigger("click");
}兩種方法都可行，不過有些框架可能會覆寫了這些方法，導(dǎo)致方法失效，兩種方法都可以試試。
二. 觸發(fā)元素監(jiān)聽效果
最終實現(xiàn)效果：
監(jiān)聽a標(biāo)簽的點擊事件
方法一： 原生JavaScript監(jiān)聽
$(".layui-layer-max")[0].addEventListener("click", test);
function test(){
console.log("EventListener success!")
}方法二：JQuery監(jiān)聽
$(".layui-layer-max").click(function(){
console.log("EventListener success!");
});元素觸發(fā)的監(jiān)聽實質(zhì)上就是給元素額外添加一個點擊事件，從而實現(xiàn)元素的監(jiān)聽。
到此這篇關(guān)于JavaScript關(guān)于某元素點擊事件的監(jiān)聽和觸發(fā)的文章就介紹到這了,更多相關(guān)JavaScript某元素點擊的監(jiān)聽和觸發(fā)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
表單驗證正則的代碼，大家可以參考下，可以直接拿來使用，也可以用來學(xué)習(xí)正則。2009-09-09
Prototype 1.5.0_rc1 及 Prototype 1.5.0 Pre0小抄本
Prototype 1.5.0_rc1 及 Prototype 1.5.0 Pre0小抄本...2006-09-09
JavaScript Dom實現(xiàn)輪播圖原理和實例
這篇文章主要為大家詳細介紹了JavaScript Dom實現(xiàn)輪播圖原理和實例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-02-02
這篇文章主要介紹了后臺獲取ZTREE選中節(jié)點的方法,實例分析了ZTREE中g(shù)etZTreeObj方法與getCheckedNodes方法的使用技巧,需要的朋友可以參考下2015-02-02
JavaScript是一門非常流行的編程語言，許多開發(fā)者都會把JavaScript選為入門語言，本文給大家分享javascript七大技巧(一)，對javascript技巧相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2015-12-12
本文主要介紹了localStorage的黑科技-js和css緩存機制的相關(guān)知識，具有一定的參考價值，下面跟著小編一起來看下吧2017-02-02
這篇文章主要為大家詳細介紹了js動態(tài)生成表格，進行節(jié)點操作，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-01-01
JavaScript實現(xiàn)顯示函數(shù)調(diào)用堆棧的方法
這篇文章主要介紹了JavaScript實現(xiàn)顯示函數(shù)調(diào)用堆棧的方法,實例分析了JavaScript顯示函數(shù)調(diào)用堆棧的具體作用與使用方法,需要的朋友可以參考下2016-04-04
下面小編就為大家?guī)硪黄猨s控制li的隱藏和顯示實例代碼。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
JavaScript中常用的3種彈出提示框(alert、confirm、prompt)
這篇文章主要給大家介紹了關(guān)于JavaScript中常用的3種彈出提示框(alert、confirm、prompt)的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11