标签：htm5 前端 网页设计 javascript
p{
background: gray;
color: white;
padding:10px;
margin:5px;
border: thin solid black;
}
span{
background: white;
color: black;
padding: 2px;
cursor:pointer;
}
a{
background:gray;
color:white;
padding: 10px;
border: thin solid black;
}
table{
margin: 5px;
border-collapse: collapse;
}
th,td{
padding: 4px;
}1)在元素上使用某个以on开头的属性——内联处理事件；
<p onmouseover="this.style.background='white';this.style.color='black'"
onmouseout="this.style.removeProperty('color');this.style.removeProperty('background')">
远地本着“构筑诚信，永续发展”的理念为客户提供专业的理财服务、财富管理以及产品方案推荐。
远地都进来看看撒将通过自身的专业优势和有效的信息交流平台，为资金富裕方和资金需求方打造一个专业，诚信，共赢，睿智的服务平台，
帮助客户实现稳定、安全的财富增值，帮助更多优秀的中小型企业融资成功。
</p>2)定义函数，并用它的名称作为以on开头的属性里的值——用函数处理事件；
<p onmouseover="handleMouseOver(this)"
onmouseout="handleMouseOut(this)">
远地本着“构筑诚信，永续发展”的理念为客户提供专业的理财服务、财富管理以及产品方案推荐。
远地都进来看看撒将通过自身的专业优势和有效的信息交流平台，为资金富裕方和资金需求方打造一个专业，诚信，共赢，睿智的服务平台，
帮助客户实现稳定、安全的财富增值，帮助更多优秀的中小型企业融资成功。
</p>
<p onmouseover="handleMouseOver(this)"
onmouseout="handleMouseOut(this)">
远地秉承“奉献、拼搏、勤奋、团结奉献”的职业精神，已为200多家企业包括国企、民企和院所提供了企业转型升级、
战略规划设计、集团组建、组织管理、质量管理体系、人力资源管理体系、财务风险管控和企业综合咨询等服务。
并与100多家企业建立长期战略伙伴的合作关系。。
</p> <script type="text/javascript">
function handleMouseOver(elem){
elem.style.background='white';
elem.style.color='black';
}
function handleMouseOut(elem){
elem.style.removeProperty('background');
elem.style.removeProperty('color');
}
</script>3.1)使用标准的DOM搜索技巧，并用以on开头的属性指派一个函数——用DOM处理事件；
3.2)用代表该元素的HTMLElement对象上的addEventListener方法——用DOM处理事件；
<p id="block1">
远地本着“构筑诚信，永续发展”的理念为客户提供专业的<span id="licai">理财</span>服务、财富管理以及产品方案推荐。
远地都进来看看撒将通过自身的专业优势和有效的信息交流平台，为资金富裕方和资金需求方打造一个专业，诚信，共赢，睿智的服务平台，
帮助客户实现稳定、安全的财富增值，帮助更多优秀的中小型企业融资成功。
</p>
<p id="block2">
远地秉承“奉献、拼搏、勤奋、团结奉献”的职业精神，已为200多家企业包括国企、民企和院所提供了企业转型升级、
战略规划设计、集团组建、组织管理、质量管理体系、人力资源管理体系、财务风险管控和企业综合咨询等服务。
并与100多家企业建立长期战略伙伴的合作关系。。
</p>
<pre name="code" class="html"><button id="pressme">点击移除事件</button>
<script type="text/javascript">
<span style="font-family:KaiTi_GB2312;"> //使用Dom构建事件处理</span>
var pElems=document.getElementsByTagName("p");
for(var i=0;i<pElems.length;i++){
pElems[i].onmouseover=handleMouseOver;
pElems[i].onmouseout=handleMouseOut;
}
function handleMouseOver(e){
e.target.style.background='white';
e.target.style.color='black';
}
function handleMouseOut(e){
e.target.style.removeProperty('background');
e.target.style.removeProperty('color');
}
</script>
<script type="text/javascript"><span style="font-family:KaiTi_GB2312;">
</span>//使用addEventListener和removeEventListener方法
var pElems=document.getElementsByTagName("p");
for(var i=0;i<pElems.length;i++){
pElems[i].addEventListener("mouseover",handleMouseOver);
pElems[i].addEventListener("mouseout",handleMouseOut);
}
document.getElementById("pressme").onclick=function(){
document.getElementById("block2").removeEventListener("mouseout",handleMouseOut);
}
function handleMouseOver(e){
e.target.style.background='white';
e.target.style.color='black';
}
function handleMouseOut(e){
e.target.style.removeProperty('background');
e.target.style.removeProperty('color');
}
</script>3.3)Event对象的函数和属性
type——事件的名称（如mouseover）；
target——事件指向的元素；
currentTarget——带有当前被触发事件监听器的元素；
eventPhase——事件生命周期的阶段；
bubbles——如果事件会在文档里冒泡则返回true,否则返回false;
cancelable——如果事件带有可撤销的默认行为则返回true,否则返回false;
timeStamp——事件的创建时间，如果事件不可用则为0；
stopPropagation()——在当前元素的事件监听器被触发后终止事件在元素树中的流动；
stopImmediatePropagation()——立即终止事件在元素树中的流动。当前元素上未被触发的事件监听器会被忽略；
preventDefault()——防止浏览器执行与事件关联的默认操作；
defaultPrevented——如果调用过preventDefault()则返回true;
<script type="text/javascript">
//<span style="font-family:KaiTi_GB2312;">使用type属性</span>
var pElems=document.getElementsByTagName("p");
for(var i=0;i<pElems.length;i++){
pElems[i].onmouseover=handleMouseEvent;
pElems[i].onmouseout=handleMouseEvent;
}
function handleMouseEvent(e){
if(e.type=="mouseover"){
e.target.style.background='white';
e.target.style.color='black';
}else{
e.target.style.removeProperty('background');
e.target.style.removeProperty('color');
}
}
</script>
<script type="text/javascript">
<span style="font-family:KaiTi_GB2312;">//</span>理解事件流:捕捉、目标、冒泡
var licai=document.getElementById("licai");
var textblock=document.getElementById("block1");
licai.addEventListener("mouseover",handleMouseEvent);
licai.addEventListener("mouseout",handleMouseEvent);
textblock.addEventListener("mouseover",handleDescendantEvent,true);
textblock.addEventListener("mouseout",handleDescendantEvent,true);
textblock.addEventListener("mouseover",handleBubbleMouseEvent,false);
textblock.addEventListener("mouseout",handleBubbleMouseEvent,false);
function handleBubbleMouseEvent(e){
if(e.type=="mouseover" && e.eventPhase==Event.BUBBLING_PHASE){
e.target.style.padding="5px";
}else if(e.type=="mouseout" && e.eventPhase==Event.BUBBLING_PHASE){
e.target.style.removeProperty('padding');
}
}
function handleDescendantEvent(e){
if(e.type=="mouseover" && e.eventPhase==Event.CAPTURING_PHASE){
e.target.style.border="thick solid red";
e.currentTarget.style.border="thick double black";
}else if(e.type=="mouseout" && e.eventPhase==Event.CAPTURING_PHASE){
e.target.style.removeProperty('border');
e.currentTarget.style.removeProperty('border');
}
//e.stopImmediatePropagation();
//e.stopPropagation();
}
function handleMouseEvent(e){
if(e.type=="mouseover"){
e.target.style.background='white';
e.target.style.color='black';
}else{
e.target.style.removeProperty('background');
e.target.style.removeProperty('color');
}
}
</script> <a href="http://www.sina.com.cn">访问新浪</a>
<a href="http://www.w3school.com.cn">访问W3C</a><script type="text/javascript"><span style="font-family:KaiTi_GB2312;">
//</span>撤销默认的行为<span style="font-family:KaiTi_GB2312;">
</span> function handleClick(e){
if(!confirm("您真的要访问"+ e.target.href+" 吗?")){
e.preventDefault();
}
}
var elems=document.querySelectorAll("a");
for(var i=0;i<elems.length;i++){
elems[i].addEventListener("click",handleClick,false);
}
</script>3.4)使用HTML事件
3.4.1）文档事件（document对象）
readystatechange——在readyState属性的值发生变化时触发；
3.4.2）窗口事件（window对象）
onabort——在文档或资源加载过程被终止时触发；
onafterprint——在已调用window.print()方法，但尚未给用户提供打印选项时触发；
onbeforeprint——在用户完成文档打印后触发；
onerror——在文档或资源的加载发生错误时触发；
onhashchangge——在锚部分发生变化时触发；
onload——在文档或资源加载完成时触发；
onpopstate——触发后提供一个关联浏览器历史的状态对象；
onresize——在窗口缩放时触发；
onunload——在文档从窗口或浏览器中卸载时触发；
3.4.3）鼠标事件
click——在点击并释放鼠标键时触发；
dbclick——在两次点击并释放鼠标键时触发；
mousedown——在点击鼠标键时触发；
mouseenter——在光标移入元素或某个后代元素所占据的屏幕区域时触发；
mouseleave——在光标移出元素或所有后代元素所占据的屏幕区域时触发；
mousemove——当光标在元素上移动时触发；
mouseout——与mouseleave基本相同，除了当光标仍然在某个后代元素上时也会触发；
mouseover——与mouseenter基本相同，除了当光标仍然在某个后代元素上时也会触发；
mouseup——在释放鼠标键时触发；
3.4.3.1)MouseEvent对象
button——标明点击的是哪个键。0是鼠标主键，1中中键，2是右键；
altKey——如果在事件触发时按下了alt/option键则返回true；
clientX——返回事件触发时鼠标相对于元素视口的X坐标；
clientY——返回事件触发时鼠标相对于元素视口的Y坐标；
screenX——返回事件触发时鼠标相对于屏幕坐标系的X坐标；
screenY——返回事件触发时鼠标相对于屏幕坐标系的Y坐标；
shiftKey——如果在事件触发时按下了shift键则返回true;
ctrlKey——如果在事件触发时按下了Ctrl键则返回true;
<p id="block1">
远地本着“构筑诚信，永续发展”的理念为客户提供专业的<span id="licai">理财</span>服务、财富管理以及产品方案推荐。
远地都进来看看撒将通过自身的专业优势和有效的信息交流平台，为资金富裕方和资金需求方打造一个专业，诚信，共赢，睿智的服务平台，
帮助客户实现稳定、安全的财富增值，帮助更多优秀的中小型企业融资成功。
</p>
<table border="1">
<tr>
<th>Type:</th><td id="eType"></td>
</tr>
<tr>
<th>X:</th><td id="eX"></td>
</tr>
<tr>
<th>Y:</th><td id="eY"></td>
</tr>
</table><script type="text/javascript">
//使用MouseEvent对象响应鼠标事件
var textblock=document.getElementById("block1");
var typeCell=document.getElementById("eType");
var xCell=document.getElementById("eX");
var yCell=document.getElementById("eY");
textblock.addEventListener("mouseover",handleMouseEvent,false);
textblock.addEventListener("mouseout",handleMouseEvent,false);
textblock.addEventListener("mousemove",handleMouseEvent,false);
function handleMouseEvent(e){
if(e.eventPhase==Event.AT_TARGET){
typeCell.innerHTML= e.type;
xCell.innerHTML= e.clientX;
yCell.innerHTML= e.clientY;
}
if(e.type=="mouseover"){
e.target.style.background='black';
e.target.style.color='white';
}else{
e.target.style.removeProperty('color');
e.target.style.removeProperty('background');
}
}
</script>3.4.4）键盘焦点事件
blur——在元素失去焦点时触发；
focus——在元素获得焦点时触发；
focusin——在元素即将获得焦点时触发；
focusout——在元素即将失去焦点时触发；
3.4.5）键盘事件
keydown——在用户按下某个键时触发；
keypress——在用户按下并释放某个键时触发；
keyup——在用户释放某个键时触发；
3.4.5.1)KeyboardEvent对象
char——返回按键代表的字符；
key——返回所按的键；
ctrlKey——如果在按键时Ctrl键处于按下状态则返回true;
shiftKey——如果在按键时shift键处于按下状态则返回true;
altKey——如果在按键时shift键处于按下状态则返回true;
repeat——如果该键一直处于按下状态时则返回true;
<form>
<p>
<label for="fave">Fruit:<input autofocus id="fave" name="fave"/></label>
</p>
<p>
<label for="name">Name:<input autofocus id="name" name="name"/></label>
</p>
<button type="submit">提交</button>
<button type="reset">重置</button>
</form>
<br/>
<span id="message"></span><script type="text/javascript">
var inputElems=document.getElementsByTagName("input");
for(var i=0;i<inputElems.length;i++){
inputElems[i].onkeyup=handleKeyboardEvent;
}
function handleKeyboardEvent(e){
document.getElementById("message").innerHTML="Key pressed: "+ e.keyCode+" Char："+String.fromCharCode(e.keyCode);
}
</script>3.4.6)表单事件
submit——在表单提交时触发；
reset——在表单重置时触发；
版权声明：本文为博主原创文章，未经博主允许不得转载。
标签：htm5 前端 网页设计 javascript
原文地址：http://blog.csdn.net/bboyjoe/article/details/47003113
