快捷導(dǎo)航

JavaScript關(guān)于某元素點(diǎn)擊事件的監(jiān)聽和觸發(fā)

更新時(shí)間：2022年07月01日 10:30:01 作者：松子魷果果

本文主要介紹了JavaScript關(guān)于某元素點(diǎn)擊事件的監(jiān)聽和觸發(fā)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

一. 觸發(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");
}

兩種方法都可行，不過有些框架可能會(huì)覆寫了這些方法，導(dǎo)致方法失效，兩種方法都可以試試。

二. 觸發(fā)元素監(jiān)聽效果

最終實(shí)現(xiàn)效果：

監(jiān)聽a標(biāo)簽的點(diǎn)擊事件

方法一：原生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)聽實(shí)質(zhì)上就是給元素額外添加一個(gè)點(diǎn)擊事件，從而實(shí)現(xiàn)元素的監(jiān)聽。

到此這篇關(guān)于JavaScript關(guān)于某元素點(diǎn)擊事件的監(jiān)聽和觸發(fā)的文章就介紹到這了,更多相關(guān)JavaScript某元素點(diǎn)擊的監(jiān)聽和觸發(fā)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

JavaScript實(shí)現(xiàn)復(fù)選框全選功能
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)復(fù)選框全選功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-04-04
淺談Javascript事件對(duì)象
本文主要介紹了Javascript事件對(duì)象的相關(guān)實(shí)例。具有一定的參考價(jià)值，下面跟著小編一起來看下吧
2017-02-02
JavaScript中各種時(shí)間轉(zhuǎn)換問題詳解(YYYY-MM-DD、時(shí)間戳、中國(guó)標(biāo)準(zhǔn)時(shí)間)
在某些場(chǎng)景下,需要將時(shí)間轉(zhuǎn)換為字符串進(jìn)行展示或傳遞,下面這篇文章主要給大家介紹了關(guān)于JavaScript中各種時(shí)間轉(zhuǎn)換問題(YYYY-MM-DD、時(shí)間戳、中國(guó)標(biāo)準(zhǔn)時(shí)間)的相關(guān)資料,需要的朋友可以參考下
2024-02-02
微信小程序?qū)崿F(xiàn)表單校驗(yàn)功能
微信小程序最難實(shí)現(xiàn)的公共業(yè)務(wù)是什么？應(yīng)該是表單校驗(yàn)，這篇文章主要介紹了微信小程序如何實(shí)現(xiàn)表單校驗(yàn)功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-08-08
moment.js輕松實(shí)現(xiàn)獲取當(dāng)前日期是當(dāng)年的第幾周
這篇文章主要介紹了moment.js輕松實(shí)現(xiàn)獲取當(dāng)前日期是當(dāng)年的第幾周,需要的朋友可以參考下
2015-02-02
alixixi runcode.asp的代碼不錯(cuò)的應(yīng)用
alixixi runcode.asp的代碼不錯(cuò)的應(yīng)用...
2007-08-08
javascript嚴(yán)格模式詳解（含嚴(yán)格模式與非嚴(yán)格模式的區(qū)別）
這篇文章主要介紹了javascript嚴(yán)格模式詳解（含嚴(yán)格模式與非嚴(yán)格模式的區(qū)別）,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-11-11
javascript實(shí)現(xiàn)輪顯新聞標(biāo)題鏈接
這篇文章主要介紹了javascript實(shí)現(xiàn)輪顯新聞標(biāo)題鏈接的相關(guān)資料,需要的朋友可以參考下
2007-08-08
uniapp基礎(chǔ)篇之上傳圖片的實(shí)戰(zhàn)步驟
應(yīng)用uni-app開發(fā)跨平臺(tái)App項(xiàng)目時(shí),上傳圖片、文檔等資源功能需求十分常見,下面這篇文章主要給大家介紹了關(guān)于uniapp基礎(chǔ)篇之上傳圖片的相關(guān)資料,需要的朋友可以參考下
2022-12-12
JavaScript仿小米商城官網(wǎng)完整頁面實(shí)現(xiàn)流程
只能看不能玩的靜態(tài)頁面早就看夠了吧，今天我們來做一個(gè)相對(duì)完整的動(dòng)態(tài)網(wǎng)站，用Javascript來實(shí)現(xiàn)模仿小米的官網(wǎng)商城，感興趣的朋友快來看看吧
2021-11-11