jQuery中的事件
JavaScript和HTML之间的交互是通过用户和浏览器操作页面所引发的事件来处理的。当文档和它的某些元素发生某些变化或操作时。浏览器会生成一个事件。例如当浏览器装载完一个文档时，会生成事件；当用户点击了某个元素时，也会生成事件。
jQuery中的事件
DOM加载
| window.onload | $(document).ready() |
|---|---|
| 当网页中的所有元素都加载完毕之后，才执行 | 只要DOM完全就绪就可以被调用但并不意味着这些元素关联的文件都已经下载完毕 |
例如当为某一网站的所有图片添加某些行为时，若使用window.onload处理，那么必须等到每一幅图片都加载完成才有效。而$(document).ready()只需要DOM就绪就可以操作。需要注意的是：由于$(document).ready()中注册的事件，只要DOM就绪就可以加载，可能此时元素的关联文件还未加载完。比如和图片相关的HTML已加载完了，并已经解析为DOM，但很可能图片还未加载完，此时对于图片的高度或宽度这样的属性不一定有效。解决方式是使用jQuery中的另一个加载事件的方法--load()
// 下面的两组代码等价
$(window).load(funcition(){...});
window.onload = function(){...};
当$()不带参数时，其默认参数就是'document'。
事件绑定
在文档加载完毕后，若要为元素绑定事件来实现某些操作，可以使用bind()方法。
bind(type[,data],fn);
bind()方法中的第一个参数是事件类型，它包括以下：
blur、focus、laod、risize、scroll、unload、click、dbclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup、error等，也包括自定义名称。
第二个人参数时作为可选的，作为event.data()属性值传递给事件对象的额外数据对象。
第三个参数则是用来绑定的处理函数。
//html
<h3>什么是jQuery？</h3>
<div style="display: none;">这使得大量的循环结构变得不再必要，从而大幅地减少了代码量
</div>
//js
$(function () {
$('h3').bind('click',function () {
var $content = $('div');
if ($content.is(':visible')){
$content.hide()
}else {
$content.show()
}
});
})
合成事件
hover()方法的语法结构
hover(enter,leave);
hover()方法用于模拟光标悬停事件。当光标移到这个元素上时，会触发第一个函数(enter)；当光标移除这个元素时，会触发第二个函数(leave)；
// 控制鼠标移入移出时文字的显示与隐藏
$(function () {
$('h3').hover(function () {
$('div').show();
},function () {
$('div').hide();
});
})
hover()方法准确来说是代替jQuery中的mouseenter与mouseleave的，而不是替代mouseover和mouseout
事件冒泡
什么是事件冒泡
在页面上可以有很多事件，也可以多个元素响应同一个事件。假设网页上有一个元素嵌套在另一个元素中，并且都绑定了click事件，同时body上也绑定了click事件：
// html
<div>
外层div元素 <br>
<span style="margin-left: 20px">内层span元素</span> <br>
外层div元素
</div>
<p id="msg" style="color: #f40"></p>
// js
$('span').click(function (e) {
var txt = $('#msg').text() + '<p>内层span元素被单击</p>';
$('#msg').html(txt);
})
$('div').click(function () {
var txt = $('#msg').text() + '<p>外层div元素被单击</p>';
$('#msg').html(txt);
})
$('body').click(function () {
var txt = $('#msg').text() + '<p>最外层body元素被单击</p>';
$('#msg').html(txt);
})
此时若单击span元素，却会触发三个事件。这就是由于冒泡引起的。之所以叫做冒泡，是因为事件会按照DOM的层次结构像水泡一样不断向上至顶端。
问题所在：本来只想触发span元素的click事件，却同时触发了div与body元素的click事件。为了解决这一问题，进入下列问题探讨。
- 事件对象 ==>event
- 停止事件冒泡 ==>stopPropagation();
- 阻止默认行为。网页中的元素都有自己的默认行为，例如单击超链接后会跳转、单击“提交”按钮后会提交，有时需要组织元素的默认行为。 ==>preventDefault()
如果想同时对事件对象停止冒泡和默认行为，可以在事件处理函数中返回false，这是对在事件对象上同时调用event.preventDefault()和event.stopPropagation()方法的一种简写
- 事件捕获，它与事件冒泡的行为刚好是两个相反的过程。并非所有的浏览器都支持事件捕获，这个缺陷无法通过JavaScript修复，jQuery不支持事件捕获。
事件对象属性
- event.type 该方法可以获取到事件的类型
- event.preventDefault()方法 阻止默认的事件行为
- event.stopPropagation()方法 阻止事件冒泡
- event.target 获取到触发事件的元素
$("a[href='http://google.com']").click(function () {
var tg = event.target;
alert(tg.href);
return false;
});
- event.relatedTarget 在标准DOM中，mouseover和mouseout所发生的元素可以通过event.target来访问，相关元素是 event.relatedTarget
- event.pageX和event.pageY 该方法的作用是获取到光标相对于页面的x坐标和y坐标
- event.which 该方法的作用是在鼠标单击事件中获取到鼠标的左、中、右键；在键盘事件中获取键盘的按键
- event.metaKey 针对不同浏览器对键盘中的ctrl按键的解释不同，jQuery中 规定了event.metaKey为键盘事件中获取ctrl按键
移除事件
unbind()
unbind([type],[data])
第一个参数是事件类型，第二个参数是要移除的函数
具体说明：
- 如果没有参数，则移除所有事件
- 如果提供了事件类型作为参数，那么只移除该类型的绑定事件
- 如果在绑定是传递的处理函数作为第二个参数，则只有这个特定的事件处理函数会被删除
$('#delAll').click(function(){
$('#btn').unbind('click'); //移除id为btn元素的所有click事件
})
另外对于只需要触发一次，随后就要解除绑定的情况，jQuery提供了一种简写的方法——one()方法。one()方法可以为元素绑定处理函数，当处理函数触发一次后，立即被删除
one(type,[data],fn)
模拟操作
- 常用模拟
以上例子都死用户必须通过单击按钮才能触发事件，有时我们需要去模拟用户现在，来达到单击效果，例如在用户进入页面后就触发click而不是通过主动单击。在jQuery中使用trigger()方法来模拟用户操作 - 触发自定义事件
trigger()方法不仅能触发浏览器支持的相同名称的事件，还支持自定义名称事件
$('#btn').bind('myClick',function () {
$('p').append('<p>click Event</p>')
});
$('#btn').trigger('myClick');
- 传递数据
trigger(type,[data])方法有两个参数，第一个是要触发事件的类型，第二个是传递给事件处理函数附加的数据，以数组的形式传递
$('#btn').bind('myClick',function (event,msg1,msg2) {
$('p').append('<p>'+msg1+msg2+'</p>')
});
$('#btn').trigger('myClick',['myclick','event']);
其他用法
- 绑定多个事件类型
可以为元素一次性绑定多个事件类型
$('div').bind('mouseover,mouseout',function () {
$(this).toggleClass('over');
});
网友评论