常用事件:
一、焦点
1. 当元素获得焦点时,触发 focus 事件。
可以通过鼠标点击或者键盘上的TAB导航触发。这将触发所有绑定的focus函数,注意,某些对象不支持focus方法
2. focusin 当元素获得焦点时,触发 focusin 事件。
focusin事件跟focus事件区别在于,他可以在父元素上检测子元素获取焦点的情况。
3.当元素失去焦点时触发 focusout 事件。
focusout事件跟blur事件区别在于,他可以在父元素上检测子元素失去焦点的情况。
4.当元素失去焦点时触发 blur 事件。
这个函数会调用执行绑定到blur事件的所有函数,包括浏览器的默认行为。可以通过返回false来防止触发浏览器的默认行为。blur事件会在元素失去焦点的时候触发,既可以是鼠标行为,也可以是按tab键离开的。
var $li = $('#l1');
// 当元素获得焦点时,触发 focus 事件。
$li.on('focus', function(){
$(this).attr('placeholder', '')
});
// 当元素失去焦点时,触发 blur 事件。
$li.on('blur', function(){
$(this).attr('placeholder', '请输入用户名')
});
二、change事件
当元素的值发生改变时,会发生 change 事件。
该事件仅适用于文本域(text field),以及 textarea 和 select 元素。当用于 select 元素时,change 事件会在选择某个选项时发生。当用于 text field 或 text area 时,该事件会在元素失去焦点时发生。
// change 事件
var $s = $('span');
var $va = $('#gender');
$va.on('change', function(){
var gender = $(this).val();
if(gender ==='0'){
$s.text('wffwf')
}else{
$s.text('oooooo')
};
});
三、keyup:当按钮被松开时,发生 keyup 事件。它发生在当前获得焦点的元素上。
注释:如果在文档元素上进行设置,则无论元素是否获得焦点,该事件都会发生。
$("input").keyup(function(){
$("input").css("background-color","#D6D6FF");
});
其他:
blur([[data],fn])
change([[data],fn])
click([[data],fn])
dblclick([[data],fn])
error([[data],fn])1.8-
focus([[data],fn])
focusin([data],fn)
focusout([data],fn)
keydown([[data],fn])
keypress([[data],fn])
keyup([[data],fn])
mousedown([[data],fn])
mouseenter([[data],fn])
mouseleave([[data],fn])
mousemove([[data],fn])
mouseout([[data],fn])
mouseover([[data],fn])
mouseup([[data],fn])
resize([[data],fn])
scroll([[data],fn])
select([[data],fn])
submit([[data],fn])