jQuery基础教程之事件

1、$(document).ready()是jQuery中响应JavaScript内置的onload事件并执行任务的一种典型方式。在浏览器进行下载过程中,只要DOM完全就绪,就可以使用,不必等待整个页面下载完成后,再进行相关的操作。其次,在使用JavaScript对页面进行操作时,不用考虑页面加载的次序。再者,同过ready()机制能够很好的实现一个页面执行多个脚本

简写:$(document).ready(function(){ ...//代码... })

        $().ready(function(){ ...//代码... })

        $(function(){ ...//代码... })

推荐使用较长的形式,因为较长的形式能够更清楚的表达代码在做什么。

PS:jQuery能够很好的与其他库实现共存,当然要使用的是一个.noConflict()的方法。$==jQuery

2、简单事件

渐进增强原则:如果浏览器不支持JavaScript,则将其功能隐藏起来,最好的是,能够在当前页面的替代版本而仍然起到应有的作用。

bind()方法:指定任何JavaScript事件,并为该事件添加一种行为。

简写事件方法:鉴于为某个事件(例如简单的单击事件)绑定处理程序极为常用,jQuery提供了一种简化事件操作的方式。

jQuery为标准的DOM事件提供了响应的简写事件方法:

blur\mousedown\change\mousemove\click\mouseout\dblclick\mouseover\error\mouseup\focus\resize\keydown\scroll\keypress\select\keyup\submit\load\unload

这些简写的方法,能够把一个事件处理程序绑定到同名事件上。

3、复合事件

.ready()  

.toggle() 用户鼠标点击某个元素时,改变元素外观。优点:交替执行两种或更多种不同的操作语言,.toggle()的适用性更强

.hover() 用户鼠标指针悬停在某个元素上时,影响元素的外观。优点:解决跨浏览器的版本兼容问题;很好的解决了事件的冒泡处理问题。

4、事件旅程

事件捕获:从祖先元素一层层下次搜索,直至找到具体的元素。

事件冒泡:首先发送给最具体的元素,在这个元素获得响应机会之后,事件向上冒泡到更一般的元素。

他俩的共同之处是允许多个元素响应单击事件。

在执行过程中,首先,事件从一般元素到具体元素逐层捕获,然后,事件在通过冒泡返回DOM树顶层。而时间处理程序可以注册到这个过程中的任何一个阶段。

jQuery始终会在模型的冒泡阶段注册事件处理程序,因此,最具体的元素会首先获得响应事件的机会。在这样的过程中,就像打开了,潘多拉魔盒。

jQuery隐式迭代能力:一次隐藏所有按钮,而不需要使用包转元素。

5、通过事件对象改变事件的旅程

$(document).ready(function(){
$('#switcher').click(function(){
$('#switcher .button').toggleClass('hidden');
});
$('#switcher .button').bind('click',function(){
$('body').removeClass();
if(this.id == 'switcher-large'){
$('body').addClass('large')
}
else if(this.id == 'switcher-narrow'){
$('body').addClass('narrow')
}
$('#switcher .button').removeClass('selected');
$(this).addClass('selected')
});
});

事件对象:事件对象时一种JavaScript结构,它会在元素获得处理事件的机会时被传递给被调用的事件处理程序。这个对象中包含着与事件有关的信息,也提供了可以用来影响事件在DOM中传递进程的一些方法。为了在处理程序汇总使用事件对象,需要为函数添加一个参数:event。

事件处理程序中的变量event保存着事件对象,而event.target属性保存着发生事件的目标元素。jQuery对这个事件对象进行了必要的扩展,从而在任何浏览器中都能够使用这个属性。通过.target,可以确定DOM中首先接受到事件的元素。

pe:

$(document).ready(function(){
$('#switcher').click(function(event){
$('#switcher .button').toggleClass('hidden');
});});

event.target的真正作用,是将事件的对象和html里面的元素真实的对应起来。click这样一个事件,如果不适用event.target来进行标记,那么,js文件无法识别这个事件,究竟是谁发起的。默认情况下,它将所有由click触发的响应全部由最具体的元素一直向外延伸。

event.target使得click有了明确的对象指向

停止事件传播

.stopPropagation()可以完全阻止事件冒泡。虽然存在跨浏览器环境中无法安全的使用,只要保证jQuery来注册所有的事件处理程序。

$('#switcher .button').click(function(event){ ..../code/....  event.stopPropagation();})

事件委托

事件委托是利用冒泡的一向高级技术,通过事件委托,可以借助一个元素上的事件的事件处理程序完成很多工作。

is()这个方法用于接收一个选择符表达是,然后用选择符来测试当前的jQuery对象。如果集合中至少有一个元素与选择符匹配,is()返回true。

原文地址:https://www.cnblogs.com/thinkabout/p/3207572.html