事件概述:指页面元素状态改变,用户在操作鼠标或键盘时触发的动作
事件属性:通过一个事件属性,可以在某一个事件发生时对某个元素进行某种操作
鼠标事件:onclick(单击事件);ondblclick(双击事件);onmousedown(事件会在鼠标按键被按下时发生);
键盘事件:onkeydown(事件会在用户按下一个键盘按键时发生);onkeyup(当用户释放键盘按钮时执行);
状态事件:onload(事件会在页面或图像加载完成后立即发生),onchange(事件在用户改变输入域的内容时执行)
其他还有很多事件,可以查询API文档;
事件定义:
在html中定义:
<input type="button" value="按钮" οnclick="method();"></input>
js代码中定义:
//btn为一个按钮对象
btn.onclick = method;
//或者
btn.onclick = function(){
alert("定义对象");
}
jQuery中定义:
//表示触发了单击事件
$obj.click()
event(事件)对象:
概念:任何事件发生之后都会产生一个event对象,对象记录时间发生时的鼠标位置、键盘状态和触发对象等信息;
获取event对象:(需要考虑浏览器的兼容性)
IE浏览器:js或html代码中直接使用event
<p οnclick="alert(event.clientX);">p text</p>
<div οnclick="func()">dic text</div>
function func(){
alert(event.clientX+";"+event.clientY);
}
Firefox浏览器:html可以直接使用event;但是js使用的话汇报错:event is not defined
解决浏览器兼容问题:在句柄定义是,将event关键字作为参数传递过去
<div οnclick="func(event);">div text</div>
//firefox浏览器
function func(e){
alert(e.clientX);
}
jQuery获取event对象:
只需要为事件处理函数传递任意一个参数;如:$obj.click(function(e){......});然后在调用相应的API即可;
e就是事件对象,但已经经过jQuery对底层事件对象的封装;封装之后的事件对象可以方便兼容各浏览器。
使用event对象:
对于使用event对象,经常需要先获取事件源;事件源:触发事件的元素(事件的目标节点)
考虑到浏览器兼容问题:
<div οnclick="func(event)">div text</div>
function func(e){
//IE:e.srcElement
//firefox:e.target
var obj = e.srcElement ||e.target;
alert(obj.nodeName);//DIV
}
jQuery获取事件源:e.target;返回值为DOM对象;
获取鼠标点击的坐标:e.pageX; e.pageY
事件处理机制:冒泡机制
冒泡机制:字节点产生的事件会依次向上抛给父节点;
JS(检测冒泡机制代码如下):
<style>
#d1{
width:200px;
border:1px solid red;
padding:30px;
}
#p1{
border:1px solid blue;
padding:20px;
}
#d2{
width:800px;
border:1px solid red;
padding:30px;
margin:30px;
}
</style>
<body>
<div id="d1" οnclick="alert('div')">
<p id="p1" οnclick="alert('p')">
<input type="button" value="冒泡">
</p>
</div>
</body>
取消冒泡机制:
js:
function f1(e){
alert("aaa");
//取消事件冒泡机制
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble = true;
}
}
jQuery:
$('a').click(function(e){
alert("点击一个完整的连接");
e.stopPropagation();
});
总结:在事件的处理上,jQuery已经封装了很多的API,可以很方便的实现一些业务。这就是框架带来的好处,但是弊端就是不了解底层的实现,所有有利也有弊。个人观点:这些东西不一定要记得很熟,但是你必须知道有怎么个东西,才能在需要的时候想起来,找得到。