题目要求
提供的代码是一个编辑器组件，但功能还不完善，需要为该编辑器的工具栏按钮绑定相关事件(可使用 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); ???????} ???}});给一组按钮绑定事件——[js练习]
原文地址：https://www.cnblogs.com/chivasknight/p/8279069.html