18-Javaweb学习-基础事件

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'); 
});