jQuery提供一系列的 event ,用於與用戶互動
可以在官網查詢所有的event語法,以下列幾種常見的
將javascript的onClick事件與元素綁定
// 新增一個div
<div id="target">
Click here
</div>
// 當target被點擊時,跳出alert
$( "#target" ).click(function() {
alert( "Handler for .click() called." );
});
上述三個語法語原生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." );
});
從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>