標籤彙整:click

【JavaScript】Event Listener 監聽事件一覽

用法

①透過特定event觸發動作

用法基礎篇

目標物.addEventListener("特定的event", 
 function(){
  //這邊寫要觸發的動作
 }
)

②操控目標元素完成某動作

用#button按鈕操控,讓超連結#theURL被點擊

a#theURL(href="ianchen.thisistap.com") 超連結
br
button(onclick="openURL()") click it and open the URL
//onclick的用法參見下方
function openURL(){
 theURL.click();
}

Display

超連結

③ON+EVENT名稱:用HTML直接呼叫 function

基礎範例

HTML用法:on+event名=”函式名()”
※如果要呼叫event的話,需要使用這種形式:on+event名=”函式名(event)”

【例如】click event & makeItBigger function
→onclick="makeItBigger()" 
//這個東西放在HTML tag裡面
//記得要另外寫makeItBigger這個函式

【上述用法等同】
id.eventListener("click", makeitBigger());

滑鼠相關監聽事件

  1. click event:滑鼠按下→觸發事件
  2. mousemove event:滑鼠移動→觸發事件
  3. mousedown event:滑鼠按下去的瞬間→觸發事件
  4. mouseout event:滑鼠離開→觸發事件
  5. mouseup event:滑鼠按下、離開的瞬間→觸發事件

打字相關監聽事件

  1. focus event:聚焦(點選到)該元素→觸發事件
    ※可以用滑鼠點選觸發focus,某些情況下也可以用鍵盤選取(Tab鍵),觸發focus
  2. blur event:focus的相反,離開該元素後→觸發事件
  3. keydown event:鍵盤按下時→觸發動作
  4. keyup event:鍵盤按下後鬆開→觸發動作
  5. input event:輸入文字→觸發動作

其他監聽事件

  1. transitionend event:漸變結束後→觸發事件
  2. change event:<input>狀態改變時→觸發事件
    【例】下拉式選單:變更選項→觸發事件
    【例】核取方塊:勾選 / 取消勾選→觸發事件

 

jQuery 初階滑鼠事件 Click / Hover

原生JavaScript版

function()

function(),就是一連串的動作,後面一定要接()
$(this),係指function的母事件所指定的元素

點擊觸發,與紀錄購買狀態(click)

 .buybtn 點擊購買
.buybtn
  border: 1px solid #000
  display: inline-block
  padding: 10px 20px
  cursor: pointer
 
.buyed
  border: 1px solid #000
  background-color: #f24
  color: white
$(".buybtn").click(
  function() {
    $(this).text("已經購買");
    $(this).addClass("buyed");
  }
);

$(this)操作觸發的案件:請選擇物品

.selbtn(data-cata="tree") 選擇物品一
.selbtn(data-cata="sea") 選擇物品二
.selbtn(data-cata="flower") 選擇物品三
h4.show-info 已選擇物品:無
h4.show-cata 已選擇種類
.selbtn
  border: 1px solid #000
  display: inline-block
  padding: 10px 20px
  cursor: pointer
  font-family: 微軟正黑體
  letter-spacing: 1px
  transition-duration: 1s

.show-info
  font-family: 微軟正黑體
  letter-spacing: 1px
  transition-duration: 1s

.show-cata
  font-family: 微軟正黑體
  letter-spacing: 1px
  transition-duration: 1s
$(".selbtn").click(
  function() {
    //.text包空的表示選取前面this的文字
    $(".show-info").text($(this).text());
    //.attr選取html裡面的屬性
    $(".show-cata").text($(this).attr("data-cata"));
    //等於要兩個等號
    //事件用{}包住
    //符合→條件式後面直接加符合事件
    //不符合→else後面加不符合事件
    if ($(this).attr("data-cata") == "flower") {
      $(".show-cata").append(",他買的是花");
    } else {
      $(".show-cata").append(",NO他買的是不是花ˊˋ");
    }
  }
);

滑鼠的移入移出

.mbtn 使用者移入了嗎?
.mbtn
  border: 2px solid #000
  display: inline-block
  padding: 10px 20px
  cursor: pointer
  font-family: 微軟正黑體
  letter-spacing: 1px
  transition-duration: 1s
$(".mbtn").mouseenter(
  function() {
    $(this).css("background-color", "#333");
    $(this).css("color", "#fff");
    $(this).text("使用者進入了!!");
  }
);

$(".mbtn").mouseleave(
  function() {
    $(this).css("background-color", "#fff");
    $(this).css("color", "#333");
    $(this).text("使用者離開了 :(");
  }
);

setTimeout:一定時間後的效果

.timerbox 10秒之後這裡變紅色
.timerbox
  border: 2px solid #000
  display: inline-block
  padding: 10px 20px
  cursor: pointer
  font-family: 微軟正黑體
  letter-spacing: 1px
  transition-duration: 1s
//setTimeout(事件, 毫秒);→經過特定時間後執行
setTimeout(
  function() {
    $(".timerbox").css("background-color", "#f24");
  }, 10000);

進階:倒數計時器製作

.countbox 經過了×××秒
.countbox
  font-family: 微軟正黑體
  letter-spacing: 1px
  transition-duration: 1s
var nowtime = 0;

//setInterval(事件, 毎隔多少秒改變的秒數)→毎隔×秒後會出現的效果
setInterval(
  function() {
    nowtime = nowtime + 1
    //.text("原本的文"+變數名稱+"字")→變數置入文字中
    $(".countbox").text("已經經過" + nowtime + "秒");
  }, 1000);
   //表示毎經過一秒,會觸發兩個動作
   //1 nowtime+1
   //2 nowtime的値更新在文字上