input框事件
2018-07-25 本文已影响0人
WANGLIN_HZ
input框事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>input框事件</title>
<style type="text/css">
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
// //一开始就获取焦点，相当于设置了autofocus自动获取焦点了（HTML5 新增表单控件）
// $('#txt01').focus();
// //文本框获取焦点的时候（有光标闪烁的时候）
// $('#txt01').focus(function() {
// alert('focus');
// });
// //失去焦点的时候（光标离开的时候）
// $('#txt01').blur(function() {
// alert('blur');
// });
// //输入框内容发生变化的时候，失去触点后触发，可用于注册时验证用户名是否已存在
// $('#txt01').change(function() {
// alert('change');
// });
//松开按钮就触发
$('#txt01').keyup(function() {
alert('keyup');
});
})
</script>
</head>
<body>
<input type="text" id="txt01">
</body>
</html>
绑定事件bind
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绑定事件bind</title>
<style type="text/css">
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
// //只能绑定click事件，不能绑定其他的了
// $('#btn').click(function() {
// /* Act on the event */
// });
//bind方式可绑定多个事件
$('#btn').bind('click mouseover', function() {
alert('hello!');
//取消绑定事件
$(this).unbind('mouseover');
});
})
</script>
</head>
<body>
<input type="button" value="按钮" id="btn">
</body>
</html>
自定义事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义事件</title>
<style type="text/css">
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
//自定义事件只能用bind方式绑定，第一个参数是事件的名字，第二个参数是事件发生时执行的函数
$('#btn1').bind('hello', function(){
alert('hello');
})
$('#btn1').bind('click', function(){
alert('click');
})
$('#btn2').click(function() {
// trigger即可以触发自定义事件，也可以触发原始的事件
$('#btn1').trigger('hello');
$('#btn1').trigger('click');
});
})
</script>
</head>
<body>
<input type="button" value="按钮" id="btn1">
<input type="button" value="按钮2" id="btn2">
</body>
</html>
