iT邦幫忙

2021 iThome 鐵人賽

DAY 7
0
Modern Web

快搭上姐姐的`微`前端便車系列 第 7

第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();

附上程式碼
最後就完成拉!

本篇參考資料:
https://www.jquery123.com/change/
https://newbedev.com/javascript-js-trigger-change-event-code-example

講完第七篇惹,那之後就跟著姐姐往第八篇前進吧~~


上一篇
第6車廂-恩~人家被勾到了拉:checked應用篇
下一篇
第8車廂-抖動畫面流出!你真的會:hover嗎?
系列文
快搭上姐姐的`微`前端便車30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言