Day20_jQuery-Event

第 12 屆 iThome 鐵人賽

DAY 20

Modern Web

前端網頁設計學習旅程系列第 20 篇

12th鐵人賽

髮量稀疏的中年大叔

2020-10-02 22:51:10

759 瀏覽

分享至

Event

jQuery提供一系列的 event ，用於與用戶互動
可以在官網查詢所有的event語法，以下列幾種常見的

.click()

將javascript的onClick事件與元素綁定

// 新增一個div
<div id="target">
  Click here
</div>

// 當target被點擊時，跳出alert
$( "#target" ).click(function() {
  alert( "Handler for .click() called." );
});

.keydown(), .keyup(), .keypress()

上述三個語法語原生javascript語法作用相同

// 建立一個input
<form>
  <fieldset>
    <input id="target" type="text" value="Hello there">
  </fieldset>
</form>

// 監聽keydown事件，並且popup
$( "#target" ).keydown(function() {
  console.log( "Handler for .keydown() called." );
});

// 監聽keyup事件，並且popup
$( "#target" ).keyup(function() {
  console.log( "Handler for .keyup() called." );
});

// 監聽keypress事件，並且popup
$( "#target" ).keypress(function() {
  console.log( "Handler for .keypress() called." );
});

on()

從jQuery 1.7開始,on()函式提供了繫結事件處理程式所需的所有功能
以click事件舉例，click()只能處理事先定義的元素
而on()則使得動態新增的元素也能被點選觸發函式

<body> 
    <ul> 
        <li>1</li> 
        <li>2</li> 
        <li>3</li> 
        <li>4</li> 
    </ul> 
    <script src="jquery.min.js"></script> 
    <script> $(function(){ 
        $('body').on('click','ul>li',function(){ 
            console.log($(this).html()); 
        }); 
        $('ul').append('
            <li>5</li>
            <li>6</li>
        '); 
    }) </script>
</body>