2. 程式人生 > >Javascript事件繫結的一個坑

Javascript事件繫結的一個坑

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

JS支援在函式內定義函式，內部函式可以訪問外部函式的區域性變數，但訪問時機的不同，會導致結果的不同

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script
    src="https://code.jquery.com/jquery-1.12.4.min.js"
    integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
 

    crossorigin="anonymous"></script>
  <script type="application/javascript">
$(document).ready(function () {
  var level = 0;
  for (var i = 0; i < $("#tab").children.length; i++){
    if (level == 0){
      $("#row" + i).on("click", function () {
        $(this).children().eq(0).text(""
 
 + i);
      });
    }else if (level == 1){
      $("#row"+i).on("click", i, function (event) {
        $(this).children().eq(0).text(""+event.data);
      });
    }
  }
});
  </script>
</head>
<body>
<table id="tab">
  <tr id="row0"><td>row0</td></tr>
  <tr
 
 id="row1"><td>row1</td></tr>
</table>
</body>
</html>

滑鼠點選表格前，頁面是這樣的
初始
level==0 時，內部函式定義沒有繫結i的值，執行時從閉包獲取i為2
level==0
level==1時，內部函式定義時綁定了i的值，執行時不從閉包獲取值
level==1
JavaScript的函式是第一類物件，所以函式的定義也是可以在執行時進行的，這就造成函式的定義和函式的執行很可能在時間上有間隔，定義時閉包等上下文資訊在執行時可能已發生變化。
另外，大家可以看看這篇文章的典型誤區一節，可以加深理解

相關推薦

Javascript事件繫結的一個坑

JS支援在函式內定義函式，內部函式可以訪問外部函式的區域性變數，但訪問時機的不同，會導致結果的不同 <!DOCTYPE html> <html lang="en"> <

react-redux實現todolist增加刪除功能，解決JavaScript事件繫結問題

react-redux實現todolist增加刪除功能，解決JavaScript事件繫結問題 1.建立TodoList元件 在react-redux中使用connect將元件和store做連線。mapStateToProps 會將state掛載到元件的props上，mapDispatch

JavaScript事件繫結、事件解除、DOM載入完成，相容IE8+

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-e

Vue一個案例引發的動態元件與全域性事件繫結總結

最近在自學 Vue 也瞭解了一些基本用法，也記錄了一些筆記有興趣的朋友可以去檢視我的其他文章，技術這東西真的不能光靠看，看是沒有的，你必須要動手實踐，只有在實戰專案中才能發現問題，才能發現我們沒有掌握的知識點，然後發現問題解決問題，我們的能力才能得以提升，要不然就有點眼高手低了。 基於這個想法於是就開始自己

Javascript中事件繫結的函式加括號和不加括號的區別

今天在學習javascript中的時候遇到了一個問題,我將此問題簡化，抽取部分程式碼，如下： 說明:#fname為一個按鈕,test是一個普通函式 test函式 function test() { alert("執行test函式"); }

JavaScript-D3入門四-事件繫結

直接給出可以在WebServer中執行的程式碼，通過這個示例，你可以知道如何進行事件繫結 表格資料官方建議用csv執行效率高 d3ia_2.html <html> <head> <title>D3 in Action Examples</tit

JavaScript 回車鍵繫結登入 事件 常用鍵位碼（keyCode）

