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