第7车厢-讨厌~叫人家开要干嘛?触发check事件应用篇

本篇延续第六篇按钮开关样板，来触发之後的行为

昨天做了一个开关，那要怎麽透过科好的按钮，来判断之後要做的行为呢?
并以原生js来判断，平常都是用jq写...都已忘了原生写法

范例:
判断为开，我就在下方新增文字"开"
判断为关，我就在下方新增文字"关"

范例流程是
透过按钮发生改变时，判断是勾选状态还是未被勾选状态
如果勾选，就在下方新增文字"开"
如果未被勾选，我就在下方新增文字"关"

怎麽判断是被勾选到的状态呢?

原来在js里面，是用.checked 来设置或返回是否应被选中

//语法
checkboxObject.checked=true|false

详细可看w3school

而判断触发的元素为

e.target

而event.currentTarget则是事件系结的元素，

虽然已完成想要的功能了

这样我还想要....画面一进来，就要判断他是否被勾选并显示画面呢?
checkbox偏偏没被改变阿，要怎麽直接让他触发change事件呢?

在jq写法可以使用tigger来触发指定的事件方法
例如:

$( "#foo" ).on( "change", function() {
  alert( $( this ).text() );
});
$( "#foo" ).trigger( "change" );

或是

$( "#foo" ).on( "change", function() {
  alert( $( this ).text() );
}).change();

▲这个方法之前我也是特别爬文才知道耶!

那js呢?我示范以下方式

1.使用dispatchEvent方法

dispatchEvent 可於 EventTarget 物件上触发特定/自定义的 Event 物件实体，相当於依照注册的顺序呼叫它的 EventListener。

//html
<div>
  <input type="checkbox" id="demoCheckbox">
  <label for="demoCheckbox" class="labelCheckbox">  </label>
</div>

<p id="box"></p>

//JS
const checkbox = document.getElementById('demoCheckbox');
const boxTxt = document.getElementById('box');

checkbox.addEventListener('change', (e) => {
  if (e.target.checked) {
    boxTxt.innerText=`开 ${e.target.checked}`;
  } else {
   boxTxt.innerText=`关 ${e.target.checked}`;
  }
});

/*手动触发*/
checkbox.dispatchEvent(new Event('change'));

附上程序码
2.element.onchange();
使用这个方法需於HTML先加上onchange方法，之後再呼叫一次;

//HTML
<div>
  <input type="checkbox" id="demoCheckbox" onchange="touch(this);" >
  <label for="demoCheckbox" class="labelCheckbox">  </label>
</div>

<p id="box"></p>

//JS
function touch(e){
    if (e.checked) {
     boxTxt.innerText="开";
  } else {
     boxTxt.innerText="关";
  }
}

checkbox.onchange();

附上程序码
最後就完成拉!