18-Javaweb学习-基础事件
1.基础事件
在 JavaScript 课程的学习中, 我们掌握了很多使用的事件, 常用的事件有: click、 dblclick、mousedown、mouseup、mousemove、 mouseover、mouseout、change、 select、 submit、keydown、keypress、keyup、blur、focus、load、resize、scroll、error。
jQuery 通过.bind()方法来为元素绑定这些事件。 可以传递三个参数: bind(type, [data], fn),type 表示一个或多个类型的事件名字符串;[data]是可选的,作为 event.data 属性值传递一个额外的数据,这个数据是一个字符串、一个数字、一个数组或一个对象;fn 表示绑定到指定元素的处理函数。
2.使用事件
//方式1:
$('input').bind('click', function () { //点击按钮后执行匿名函数
alert('点击!');
});
//方式2:普通处理函数
$('input').bind('click', fn); //执行普通函数式无须圆括号
function fn() {
alert('点击!');
}
//方式3:通过对象键值对绑定多个参数
$('input').bind({ //传递一个对象
'mouseout' : function () { //事件名的引号可以省略
alert('移出');
},
'mouseover' : function () {
alert('移入');
}
});
//设置移入和移出两个事件
//$('#mydiv').bind('mouseover', function() {
//
//$(this).css('background', 'red');
//});
//$('#mydiv').bind('mouseout', function() {
//
//$(this).css('background', 'yellow');
//});
//如果说上面的写法麻烦,可以用下面这种写法
$('#mydiv').mouseover(function() {
$(this).css('background', 'red');
}).mouseout(function() {
$(this).css('background', 'yellow');
});
3.解绑事件
//使用 unbind 删除绑定的事件
$('input').unbind(); //删除所有当前元素的事件
//使用 unbind 参数删除指定类型事件
$('input').unbind('click'); //删除当前元素的 click 事件
//使用 unbind 参数删除指定处理函数的事件
function fn1() {
alert('点击 1');
}
function fn2() {
alert('点击 2');
}
//绑定了两个事件函数
$('input').bind('click', fn1);
$('input').bind('click', fn2);
$('input').unbind('click', fn1); //只删除 fn1 处理函数的事件
4.解绑事件2
有时候,我们的标签绑定了两个事件,而执行这两个事件的函数都是匿名函数,我们想解绑其中一个,那怎么办呢? 可以給事件加 一个命名空间 来区分
$(‘input’).bind(‘click.abc’, function () {//.abc 相当于个这个click事件起了个别名 这样就有了区分
alert(‘abc’);
});
$(‘input’).bind(‘click.xyz’, function () {
alert(‘xyz’);
});
$(‘input’).unbind(‘click.abc’); //移除 click 事件中命名空间为 abc 的
注意:也可以直接使用('.abc'),这样的话,可以移除相同命名空间的不同事件。
5.简写事件
为了使开发者更加方便的绑定事件,jQuery 封装了常用的事件以便节约更多的代码。 我们称它为简写事件。
方法名 | 触发条件 | 描述 |
---|---|---|
click(fn) | 鼠标 | 触发每一个匹配元素的 click(单击)事件 |
dblclick(fn) | 鼠标 | 触发每一个匹配元素的 dblclick(双击)事件 |
mousedown(fn) | 鼠标 | 触发每一个匹配元素的 mousedown(按下)事件 |
mouseup(fn) | 鼠标 | 触发每一个匹配元素的 mouseup(抬起)事件 |
mouseover(fn) | 鼠标 | 触发每一个匹配元素的 mouseover(鼠标移入)事件 |
---|---|---|
mouseout(fn) | 鼠标 | 触发每一个匹配元素的 mouseout(鼠标移出)事件 |
keydown(fn) | 键盘 | 触发每一个匹配元素的 keydown(键盘按下)事件 |
keyup(fn) | 键盘 | 触发每一个匹配元素的 keyup(键盘按下弹起)事件 |
keypress(fn) | 键盘 | 触发每一个匹配元素的 keypress(键盘按下不松开)事件 |
focus(fn) | 表单 | 触发每一个匹配元素的 focus(焦点激活)事件 |
blur(fn) | 表单 | 触发每一个匹配元素的 blur(焦点丢失)事件 |
select(fn) | 表单 | 触发每一个匹配元素的 **select(文本选定)**事件 |
---|---|---|
change(fn) | 表单 | 触发每一个匹配元素的 change(值改变)事件 |
submit(fn) | 表单 | 触发每一个匹配元素的 submit(表单提交)事件 |
6.复合事件
jQuery 提供了许多最常用的事件效果,组合一些功能实现了一些复合事件,比如切换功能、智能加载等。
方法名 | 描述 |
---|---|
ready(fn) | 当 DOM 加载完毕触发事件 |
hover([fn1,]fn2) | 当鼠标移入触发第一个 fn1,移出触发 fn2 |
//背景移入移出切换效果
$('div').hover(function () {
$(this).css('background', 'black');
}, function () {
$(this).css('background', 'red');
});