react、vue如何為所有原生標籤/元素綁定事件？

假設：

某個項目已經開發到某個版本了，突然有一天，希望為所有的a標籤，綁定點擊事件，做一些特殊處理。

如果是用jquery，那麼非常簡單：

$("a").on("click",handler);


如果是angular，可以定義一個指令：

app.directive("a", functioin(){
return {
restrict: "E",
link: function(scope, element) {
element.on("click", handler);
}
}
})


而且，angular允許定義同名的指令。

react定義a這樣的組件似乎不合適，vue的elementDirective也不識別原生元素。

那麼如果用react或vue，如何實現這樣的需求呢？

document.addEventListener("click", (e) =&> {
if(e.target.tagName === "A") {
// a標籤被點擊了
}
})


除了上原生的addEventListener，其實也可以直接用React的事件處理，因為React中的事件也是bubble up的，也就是子組件被點擊了，父組件也能夠獲得點擊事件。

比如有這樣的Parent和Child。

const clickHandler = (e) =&> {
// 當Child中元素被點擊時，這個函數一樣被調用
}

&
&
&
&;
};

const Child=({text, id} =&> {
return &&{text}&& };


---

let Dom = {

on: function (element, eventType, selector, fn) {
if (!element) return new Error("there are some error about element")
if (selector) {

element.addEventListener (eventType, e =&> {

if (e.target.tagName === selector) fn(e)
})
} else {

element.addEventListener (eventType, fn(e))

}

}

}

dom.on(ele, "click", "a", fn)

大該是這樣的思路？

---

vue不是側重dom操作，所以要完成你說的目標還是選擇jq之類的吧

---

vue同樣可以寫原生js

---

這麼簡單的需求。用原生實現就好啦

---

樓主解決了嗎？ 遇到同樣問題

---

我不理解為什麼你認為用了react和vue就不能用jquery了，有的情況model更新，界面不會更新，我認為這是vue的缺陷，angular就不存在這樣的問題

---

推薦閱讀：