脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-JavaScript高级用法一之事件响应与网页交互，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。
javascript内置了一些对用户交互和其他事件给予响应的方式，jquery增强并扩展了基本的事件处理机制，它不仅提供了更加优雅的事件处理语法，而且极大增强了事件处理机制。
1在页面加载后执行任务
$(document).ready()是jQuery中响应javascript内置的onload事件并执行任务的一种典型方式。
页面加载时执行多个脚本
通过javascript注册事件处理程序的传统机制是把一个函数指定给DOM元素的对应属性。
和window.onload=DOStuff;都可以在页面加载时执行doStuff()函数;但是假如后面还有window.onload=doOtherStuff;这次指定的函数doOtherStuff会取代刚才指定的额第一个函数。因为.onload属性一次只能保存对一个函数的引用。而$(document).ready()机制能够很好的处理：
**************
每次调用$(document).ready()方法都会向内部的行为队列中添加一个新的函数，当页面加载完成后，所有的函数都将得到执行，这些函数会按照它们注册的顺序一次执行。($(document).ready(doStuff)和$(document).ready(doOtherStuff)将使得这两个函数依次被执行。)
*************
2事件
.bind()方法
.bind(tyPE,fn)方法，通过这个方法，可以指定任何Javascript事件，并为该改事件添加一种行为。例如：
$('#but').bind('click',change);
给id=butt的button绑定click事件，并在事件发生时，调用function change()函数。
********************
和.ready()方法一样，多次调用.bind()方法没有任何问题，即可以按照需要为同一个事件追加更多的事件处理程序，bind将按顺序执行它们。但是.bind()方法不会为元素再重复添加同一个事件处理函数。
我们也可用过改变元素的onclick,onchange属性来改变元素的事件处理函数。
********************
.bind(type,data,fn)还可以有三个参数，当第二个参数(可选)不是一个函数，而是一个数据对象时，作为第三个参数fn函数的参数，通过 函数参数名.data.名称来引用。当第二个参数有多个数据对象传递给第三个参数fn时，需要用逗号(,)隔开。例如
$("p").bind("click", {foo:"bar",fdd:"test"}, handler)
function handler(cans) {
//cans为函数参数名称，foo和fdd为数据对象的名称。通过cans.data.foo和cans.data.fdd来取得传递的数据对象的值bar,test。
alert(cans.data.foo+" "+cans.data.fdd);
}
结果为：bar test.
注意第三个参数仅仅是函数名称，被调用的函数的参数在第二个参数中。
this关键字
另外当触发任何事件处理程序时，关键字this引用的都是携带相应行为的DOM元素。通过在事件处理程序中使用$(this)，可以为响应的元素创建一个jquery对象，然后就如同使用CSS选择符找到该元素一样可以对它进行操作。例如：当每个段落被点击的时候，弹出其文本。
$("p").bind("click", function(){
alert( $(this).text() );
});
注意这里使用.text()方法，它表示取得所有匹配元素的内容，返回的结果是所有匹配元素包含的文本内容组合起来的文本。这个方法对htML和XML文档都有效。
通过bind()等jquery方法定义的事件处理程序，在该事件处理程序中可以使用$(this)得到响应事件元素的JQuery对象，但是如果是通过javascript的方法如onclick定义的事件处理程序，在该事件处理程序使用$(this)是无效的，需要将this先赋给函数参数ev;这样再使用$(ev)就可以得到响应事件元素的JQuery对象。如：
//通过javascript的onclick方法定义的事件处理程序change(ev)。
function change(ev){
alert($(ev).next().attr("value"));
//必须通过$(ev)才能得到响应事件元素的JQuery对象,不能通过$(this)得到。
}
简写的事件
鉴于某个事件(例如简单的单击事件)绑定的处理程序极为常用，JQuery提供了一种简化事件操作的方式--简写事件方法。简写事件方法的原理与对应的.bind()调用相同，但可以减少一定的代码输入量。例如不使用.bind()方法而使用.click()重写上面的程序：
$("p").click(function(){
alert($(this).text());
});
类似的简写事件还有：blur(fn),change(fn),click(fn),dbclick(fn),keydown(fn),keyPress(fn),keyup(fn),mousedown(fn),mouSEMove(fn),mouseout(fn),mouseenter(fn),mouseover(fn),mouseup(fn),resize(fn),scroll(fn),select(fn),submIT(fn),focus(fn),load(fn),unload(fn),error(fn)
blur事件是在元素失去焦点时候触发。resize事件在元素大小被改变时候触发。
mouseover与mouseenter
不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。
只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。
mouseout与mouseleave
不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。
只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。
.load(fn)，在每个匹配元素的loCAD事件中绑定一个处理函数。如果绑定给window对象，则会在所有内容加载后触发，包括窗口，框架，对象和图像。如果绑定在元素上，则当元素的内容加载完毕后触发。注意:只有当在这个元素完全加载完之前绑定load的处理函数,才会在他加载完后触发。如果之后再绑定就永远不会触发了
.unload(fn),在每一个匹配元素的unload事件中绑定一个处理函数。
.toggle(fn,fn)方法
toggle(fn,fn)方法的使用是：每次点击后依次调用函数;如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数;随后的每次点击都重复对这两个函数的轮番调用。
.toggle()方法的效果就是切换元素的可见状态;即如果元素是可见的，切换为隐藏的;如果元素是隐藏的，切换为可见的。例如：
function change(){
$("#content").toggle();
}
.toggleClass(class)方法
该方法用于执行如果元素上存在指定的Css类就删除这个类，如果不存在就添加这个Css类到元素上。方法的参数是Css类名。如：
$("p").toggleClass("selected");
Hello
Hello Again
.toggleClass(class,switch)
如果开关switch参数为true则加上class,否则就删除
.hover(fn,fn)方法
.hover(fn,fn)方法也接受两个函数参数。第一个函数在鼠标指针进入被选择的元素时执行，而第二个函数会在指针离开该元素时触发。例如：
$('#button1').hover(function (){
$(this).addClass('tdd');
},function(){
$(this).removeClass('tdd');
});
3事件的旅程
xxx
如果
,,都设置click事件，当我们在上进行鼠标单击，click事件被捕获，在不同的浏览器上，传递click事件的顺序是不同的。有的浏览器首先会交给最外层的元素，接着再交给更具体的元素。另一种相反的策略叫做事件冒泡。即当事件发生时，会首先发送给最具体的元素，在这个元素获得相应机会之后，事件会向上冒泡到上一层的元素。JQuery采用的策略是事件冒泡。
事件冒泡的副作用：上例中如果在中发生了click事件，
和也会响应这个事件，从而触发了外层的事件处理程序。这种冒泡序列可能不是我们希望的。
不过.hover()方法可以聪明的处理这些冒泡问题，当我们使用该方法添加事件时，可以不必考虑外层元素取得mouseover或mousetout事件的问题。
4阻止事件冒泡
要解决事件冒泡的副作用，必须访问事件对象event。事件对象是一种javascript结构，它会在元素获得处理事件的机会时传递给响应的事件处理程序。这个对象中包含着与事件有关的信息。为了在处理程序中使用事件对象，需要为函数添加一个参数。如:function xxx(event){...}
现在，事件处理程序中的参数event保存着事件对象。而event.target属性保存着发生事件的目标元素(DOM)。JQuery对象这个事件对象进行了必要的扩展，从而在任何浏览器中都能够使用这个属性(target)。而且我们知道this引用的是处理事件的DOM元素。所以可以编写下列代码：
//函数参数event直接得到event事件对象
$('#ab').bind('click',{foo:'bar',fdd:'tt'},function(event){
//判断发生click事件的元素和事件处理的DOM元素是否是同一个。
if(event.target==this){
alert(event.data.foo+"/"+event.data.fdd);
}
});
此时可以确保被单击的元素是而不是其他元素。
5停止事件传播
事件对象还提供了一个.stopPropagation()方法，该方法可以完全阻止事件冒泡。与.target类似，这个方法也是一种纯javascript特性，但在跨浏览器的环境中则无法安全地使用。不过只要我们通过JQuery来注册所有的事件处理程序，就可以放心的使用这个方法。
同上面的一样，需要用作处理程序的函数添加一个参数，一边访问事件对象。然后通过简单的调用event.stopPRopagation()就可以避免其他所有Dom元素响应这个事件。
6停止默认操作
如果我们把单击事件处理程序注册到一个锚元素，而不是像
这样的元素，那么就要面对另一个问题，当用户单击链接时，浏览器仍然会执行锚元素的链接行为，这是单击锚元素的默认操作。如果我们不希望执行这种默认操作，那么在事件对象上调用.stopPrapagation()方法也不行，因为默认操作不是在正常的事件传播流中发生的。这种情况下，.preventDefault()方法则可以在触发默认操作之前终止事件。
如果想要同时停止事件传播和停止默认操作，可以在事件处理程序中返回false(即return false)，这是对事件对象上同时调用.stopPropagation()和.preventDefault()的一种简写方式。如：
$('#ab').bind('click',{foo:'bar',fdd:'tt'},function(event){
alert(event.data.foo+"/"+event.data.fdd);
//使用stopProgagation()方法停止事件传播。
event.stopPropagation();
});
例如：
我们分别为和
绑定click事件：
$('#content').bind('click',change1);
$('#ab').bind('click',function (){
alert("test");
});
function change1(ev){
alert($(this).text());
//停止事件传播
ev.stopPropagation();
//停止默认操作
ev.preventDefault();
}
当我们单击"点击这里时"，会调用chang1()方法中的alert语句，本来这个click事件会传播给使上的click处理程序也被执行，由于我们调用了.stopPropagation()将阻止click事件传播给。但是这并不能阻止的默认操作，所有还是会执行上的href操作链接到baidu.COM。如果要停止默认操作，需要使用.preventDefault()方法
7移除事件处理程序unbind
移除以前在元素上注册的一个事件处理程序，需要使用.unbind([type],[data])方法将一种事件类型作为其第一个参数，将要移除的函数作为第二个参数。这里如果省略掉第二个参数，.unbind([type])方法将移除该元素上指定事件类型注册的所有处理程序。如果第一个参数和第二个参数都省略了，.unbind()将删除该元素上所有绑定的事件。type是String类型，data是Function 。如
VAR foo = function () {
// 处理某个事件的代码
};
function foo(){
// 处理某个事件的代码
};
上面两种函数写法是等价的。
$("p").bind("click", foo); // ... 当点击段落的时候会触发foo
$("p").unbind("click", foo); // ... 将foo处理程序从段落
中移除
8模仿用户操作
使用.trigger(type,[data])方法模仿用户操作。与.bind()方法的参数类似。type指定了要触发的事件类型，data是要传递给事件处理程序的参数。例如：
$("form:First").trigger("submit");表示触发表单上的submit事件。
$("#button1").trigger('click');表示触发按钮button1的click事件。
$("#button1").trigger("click",["foo", "bar"]);表示将字符串"foo","bar"作为参数传递给button1的click事件处理程序。注意以下button1的处理程序的change()第一个参数需要给出用来存储事件对象Event，而mess1和mess2使用时用来存储传递的参数。
function change(ev,mess1,mess2){
alert(mess1+mess2);
}
它与toggle传递参数的方式不同，不能使用toggle方式传递参数。
triggerHandler(type,[data]),这个特别的方法将会触发指定的事件类型上所有绑定的处理函数，但不会执行浏览器默认动作，只会触发你绑定的动作。
**************
checkbox与jquery click事件
有下边这个checkbox元素
oncheck函数如下
function oncheck(o)
{
alert(o.checked);
}
在javascript中使用激发事件click可正常判断checkbox的值
document.getElementById(";mycb").click();
使用jQuery激发click时checked值与实际情况正好相反
$("#mycb").click();
这是一个jQuery与dom中不太一样的地方，使用中需要注意或直接使用dom。
*****************
jQuery监听复制，粘贴，剪切
$(document).ready(function() {
$("#textA").bind({
copy : function(){
$('#message').text('复制 copy behaviour detected!');
},
paste : function(){
$('#message').text('粘贴 paste behaviour detected!');
},
cut : function(){
$('#message').text('剪切 cut behaviour detected!');
}
});
});
IE将字符串maintext复制到剪贴板
if (window.clipboardData) {
return (window.clipboardData.setData("Text", maintext));
}
IE返回剪贴板的内容
if (window.clipboardData) {
return(window.clipboardData.getData('Text'));
}
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的javascript代码实例教程-JavaScript高级用法一之事件响应与网页交互全部内容，希望文章能够帮你解决javascript代码实例教程-JavaScript高级用法一之事件响应与网页交互所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。