給一組按鈕綁定事件——[js練習]

時間 2019-12-05

標籤一組按鈕綁定事件練習欄目 JavaScript 简体版

原文原文鏈接

題目要求

提供的代碼是一個編輯器組件，但功能還不完善，須要爲該編輯器的工具欄按鈕綁定相關事件(可以使用 jQuery )，具體要求以下：css

一、爲 #js-add-fontsize 元素綁定 click 事件

當事件觸發後改變編輯器內文本字體爲 20px。html

二、爲 #js-change-bg 元素綁定 click 事件

當事件觸發後改變編輯器的背景顏色色值爲 "#6b6b6b", 文字顏色爲 "#fff"。前端

三、爲 #js-toggle-opacity 按鈕元素綁定 click 事件

當事件觸發後，若是 #editor 元素透明度（ opacity ）大於 0, 則設置 #editor 元素透明度爲 0，不然設置 #editor 元素透明度爲 1。jquery

HTML結構以下：web

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>編寫一個 jQuery 事件監聽器</title>
    <style>
      #editor {
        width: 90%;
        display: block;
        height: 300px;
        margin: 20px auto;
        padding: 10px;
        font-size: 14px;
        line-height: 1.5;
        background-color: '#fff';
        color: '#000';
      }
      #operation {
        text-align: center
      }
      button {
        background: #fff;
        color: #000;
        border: 2px solid #000;
        padding: 10px;
        border-radius: 4px;
      }
    </style>
</head>
<body>
    <!-- 請在index.js文件中完成練習    -->
    <textarea id="editor">
      通過剛纔的學習，相信你對Next學位有必定的瞭解了。所謂千里之行，始於足下，如今咱們着手開始第一份項目做業吧：）
      項目說明
      在開始專業學習前，咱們想先聽聽你的聲音，因此但願你根據如下兩點寫一篇簡單的感想：
      分享一下你想成爲前端工程師的初衷是什麼；
      寫下你對將來職業的規劃，包括你的階段性目標、你最終但願達到的目標；
      建議你將本身的真實想法寫下來，這有助於咱們進一步瞭解你。你的做業將會由咱們Imweb的技術專家團來審閱，他們會結合本身的經驗，給你提出一些有價值的建議。
      項目審閱規則
      收到你的項目做業後，咱們會在7天內將審閱結果反饋給你，請屆時返回此頁面進行查看。
    </textarea>
    <div id="operation">
      <button id="js-add-fontsize">編輯器文字變大</button>
      <button id="js-change-bg">編輯器顏色變暗</button>
      <button id="js-toggle-opacity">顯示/隱藏編輯器</button>
    </div>
    <!-- 引入jQuery-->
    <script src="https://7.url.cn/edu/jslib/jquery/1.9.1/jquery.min.js"></script>
</body>
</html>

要求寫的index.js以下前端工程師

var $editor = $('#editor');  //已給

$('#js-add-fontsize').on('click',function(event){
   $editor.css('font-size','20px');
});

$('#js-change-bg').on('click',function(event){
    $editor.css('background','#6b6b6b');
    $editor.css('color','#fff');
});

$('#js-toggle-opacity').on('click',function(event){
   if ($editor.css('opacity')>0) {
       $editor.css('opacity',0);
   }
   else{
       $editor.css('opacity',1);
   }
});

注意：第一次沒對的緣由在於——#editor 元素透明度（ opacity ）判斷和後期取值的寫法問題編輯器

一開始漏了其中的css，還有把數字也用引號包裹了，還有沒用逗號用的==/=函數

官答：工具

實現編輯器按鈕的功能，能夠有兩種方式：性能

一、在每一個按鈕元素上添加事件監聽器

思路：

獲取編輯器元素和按鈕元素
給每一個按鈕寫一次事件綁定

// 獲取編輯器元素
var $editor = $('#editor');
/*
 * 一、爲 #js-add-fontsize 元素綁定 click 事件
 * 當事件觸發後改變編輯器內文本字體增大 2 px，如原來字體大小爲 12 px，點擊 #button1 則變成 14px
 */
$('#js-add-fontsize').click(function() {v
  $editor.css('font-size', '20px');
});
/*
 * 二、爲 #js-change-bg 元素綁定 click 事件
 * 當事件觸發後改變編輯器的背景顏色色值爲 "#6b6b6b", 文字顏色爲 "#fff"
 */
$('#js-change-bg').click(function() {
  $editor.css({
    'background-color': '#6b6b6b',
    'color': '#fff'
  });
});
/*
 * 三、爲 #js-toggle-visibility 按鈕元素綁定 click 事件
 * 當事件觸發後，若是 #editor 元素透明度（ opactity ）大於 0, 則設置 #editor 元素透明度爲1，不然設置 #editor 元素透明度爲0
 */
$('#js-toggle-opacity').click(function() {
  if ($editor.css('opacity') > 0) {
    $editor.css('opacity', 0);
  } else {
    $editor.css('opacity', 1);
  }
});

二、使用事件代理（委託）

思路：

獲取編輯器元素和按鈕父元素 #operation
將按鈕的事件委託到按鈕父元素，經過按鈕父元素來分發請求

需瞭解的是：事件委託是事件冒泡的一個應用，將事件的監聽和執行操做徹底委託給了其父節點，能夠減小子元素綁定事件的個數，也沒必要擔憂子節點被替換後可能須要進行從新的事件綁定。若是頁面中含有大量元素須要綁定事件，這樣作會減小事件綁定數量，同時提升頁面性能。

在事件綁定上，jQuery 提供了一種更通用的函數：

on(events,[selector],[data],fn)

參數：

events:一個或多個用空格分隔的事件類型和可選的命名空間，如"click"或"keydown.myPlugin" 。
selector[可選]:一個選擇器字符串用於過濾器的觸發事件的選擇器元素的後代。若是選擇的< null或省略，當它到達選定的元素，事件老是觸發。
data[可選]:當一個事件被觸發時要傳遞event.data給事件處理函數。
fn:該事件被觸發時執行的函數。 false 值也能夠作一個函數的簡寫，返回false。
將上述的功能改用on函數實現

下面所示：

var $editor = $('#editor');
$('#operation').on('click', 'button', function() {
    // 獲取button的id
    var btnId = $(this).attr('id');
    switch(btnId) {
      case 'js-add-fontsize':
        $editor.css('font-size', '20px');
        break;
      case 'js-change-bg':
        $editor.css({
          'background-color': '#6b6b6b',
          'color': '#fff'
        });
        break;
      case 'js-toggle-opacity':
        if ($editor.css('opacity') > 0) {
          $editor.css('opacity', 0);
        } else {
          $editor.css('opacity', 1);
        }
    }
});

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。