1、回車鍵繫結登入事件 $(document).keydown(function (e) { if ((e.keyCode || e.which) == 13) { //document.querySelector(".login-button").click();　　　　do

理解Javascript中的事件繫結與事件委託（轉載）

最近在深入實踐js中，遇到了一些問題，比如我需要為動態建立的DOM元素繫結事件，那麼普通的事件繫結就不行了，於是通過上網查資料瞭解到事件委託，因此想總結一下js中的事件繫結與事件委託。 事件繫結 最直接的事件繫結：HTML事件處理程式 如下示例程式碼，通過節點屬性顯式宣

【v-on】一個元素繫結多個事件以及一個事件繫結多個函式的兩種寫法

本文程式碼主要講述了v-on繫結事件函式傳參，一個元素繫結多個事件的兩種寫法，一個事件繫結多個函式的兩種寫法，修飾符的使用。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8

JavaScript動態繫結事件

什麼是動態繫結事件？ js最突出優點在於能動態修改頁面樣式和動態修改頁面內容，然而在我們開發過程中，將動態新增的元素中繫結事件的現象稱為動態繫結事件。 動態繫結無法觸發js的案例？ <html> <head> <meta char

js做固釘效果 在滾動事件繫結時碰到的坑DOMMouseScroll

在使用vue做 “固釘” 效果時，碰到了以下巨坑 我是這樣子繫結滾動監聽事件的： if (document.addEventListener) { document.addEventListener('DOMMouseScroll', this.onScroll, false)

前端筆記43——JavaScript中時事件繫結函式

前言 在上篇部落格《前端筆記42——JavaScript中函式》中，我們有說起JavaScript中的函式。在平時開發中我們點選事件要用的函式，我們要怎麼繫結讓使用者觸發的事件繫結函式呢？下面來接受方法。 事件繫結函式 程式碼例項： <!DOCTYPE html&g

JavaScript中，四種事件繫結方法及attachEvent與addEventListener的區別

        我們在對事件進行繫結的時候，除了常用的對元素物件後面通過點加屬性來事件繫結，如： a.onclick = function(){ //code }        我們還能通過attachEvent和addEventListener來進行事件繫結，這兩

javascript中事件流，事件相容，事件繫結

1，事件流 事件流描述的是從頁面中接收事件的順序。 事件流是描述的從頁面接受事件的順序，當幾個都具有事件的元 素層疊在一起的時候，那麼你點選其中一個元素，並不是只有當前被 點選的元素會觸發事件，而層疊在你點選範圍的所有元素都會觸發事 件。事件流包括兩種模式： 冒泡和捕獲。 事件捕獲：

用jquery 繫結一個按鈕click事件後，第一次點選後，一切正常，第二次點選，竟然執行兩次，以後越來越多

用jquery  繫結一個按鈕click事件後，第一次點選後，一切正常，第二次點選，竟然執行兩次，以後越來越多。 後來檢視文件發現  jquery click  不是 替換原有的function  而是接著新增，所以才會執行次數越來越多。 這有就可以在新增之前要先解除cli

用jquery 繫結一個按鈕click事件後，第一次點選後，一切正常，第二次點選，竟然執行兩次，以後越來越多

用jquery  繫結一個按鈕click事件後，第一次點選後，一切正常，第二次點選，竟然執行兩次，以後越來越多， 後來檢視文件發現  jquery click  不是 替換原有的function  而是接著新增，所以才

js多個物件繫結一個事件的方法

關於一個物件繫結多個事件的方法之前轉載過一篇文章，講這方面的文章也比較多，但是在多個物件上繫結同一事件的問題困擾了我許久，今天終於找到了解決方案，兩中方法都是基於JQuery實現的： 方法一：  首先獲取三個要繫結事件的物件，var a = $("#a"), b = $("#b"),c = $("#c");

JavaScript中click和keypress事件繫結的順序

1. click事件的覆蓋 當在同一個元素上繫結兩個click事件時，後一個會覆蓋前一個。 例如： div.onclick=function(){ console.log('click1');

例項分析JavaScript中的事件委託和事件繫結

　我們在學習JavaScript中，難免都會去網上查一些資料。也許偶爾就會遇到“事件委託”（也有的稱我“事件代理”，這裡不評論誰是誰非。以下全部稱為“事件委託”），尤其是在查JavaScript的事件處理的時候。但是，大多數時說的是“事件繫結”，對於“事件委託”，或是

JavaScript(1)---繫結事件、解除繫結事件

JavaScript(1)---繫結事件、解除繫結事件 一、事件概述 1、事件的幾個概念 · 事件 指的是文件或者瀏覽器視窗中發生的一些特定互動瞬間。我們可以通過偵聽器（或者處理程式）來預定事件，以便觸發事件的時候執行相應的程式碼。 事件處理程式 我們使用者在頁面中進行的點選動作(click)、滑鼠移動動作