在前端开发中，经常会涉及到表单的处理，尤其是单选框（radio）的处理，比如初始值设置、选中状态判断、选中值获取等。
can-event-dom-radiochange 是一个 npm 包，专门针对单选框的变化进行封装，方便开发者快速处理单选框相关的操作。
1. 安装
可以使用 npm 进行安装：
npm install can-event-dom-radiochange
2. 使用
2.1 引入模块
安装后，在需要使用的文件中引入 can-event-dom-radiochange 模块：
import 'can-event-dom-radiochange';
2.2 绑定事件
通过 can-event-dom-radiochange 提供的 can-dom-events 提供的 on 方法，可以对单选框绑定事件监听：
import can from 'can';
import 'can-event-dom-radiochange';
const radio = document.querySelector('input[type=radio]');
can.on.call(radio, 'radiochange', function(event) {
console.log(event);
});可以看到，事件名是 'radiochange'，回调函数会接收一个 event 对象。
2.3 获取选中的值
借助 can-event-dom-radiochange，可以方便地获取选中的值：
import can from 'can';
import 'can-event-dom-radiochange';
const radios = document.querySelectorAll('input[type=radio]');
const currentValue = can.getAttributeName(radios, ':checked:value');
console.log(currentValue);radios 变量是一组单选框元素，使用 can.getAttributeName 获取选中的单选框元素的 value。
2.4 示例代码
<div> <input type="radio" name="gender" value="male" checked> Male<br> <input type="radio" name="gender" value="female"> Female<br> <button id="btn-submit">提交</button> </div>
-- -------------------- ---- ------- ------ --- ---- ------ ------ ---------------------------- ----- ------ - ----------------------------------------------- ------------------- -------------- --------------- - -------------------------------- --- ----- --------- - -------------------------------------- ---------------------- -------- ---------- - ----- ------------ - ---------------------------- ------------------ -------------------------- ---
3. 指导意义
can-event-dom-radiochange 模块封装了单选框的变化事件，结合 can 对 DOM 进行操作，使得开发者能够方便地对单选框进行事件监听和操作。同时，can-event-dom-radiochange 模块源码十分简单，可以帮助开发者学习如何编写类似的 npm 包。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/75699