首页 > 代码库 > 7.4心得
7.4心得
onmouseenter
onmouseenter 事件在鼠标指针移动到元素上时触发。
提示： 该事件通常与 onm ouseleave 事件一同使用, 在鼠标指针移出元素上时触发。
提示： onm ouseenter 事件类似于 onm ouseover 事件。 唯一的区别是 onm ouseenter 事件不支持冒泡 。
技术细节
是否支持冒泡: No
是否可以取消: No
事件类型: MouseEvent
支持的 HTML 标签: 所有 HTML 元素，除了: <base>, <bdo>, <br>, <head>, <html>, <iframe>,
<meta>, <param>, <script>, <style>, 和 <title>
onmouseover
onmouseover 事件会在鼠标指针移动到指定的对象上时发生。
语法
onmouseover="SomeJavaScriptCode"
支持该事件的 HTML 标签：
<a>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <body>, <button>,
<caption>, <cite>, <code>, <dd>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>,
<form>, <h1> to <h6>, <hr>, <i>, <img>, <input>, <kbd>, <label>, <legend>,
<li>, <map>, <ol>, <p>, <pre>, <samp>, <select>, <small>, <span>, <strong>,
<sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>,
<tr>, <tt>, <ul>, <var>
支持该事件的 JavaScript 对象：
layer, link
代码
<html>
<head>
<script type="text/javascript">
function mouseOver()
{
document.getElementById(‘b1‘).src ="http://www.mamicode.com/i/eg_mouse.jpg"
}
function mouseOut()
{
document.getElementById(‘b1‘).src ="http://www.mamicode.com/i/eg_mouse2.jpg"
}
</script>
</head>
<body>
<a href="http://www.w3school.com.cn"
onmouseover="mouseOver()" onm ouseout="mouseOut()">
<img alt="Visit W3School!" src="http://www.mamicode.com/i/eg_mouse2.jpg" id="b1" />
</a>
</body>
</html>
onmouseout
onmouseout 事件会在鼠标指针移出指定的对象时发生。
语法
onmouseout="SomeJavaScriptCode"
支持该事件的 HTML 标签：
<a>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <body>, <button>,
<caption>, <cite>, <code>, <dd>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>,
<form>, <h1> to <h6>, <hr>, <i>, <img>, <input>, <kbd>, <label>, <legend>,
<li>, <map>, <ol>, <p>, <pre>, <samp>, <select>, <small>, <span>, <strong>,
<sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>,
<tr>, <tt>, <ul>, <var>
支持该事件的 JavaScript 对象：
layer, link
代码
<html>
<head>
<script type="text/javascript">
function mouseOver()
{
document.getElementById(‘b1‘).src ="http://www.mamicode.com/i/eg_mouse.jpg"
}
function mouseOut()
{
document.getElementById(‘b1‘).src ="http://www.mamicode.com/i/eg_mouse2.jpg"
}
</script>
</head>
<body>
<a href="http://www.w3school.com.cn"
onmouseover="mouseOver()" onm ouseout="mouseOut()">
<img alt="Visit W3School!" src="http://www.mamicode.com/i/example_mouse2.jpg" id="b1" />
</a>
</body>
</html>
onmouseleave
onmouseleave 事件在鼠标移除元素时触发。
提示： 该事件通常与 onm ouseenter 事件一起使用， 该事件在鼠标移动到元素上时触发。
提示: onm ouseleave 事件类似于 onm ouseout 事件。 唯一的区别是 onm ouseleave 事件不支持冒泡 。
技术细节
是否支持冒泡: No
是否可以取消: No
事件类型: MouseEvent
支持的 HTML 标签: 所有 HTML 元素，除了:<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, 和 <title>
文档碎片
文件碎片是因为文件被分散保存到整个磁盘的不同地方，而不是连续地保存在磁盘连续的簇中形成的。
产生
(1)在文件操作过程中，Windows系统可能会调用虚拟内存来同步管理程序，这样就会导致各个程序对硬盘频繁读写，从而产生文件碎片。
(2)还有一种情况就是当中间的一个扇区内容被删除后，新写入一个较小的文件，这样在这个文件两边就会出现一些空间，这时候再写入一个文件，两段空间的任意一部分都不能容纳该文件，这时候就需要将文件分割成两个部分，碎片再次产生了。
(3)最常见的就是下载电影之类的大文件，这期间大家一般都会处理一下其它事情，而下载下来的电影文件被迫分割成若干个碎片存储于硬盘中。因此下载是产生碎片的一个重要源头。还有就是经常删除、添加文件，这时候如果文件空间不够大，就会产生大量的文件碎片，随着文件的删改频繁，这种情况会日益严重。
影响
虽然说文件碎片对于正常工作影响并不大，但是会显著降低硬盘的运行速度，这主要是硬盘读取文件需要在多个碎片之间跳转，增加了等待盘片旋转到指定扇区的潜伏期和磁头切换磁道所需的寻道时间。
代码
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>文档碎片</title>
<meta name="Keywords" content="">
<meta name="author" content="@my_programmer">
</head>
<body>
<script>
var temp = document.createDocumentFragment();//文档碎片(当把文档碎片付给某节点时，只是把文档碎片中的子节点付给了某节点，它本身并没有插入到这个节点中)
for (var i=0; i<100; i++) {
var test =document.createElement(‘div‘);//创建一个节点
test.innerHTML = ‘aaa‘ + i;//给节点添加内容
temp.appendChild(test);//把创建的节点插入到temp文档中
}
document.body.appendChild(temp);//把temp文档插入到body末尾
</script>
</body>
</html>
事件冒泡
在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么
此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会
向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者
它到达了对象层次的最顶层，即document对象（有些浏览器是window）。
作用
（1）事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器
添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。
<div onclick="eventHandle(event)" id="outSide" style="width:100px; height:100px; background:#000; padding:50px">
<div id="inSide" style="width:100px; height:100px; background:#CCC"></div>
</div>
<script type="text/javascript">
//本例子只在外面盒子定义了处理方法，而这个方法一样可以捕获到子元素点击行为并处理它。假设有成千上万子元素要处理，难道我们要为每个元素加“onclick="eventHandle(event)"”？显然没有这种集中处理的方法来的简单，同时它的性能也是更高的。
function eventHandle(e)
{
var e=e||window.event;
var obj=e.target||e.srcElement;
alert(obj.id+‘ was click‘)
}
</script>
（2）让不同的对象同时捕获同一事件，并调用自己的专属处理程序做自己的事情，就像老板一下命令，各自员工做自己岗位上的工作去了。
<div onclick="outSideWork()" id="outSide" style="width:100px; height:100px; background:#000; padding:50px">
<div onclick="inSideWork()" id="inSide" style="width:100px; height:100px; background:#CCC"></div>
</div>
<script type="text/javascript">
function outSideWork()
{
alert(‘My name is outSide,I was working...‘);
}
function inSideWork()
{
alert(‘My name is inSide,I was working...‘);
}
//因为下面程序自动激活单击事件，有些浏览器不允许，所以请单击灰色盒子，从这里开始下命令，这样因为冒泡的原因，黑色大盒子也会收到单击事件，并调用了自己的处理程序。如果还有更多盒子嵌套，一样道理。
/*
function bossOrder()
{
document.getElmentById(‘inSide‘).click();
}
bossOrder();
*/
</script>
阻止事件冒泡
如果<p>是在<div>里面，那么呢，<P>有一个onclick事件，<div>也有onclick事件，为了触发<P>的点击事件时，不触发父元素的点击事件
代码
function stopBubble(e){
if(e&&e.stopPropagation){//非IE
e.stopPropagation();
}
else{//IE
window.event.cancelBubble=true;
}
}
<a onclick=‘‘>如果要阻止默认事件的触发，即默认的href事件，那么就需要调用如下函数：
代码如下:
function stopDefault( e ) {
//阻止默认浏览器动作(W3C)
if ( e && e.preventDefault )
e.preventDefault();
//IE中阻止函数器默认动作的方式
else
window.event.returnValue = http://www.mamicode.com/false;
return false;
}
7.4心得