事件 | 描述 |
---|---|
.blur() | 为 “blur” 事件绑定一个处理函数,或者触发元素上的 “blur” 事件(注:此事件不支持冒泡)。 |
.change() | 为JavaScript 的 “change” 事件绑定一个处理函数,或者触发元素上的 “change” 事件。 |
.focus() | 为 JavaScript 的 “focus” 事件绑定一个处理函数,或者触发元素上的 “focus” 事件。 |
.focusin() | 将一个事件函数绑定到"focusin" 事件。 |
.focusout() | 将一个事件函数绑定到"focusout" 事件。 |
.keydown() | 为 “keydown” 事件绑定一个处理函数,或者触发元素上的 “keydown” 事件。 |
.keypress() | 为 “keypress” 事件绑定一个处理函数,或者触发元素上的 “keypress” 事件。 |
.keyup() | 为 “keyup” 事件绑定一个处理函数,或者触发元素上的 “keyup” 事件。 |
例子:
表单事件
- .blur()
触发所有段落上的blur事件:
$("p").blur();
- .change()
为 select 元素添加 change 事件,将选中的项目显示在 div 中。
<!DOCTYPE html>
<html>
<head>
<style>
div { color:red; }
</style>
<script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<select name="sweets" multiple="multiple">
<option>Chocolate</option>
<option selected="selected">Candy</option>
<option>Taffy</option>
<option selected="selected">Caramel</option>
<option>Fudge</option>
<option>Cookie</option>
</select>
<div></div>
<script>
$("select").change(function () {
var str = "";
$("select option:selected").each(function () {
str += $(this).text() + " ";
});
$("div").text(str);
})
.change();
</script>
</body>
</html>
- .focus()
触发 focus 事件
<!DOCTYPE html>
<html>
<head>
<style>span {display:none;}</style>
<script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p><input type="text" /> <span>focus fire</span></p>
<p><input type="password" /> <span>focus fire</span></p>
<script>
$("input").focus(function () {
$(this).next("span").css('display','inline').fadeOut(1000);
});
</script>
</body>
</html>
- .focusin()
触发 focus 事件
<!DOCTYPE html>
<html>
<head>
<style>span {display:none;}</style>
<script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p><input type="text" /> <span>focus fire</span></p>
<p><input type="password" /> <span>focus fire</span></p>
<script>
$("input").focus(function () {
$(this).next("span").css('display','inline').fadeOut(1000);
});
</script>
</body>
</html>
- List item
监视段落内部失去焦点的情况。请注意 focusout 计数和 blur 计数的差异。
<!DOCTYPE html>
<html>
<head>
<style>
.inputs { float: left; margin-right: 1em; }
.inputs p { margin-top: 0; }
</style>
<script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div class="inputs">
<p>
<input type="text" /><br />
<input type="text" />
</p>
<p>
<input type="password" />
</p>
</div>
<div id="fo">focusout fire</div>
<div id="b">blur fire</div>
<script>
var fo = 0, b = 0;
$("p").focusout(function() {
fo++;
$("#fo")
.text("focusout fired: " + fo + "x");
}).blur(function() {
b++;
$("#b")
.text("blur fired: " + b + "x");
});
</script>
</body>
</html>
键盘事件
- .keydown()
当一个按键在文本框内被按下的时候显示事件对象
<!DOCTYPE html>
<html>
<head>
<style>
fieldset { margin-bottom: 1em; }
input { display: block; margin-bottom: .25em; }
#print-output {
width: 100%;
}
.print-output-line {
white-space: pre;
padding: 5px;
font-family: monaco, monospace;
font-size: .7em;
}
</style>
<script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<form>
<fieldset>
<label for="target">Type Something:</label>
<input id="target" type="text" />
</fieldset>
</form>
<button id="other">
Trigger the handler
</button>
<script type="text/javascript" src="/resources/events.js"></script>
<script>
var xTriggered = 0;
$('#target').keydown(function(event) {
if (event.which == 13) {
event.preventDefault();
}
xTriggered++;
var msg = 'Handler for .keydown() called ' + xTriggered + ' time(s).';
$.print(msg, 'html');
$.print(event);
});
$('#other').click(function() {
$('#target').keydown();
});</script>
</body>
</html>
- .keypress()
*在文本框中按下某个键时,显示 event 对象。注意:输出 event 对象时,要依赖一个简单的 $.print() 插件 *
<!DOCTYPE html>
<html>
<head>
<style>
fieldset { margin-bottom: 1em; }
input { display: block; margin-bottom: .25em; }
#print-output {
width: 100%;
}
.print-output-line {
white-space: pre;
padding: 5px;
font-family: monaco, monospace;
font-size: .7em;
}
</style>
<script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<form>
<fieldset>
<label for="target">Type Something:</label>
<input id="target" type="text" />
</fieldset>
</form>
<button id="other">
Trigger the handler
</button>
<script src="http://api.jquery.com/resources/events.js"></script>
<script>
var xTriggered = 0;
$("#target").keypress(function(event) {
if ( event.which == 13 ) {
event.preventDefault();
}
xTriggered++;
var msg = "Handler for .keypress() called " + xTriggered + " time(s).";
$.print( msg, "html" );
$.print( event );
});
$("#other").click(function() {
$("#target").keypress();
});</script>
</body>
</html>
- .keyup()
为 “keyup” 事件绑定一个处理函数,或者触发元素上的 “keyup” 事件。
<!DOCTYPE html>
<html>
<head>
<style>
fieldset { margin-bottom: 1em; }
input { display: block; margin-bottom: .25em; }
#print-output {
width: 100%;
}
.print-output-line {
white-space: pre;
padding: 5px;
font-family: monaco, monospace;
font-size: .7em;
}
</style>
<script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<form>
<fieldset>
<label for="target">Type Something:</label>
<input id="target" type="text" />
</fieldset>
</form>
<button id="other">
Trigger the handler
</button>
<script type="text/javascript" src="/resources/events.js"></script>
<script>
var xTriggered = 0;
$('#target').keyup(function(event) {
xTriggered++;
var msg = 'Handler for .keyup() called ' + xTriggered + ' time(s).';
$.print(msg, 'html');
$.print(event);
}).keydown(function(event) {
if (event.which == 13) {
event.preventDefault();
}
});
$('#other').click(function() {
$('#target').keyup();
});</script>
</body>
</html>