前端编程提高之旅（十五）----jquery事件
来源：程序员人生 发布时间：2014-12-22 08:18:25 阅读次数：4374次
HTML与js交互主要通过用户与阅读器操作页面时引发事件。文档或某些元素产生某些变化或操作时，阅读器会生成事件。jquery增加了事件处理能力。
jquery事件部份可以从以下5部份理解：
1、加载DOM函数
这里指的以下方法：
$(document).ready(function(){
})
相比于传统的window.onload方法，前者在履行时机与可否屡次使用上区分于后者。
前者是在DOM完全就绪回调就会被调用，后者则是网页所有元素（包括关联文件）完全加载到阅读器后才会被调用。这里常见利用场景是，当需要对图片进行操作时，需要采取后者，由于后者才能保证图片文件被加载完成履行。
前者可以屡次使用，而后者只能使用1次，即使屡次定义，后定义的函数会将之前定义的函数覆盖掉。
2、各种事件绑定的方法
(1）1般绑定方法：bind方法
bind方法参数分别定义事件类型、回调函数。
构建1个实例，HTML以下：
<div id="panel">
<h5 class="head">甚么是jQuery?</h5>
<div class="content">
jQuery是继Prototype以后又1个优秀的JavaScript库，它是1个由 John Resig 创建于2006年1月的开源项目。jQuery凭仗简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、履行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
</div>
</div>
bind使用代码以下：
$("#panel h5.head").bind("click",function(){
var $content = $(this).next();
if($content.is(":visible")){
$content.hide();
}else{
$content.show();
}
})
需要注意的是，回调函数内，this指的是带有相应行动的DOM元素，如需使用jquery中方法，徐将其转化为Jquery对象$(this)情势。
（2）在bind基础上，简写绑定方法
简写的绑定方法，方法名代表事件类型，参数为回调函数。
仍然延续上例，简写方法使用以下：
$("#panel h5.head").mouseover(function(){
$(this).next().show();
}).mouseout(function(){
$(this).next().hide();
})
（3）合成事件
这里合成事件有两个hover方法与toggle方法。
hover方法用于摹拟鼠标悬停事件，有两个回调函数作为参数，第1个回调代表光标移入履行，第2个回调代表光标移出履行。
沿用上例，使用方法以下：
$("#panel h5.head").hover(function(){
$(this).next().show();
},function(){
$(this).next().hide();
})
toggle方法用于摹拟鼠标连续单击行动，参数为多个回调，每一个回调会根据单击次序顺序循环履行。
不过这个方法在jquery1.9版本已被删除，这里其实不多做讨论。
（4）摹拟操作
摹拟的是操作，也即是交互行动，从而引发事件，履行回调。这里用到的是trigger方法。
举个例子，HTML代码：
<button id="btn">点击我</button>
<div id="test"></div>
采取摹拟操作的代码：
$('#btn').bind("click", function(){
$('#test').append("<p>我的绑定函数1</p>");
}).bind("click", function(){
$('#test').append("<p>我的绑定函数2</p>");
}).bind("click", function(){
$('#test').append("<p>我的绑定函数3</p>");
});
$('#btn').trigger("click");
对DOM绑定了单击事件，采取trigger方法，摹拟了click事件，从而履行了回调。
这里trigger方法摹拟操作的事件还可以是自定义事件，固然也需要同时绑定自定义事件。
仍然延续上例，采取自定义事件代码实例：
$('#btn').bind("myClick", function(){
$('#test').append("<p>我的自定义事件.</p>");
});
$('#btn').click(function(){
$(this).trigger("myClick");
});
trigger方法除可以摹拟操作，还可以在第2个参数中传入数据，这在MVC框架中，view间传递数据极为经常使用。
$('#btn').bind("myClick", function(event, message1, message2){
$('#test').append( "<p>"+message1 + message2 +"</p>");
});
$('#btn').click(function(){
$(this).trigger("myClick",["我的自定义","事件"]);
});
采取triggerHandler方法可以摹拟操作的同时避免触发阅读器默许操作，具体实例以下：
html：
<button id="old">trigger</button>
<button id="new">triggerHandler</button>
<input />
jquery代码：
$('#old').bind("click", function(){
$("input").trigger("focus");
});
$('#new').bind("click", function(){
$("input").triggerHandler("focus");
});
$("input").focus(function(){
$("body").append("<p>focus.</p>");
})
对照可知，后者没有触发阅读器默许聚焦功能。
（5）绑定多个事件
绑定多个事件的方法可采取bind方法，在第1个参数中将事件类型空格隔开。
使用案例以下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf⑻" />
<style>
div{
width:100px;
height:50px;
}
.over{
color:red;
background:#888;
}
</style>
<script src="../../scripts/
jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("div").bind("mouseover mouseout click", function(){
$(this).toggleClass("over");
});
})
</script>
</head>
<body>
<div >滑入.</div>
</body>
</html>
命名空间便于管理，当元素绑定多个事件时，删除事件只需要指定命名空间，节省了代码量。
实例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf⑻" />
<style>
div{width:100px;height:50px;background:#888;color:white;}
</style>
<script src="../../scripts/
jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("div").bind("click.plugin",function(){
$("body").append("<p>click事件</p>");
});
$("div").bind("mouseover.plugin", function(){
$("body").append("<p>mouseover事件</p>");
});
$("div").bind("dblclick", function(){
$("body").append("<p>dblclick事件</p>");
});
$("button").click(function() {
$("div").unbind(".plugin");
})
/*
click,mouseover 事件被删除，
*/
})
</script>
</head>
<body>
<div>test.</div>
<button >根据命名空间，删除事件</button>
</body>
</html>
上面提到了绑定事件的各种方法，移除事件主要采取unbind方法，第1个参数即移除事件名，第2个参数可选为移除回调函数。
使用实例：
$('#btn').bind("click", myFun1 = function(){
$('#test').append("<p>我的绑定函数1</p>");
}).bind("click", myFun2 = function(){
$('#test').append("<p>我的绑定函数2</p>");
}).bind("click", myFun3 = function(){
$('#test').append("<p>我的绑定函数3</p>");
});
$('#delTwo').click(function(){
$('#btn').unbind("click",myFun2);//移除第2个绑定click函数
});
假设事件只需履行1次，可以采取one方法进行事件绑定，用法类似bind方法。
$('#btn').one("click", function(){
$('#test').append("<p>我的绑定函数1</p>");
}).one("click", function(){
$('#test').append("<p>我的绑定函数2</p>");
}).one("click", function(){
$('#test').append("<p>我的绑定函数3</p>");
});
4、事件对象属性
事件对象，顾名思义即触发事件后，传入回调函数的对象，包括事件类型、事件目标、光标位置等与事件有关的属性。
根据这些事件对象属性，便于编写关于本事件的各种操作。经常使用的避免屡次单击、避免冒泡、默许操作都采取事件对象属性实现。
实例：
$("a").click(function(event) {
alert("Current mouse position: " + event.pageX + ", " + event.pageY );//获得鼠标当前相对页面的坐标
return false;//禁止链接跳转
});
5、事件冒泡与禁止默许行动
（1）事件冒泡
关于事件冒泡，即触发1个事件，全部事件会从本层元素向外部包括的元素分散，这样便可能致使，不希望触发的元素被触发事件。
实例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf⑻" />
<title>4⑷⑴</title>
<style type="text/css">
*{margin:0;padding:0;}
body { font-size: 13px; line-height: 130%; padding: 60px; }
#content { width: 220px; border: 1px solid #0050D0;background: #96E555 }
span { width: 200px; margin: 10px; background: #666666; cursor: pointer;color:white;display:block;}
p {width:200px;background:#888;color:white;height:16px;}
</style>
<script src="../../scripts/
jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
// 为span元素绑定click事件
$('span').bind("click",function(){
var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";
$('#msg').html(txt);
});
// 为div元素绑定click事件
$('#content').bind("click",function(){
var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";
$('#msg').html(txt);
});
// 为body元素绑定click事件
$("body").bind("click",function(){
var txt = $('#msg').html() + "<p>body元素被点击.<p/>";
$('#msg').html(txt);
});
})
</script>
</head>
<body>
<div id="content">
外层div元素
<span>内层span元素</span>
外层div元素
</div>
<div id="msg"></div>
</body>
</html>
$('span').bind("click",function(event){
var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";
$('#msg').html(txt);
event.stopPropagation(); // 禁止事件冒泡
});
// 为div元素绑定click事件
$('#content').bind("click",function(event){
var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";
$('#msg').html(txt);
event.stopPropagation(); // 禁止事件冒泡
});
（2）禁止阅读器默许行动
这里采取的是事件对象属性的event.preventDefault方法。
（3）如果既想禁止冒泡行动，又需要禁止阅读器默许行动，可以再回调中返回false，1并履行。
实例：
$('span').bind("click",function(event){
var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";
$('#msg').html(txt);
return false;
});
生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
