iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 20
0

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>

上一篇
Day19_jQuery-Objective
下一篇
Day21_Bootstrap-Get Start
系列文
前端網頁設計學習旅程30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言