给一组按钮绑定事件—

给一组按钮绑定事件——[js练习]

题目要求

提供的代码是一个编辑器组件，但功能还不完善，需要为该编辑器的工具栏按钮绑定相关事件(可使用 jQuery )，具体要求如下：

1、为 #js-add-fontsize 元素绑定 click 事件

当事件触发后改变编辑器内文本字体为 20px。

2、为 #js-change-bg 元素绑定 click 事件

当事件触发后改变编辑器的背景颜色色值为 "#6b6b6b", 文字颜色为 "#fff"。

3、为 #js-toggle-opacity 按钮元素绑定 click 事件

当事件触发后，如果 #editor 元素透明度（ opacity ）大于 0, 则设置 #editor 元素透明度为 0，否则设置 #editor 元素透明度为 1。

HTML结构如下：

<!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，还有把数字也用引号包裹了，还有没用逗号用的==/=

官答：

实现编辑器按钮的功能，可以有两种方式：

1、在每个按钮元素上添加事件监听器

思路：

获取编辑器元素和按钮元素
给每个按钮写一次事件绑定

// 获取编辑器元素
var $editor = $('#editor');
/*
 * 1、为 #js-add-fontsize 元素绑定 click 事件
 * 当事件触发后改变编辑器内文本字体增大 2 px，如原来字体大小为 12 px，点击 #button1 则变成 14px
 */
$('#js-add-fontsize').click(function() {v
  $editor.css('font-size', '20px');
});
/*
 * 2、为 #js-change-bg 元素绑定 click 事件
 * 当事件触发后改变编辑器的背景颜色色值为 "#6b6b6b", 文字颜色为 "#fff"
 */
$('#js-change-bg').click(function() {
  $editor.css({
    'background-color': '#6b6b6b',
    'color': '#fff'
  });
});
/*
 * 3、为 #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);
  }
});

2、使用事件代理（委托）

思路：

获取编辑器元素和按钮父元素 #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);
        }
    }
});