首页 > 代码库 > 菜鸟学前端——javascrip进阶
菜鸟学前端——javascrip进阶
在学习了javascript基础后，需要了解一些javascript的高级技术，这样才能在变化多端的前端开发中游刃有余。
下面阐释一些常有的javascript高级技术。
一、事件
事件是javascript中最为摄人心魄的技术。因为了有了它的存在，用户不仅可以浏览网页内容，还可以与网页进行交互了，大大提高了用户体验。事件主要包括事件流、事件的监听、事件的类型以及浏览器兼容性问题等。
1.1 事件流
浏览器最初开始仅支持一个元素响应事件，但从IE4及Netscape（网景公司，后与IE对抗中惨败）4后开始，他们提出了时间流（Event flow）的概念。事件模型分为两种：捕获型、冒泡型
1.1.1 冒泡型
事件按照从特定的事件目标到最不特定的事件目标的顺序逐一击发的（一般都是从小到大，从元素到页面）。
下面看一个例子。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Test by WangYu--冒泡事件</title>
<script language="javascript">
function add(sContext)
{
var oDiv = document.getElementById("display");
oDiv.innerHTML += sContext;//依次输出单击元素
}
</script>
</head>
<body onclick="add(‘body<br>‘);">
<div class="myDiv" onclick="add(‘div<br>‘);">
<p me</p>
</div>
<div id="display"></div>
</body>
</html>
处理事件的依次顺序为：p -> div -> body
1.1.2 捕获型事件
捕获型事件(event capturing)与冒泡事件相反，即从不精确的对象到最精确的对象。如果设置了捕获型事件，前面的例子将正好相反。
1.2 事件监听
页面中的事件需要一个函数来响应，这类函数通常称之为事件处理函数，这些函数实时监听是否有事件发生（类似观察者模式，将在后期介绍），它们就被称为事件监听。
1.2.1 通用监听方法
直接在标签中加入函数，如<p onclick="add(‘p<br>‘);"></p>
也可以在函数中写入javascript语句，如<p clicke me‘)‘);"></p>
下面介绍一个常用的例子，实现事件监听。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Test by WangYu--冒泡事件</title>
<script language="javascript">
window.onload = function () {
var vOp = document.getElementById("myId");
vOp.onclick = function ()
{
alert("You click me");
}
}
</script>
</head>
<body>
<div>
<p id="myId">Click me</p>
</div>
</body>
</html>
1.2.2 IE中的监听方法
在IE中，每个元素都有两个方法来处理事件的监听，分别是attachEvent()和detachEvent()，分别实现添加事件处理函数和删除事件监听函数。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Test by WangYu--监听事件</title>
<script language="javascript">
function oneClick()
{
alert("oneClick click me");
}
function TwoClick() {
alert("TwoClick click me");
}
window.onload = function () {
vOp.onclick = function ()
{
var vOp = document.getElementById("myId");
vOp.attachEvent(" oneClick);
vOp.attachEvent(" TwoClick);
vOp.detachEvent(" oneClick);
}
}
</script>
</head>
<body>
<div>
<p id="myId">Click me</p>
</div>
</body>
</html>
1.2.3 标准DOM的监听方法
标准的DOM定义了两个方法来实现添加和删除监听函数，分别是addEventListener()和removeEventListener()。
下面仍以实例介绍：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Test by WangYu--事件监听</title>
<script language="javascript">
function oneClick()
{
alert("oneClick click me");
vOp.removeEventListener("click", TwoClick, false);
}
function TwoClick() {
alert("TwoClick click me");
}
var vOp;
window.onload = function () {
var vOp = document.getElementById("myId");
vOp.addEventListener("click", oneClick,false);
vOp.addEventListener("click", TwoClick,false);
}
</script>
</head>
<body>
<div>
<p id="myId">Click me</p>
</div>
</body>
</html>
1.3 事件的类型
1.3.1 鼠标事件
常用的鼠标事件有click,dbclick,mousedown,mouseout,mouseover,mouseup,mousemove
1.3.2 键盘事件
常用的键盘事件有keydown，keypress,keyup
1.3.3 HTML事件
在HTML常用的事件有load,unload,error,select,change,submit,focus,blur
本文出自 “在追逐梦想的路上” 博客，请务必保留此出处http://wangyu19900123.blog.51cto.com/6190851/1544226
菜鸟学前端——javascrip进阶