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