原生js繫結事件方法簡單封裝

阿新 • • 發佈：2019-01-14

const ListenerFN = function ({ target, event, FN, option = {} }) {
  if (target, event, FN) Error('target, event, FN');
  target.addEventListener(event, FN, option);
  return function () {
    target.removeEventListener(event, FN);
  };
};

傳入dom物件,觸發事件,回撥方法,需要通過引數接參;

const removeFN = ListenerFN({
      target,
      FN,
      event,
 });

返回一個移除繫結的方法,再次執行後,移除繫結;

removeFN();

原生js繫結事件方法簡單封裝

const ListenerFN = function ({ target, event, FN, option = {} }) { if (target, event, FN) Error('ta

原生JS繫結事件的相容性寫法與繫結事件的幾種方法

繫結事件算是DOM操作裡面最基本的事情了，通常繫結事件的方式有以下一種： 1.形如內聯樣式的時間繫結： <input typ

js繫結事件方法：addEventListener與attachEvent的不同瀏覽器的相容性寫法

js的事件繫結方法中，ie只支援attachEvent,而FF和Chrome只支援addEventListener，所以就必須為這兩個方法做相容處理，原理是先判斷attachEvent只否為真（存在），如果為真則用attachEvent（）方法，否則的話就用addEvent

中文輸入法觸發input事件 js繫結事件:addEventListener和on的區別 select下拉框用empty()方法清空option

中文輸入法觸發input事件 compositionstart 當瀏覽器有非直接的文字輸入時, compositionstart事件觸發. compositionend 當瀏覽器是直接的文字輸入時, compositionend事件觸發解決方法：這裡還有一個問題：在有些瀏

js 繫結事件函式的方法

要想讓 JavaScript 對使用者的操作作出響應，首先要對 DOM 元素繫結事件處理函式。所謂事件處理函式，就是處理使用者操作的函式，不同的操作對應不同的名稱。在JavaScript中，有三種常用的繫結事件的方法：在DOM元素中直接繫結；在JavaScript程式碼中繫結；繫結事件監聽函式。一.

2種js動態繫結事件方法

1、使用原生JS動態為動態建立的物件繫結事件1-1、建立一個function，用來相容IE8以下瀏覽器新增事件 function addEvent(el, type, fun) { if (el.addEventListener) {

js繫結事件相容性寫法

<html> <body> <div id="div1">點我繫結事件</div> <script> var addEvent = function( elem, type, handler ){　　//重寫addEvent的好處是下一次呼叫時

js繫結事件

一、問題描述實際學習與工作中可能會有這樣的需求：在移動web中給有重疊的兩個元素都添加了點選事件，當觸發上方的元素的時候同時也會透過該元素觸發下面的元素。這就是點透，然而這並不是我想要的效果。二、例子下面通過多種方式來模擬感受點透： <div class="tap"&g

關於ajax區域性重新整理後，js繫結事件失效的問題

百度了一下，csdn上有高手回答了很多很細簡單理解：繫結事件在文件沒有載入完成的時候是無法繫結的，因為不能獲取到html 元素所以需要用 $(document).on(e,selector,function()) 來繫結事件 $(document).on('ch

jQuery bind/One/live三種繫結事件方法的區別

1. bind/Unbind 在jquery的事件模型中，有兩個基本的事件綁定函式，bind與unbind，這兩個函式的含義就是匹配頁面元素進行相關事件的處理。比如我們在JS中經常使用到的 onfocus，onblur，onmouseover，onmousedown等事件都可以作為bind的引數進行傳遞。$

原生js和jquery框架下繫結事件的方法

一、原生js的事件的繫結 1、通過JavaScript物件屬性進行繫結 document.getElementById("test1").onclick=function(){alert("你好！")}; document.getElementsByTagName ("te

JS實現迴圈給元素繫結事件的幾個常用方法

作為一個JS的初學者，想對一些元素迴圈繫結事件的時候總是出現各種問題，尤其是在對閉包沒有熟練掌握的時候更是一頭霧水。網上一查，果然好多初學者有這個困惑，既然這個問題總是出現，於是在我就總結了以下兩個比較好理解的解決方案，分享給大家：（可能還有更好的方式我沒有發現，請各位前輩

原生js事件批量繫結-事件委託

我們常常會遇到一個需求，就是給表格裡面的每個特定的td繫結一個事件. 遇到這種需求，很多人基本都會想到如下程式碼： var td = document.getElementsByTagName("td"); for( let i =0; i<

關於Vue.js中資料模型的繫結以及方法事件的繫結與呼叫

在vue.js中，我們可以將事件方法寫在methods屬性中,資料模型在data中定義Vue的基本結構如下（只寫最常用的）：將資料與vue例項繫結通過v-bind標籤這裡繫結的是sourceId這個值，基於vue的雙向繫結，如果要取vue的資料模型中的資料，使用{{param

js 回車鍵繫結事件

js解決動態繫結事件時不能傳參的問題

問題描述: js使用dom給元素繫結事件時如果直接傳入引數, 會有傳參失敗並且語句會執行並沒有成功繫結事件的情況舉個例子,假如我們有一個div (id="div1"), 我們想給它繫結一個onclick事件並傳入字串引數: (錯誤案例, 會導致如上後果) var div=doc

JQuery繫結事件bind（）方法和on（）方法的優缺點

jQuery繫結事件的方法有四種：bing（）、live（）、delegate（）、on（），其中live（），已經被淘汰了，其存在很多的問題，不適合使用，而delegate能夠在繫結事件後，依然可以新增動態元素事件。on（）可以說是前三種方法的結合體。 1.bind（）方法： b

jquery中匿名函式、選擇器、方法呼叫、繫結事件

轉載地址： https://blog.csdn.net/ideality_hunter/article/details/77935656 http://www.cnblogs.com/si-shaohua/p/3760286.html https://www.cnblogs.com/de

關於js中繫結事件失效問題

相信很多開始學習前端開發的朋友都發生過繫結事件失效的問題，那麼究竟是什麼原因使得事件失效呢？這裡作者以jquery庫編寫作為例子。第一種：直接失效。 <html> <head> <script type="text/javascript" src="/j

jQuery: Ajax動態載入內容on()繫結事件無效的解決方法

問題描述這是一個很普遍但又經常犯錯的問題，還是記錄一下。一個例子 HTML: <div id="the_div"> </div> <button id="btn">test</button> javascript

原生js繫結事件方法簡單封裝

相關推薦