JavaScript 高级篇 事件、注册事件、及大量例子(八)
前言:我这篇将和大家一起学习事件和事件的处理,这篇的内容还是比较广泛的,希望大家喜欢。
1、鼠标滑过元素,显示工具提示。
一、0级DOM中的基本事件出来
1、作为Html属性的事件(关联的函数)也就是官方的句柄
1 <input type="button" value="掐我!" onclick = "alert('掐你大爷!');"/>
2、作为Javascript属性的事件句柄
//javascript代码部分
document.f1.b1.onclick = function(){alert('爱');};
//也可以通过Id得到你要绑定的元素
document.getElementById("b").onclick=function(){alert('Love')}//通过制定Id,获取元素
//HTML标记部分
<form name = 'f1'>
<input type="button" value="说出爱" name="b1" id ="id"/>
</form>
都是给元素的属性定义了句柄,那么那个好呢?
答案:是作为Javascript属性的句柄,因为它有效的使Javascript和Html混合,也使程序更模块化,即便将来你要修改文档元素的句柄,也不用去Html静态页面.
3、事件句柄和this关键字(对理解W3C和微软定义的Event很有帮助的)
无论是Html属性定义的句柄还是Javascript属性定义的句柄,都是把一个函数赋予文档元素的属性.换句话说,是在定义文档元素的新方法,在事件被调用时,它作为(产生事件)元素来调用,所以this引用了是那个目标元素。
二、2级DOM中的高级事件处理
有两种模型,一种是W3C定义的,另一种是微软定义的,W3C定义的模型支持所有市面上的浏览器,除了IE,微软定义的模式只支持IE。
事件的传播:在0级的DOM事件模型中,浏览器把事件分派给发生事件的文档元素,如果某个元素有合适的句柄,就运行这个句柄。
在2级的DOM高级事件模式中,可以做到当某个元素触发了,同时它的祖先元素也有机会处理那个事件.
事件的传播分三个阶段:第一,在捕捉阶段,事件从Document对象沿着文档树向下传播给目标节点,如果目标的祖先专门注册了捕捉事件的句柄。
第二,该阶段发生在目标节点自身,直接注册在目标上的适合事件句柄将运行.
第三,该阶段是起泡阶段,在这个阶段,事件将从目标元素向上传播回或起泡回Document对象的文档层次。
1、接下来我将使用一个比较长的例子,来和大家一起理解高级事件的应用.
内容:当鼠标经过元素是可以显示工具提示。
CSS部分:这个文件大家可以保存名为showmessage.css的文件。
.showmessage{ font-family:Tahoma;font-size:12px;border:1px solid #99ff00; width:200px; height:80px; color:#dd0f00; background-color:Gray;}
Javascript部分:
// JScript source code function Tooltip() { this.tooltip = document.createElement("div");//构造一个DIV this.tooltip.style.position = "absolute";//设置样式 this.tooltip.style.visibility = "hidden"; this.tooltip.className = "showmessage"; } Tooltip.prototype.show = function (text, x, y) {//该方法用于显示 text 是要显示的文本,x 在IE中的水平位置,y是垂直位置。 this.tooltip.innerHTML = text; this.tooltip.style.left = x + "px"; this.tooltip.style.top = y + "px"; this.tooltip.style.visibility = "visible"; if (this.tooltip.parentNode != document.body) document.body.appendChild(this.tooltip); }; Tooltip.prototype.hide = function () {//该方法用于隐藏 this.tooltip.style.visibility = "hidden"; } Tooltip.OFFSET_X = 10;//设置偏离大小 Tooltip.OFFSET_Y = 20; Tooltip.DEFINETIME = 500;//设置驱动函数的间隔时间 Tooltip.prototype.toolmessage = function (target, event) { var text = target.getAttribute("info"); if (!text) return; var x = event.clientX + document.documentElement.scrollLeft, y = event.clientY + document.documentElement.scrollTop; x += Tooltip.OFFSET_X; y += Tooltip.OFFSET_Y; var self = this; var timer = window.setTimeout(function () { self.show(text, x, y); }, Tooltip.DEFINETIME);//定时显示的函数方法 if (target.addEventListener) target.addEventListener("mouseout", outHandler, false); //注册事件 除了IE都支持 else if (target.attachEvent) target.attachEvent("onmouseout", outHandler);//支持IE else target.onmouseout = outHandler;//支持比较低的版本 function outHandler() { self.hide();//隐藏 window.clearInterval(timer);//撤销定时函数 if (target.removeEventListener) target.removeEventListener("mouseout", outHandler, false);//取消事件注册 else if (target.detachEvent) target.detachEvent("onmouseout", outHandler);//取消事件注册IE else target.onmouseout = null; } }; Tooltip.operator = new Tooltip();//通过类的属性,封装 Tooltip.showmessage = function (target, event) { Tooltip.operator.toolmessage(target, event); };//通过类的属性,封装。
Html部分:
<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>Untitled Page</title> <link href="showmessage.css" rel="Stylesheet" type="text/css" /> <script type="text/javascript" src="showmessage.js"> </script> </head> <body"> <a href="#" onmouseover = "Tooltip.showmessage(this,event);" info="更多.....">MyBlog</a> <div><ul> <li><a href="#" info="更多......." onmouseover="Tooltip.showmessage(this,event)">Myblog</a></li> <li><a href="#" info="更多......." onmouseover="Tooltip.showmessage(this,event)">Myblog</a></li> <li><a href="#" info="更多......." onmouseover="Tooltip.showmessage(this,event)" >Myblog</a></li> <li><a href="#" info="更多......." onmouseover="Tooltip.showmessage(this,event)">Myblog</a></li> <li><a href="#"info="更多......." onmouseover="Tooltip.showmessage(this,event)" >Myblog</a></li> </ul></div> </body> </html>
效果:
总结:Javascript的文章就暂时总结到这篇吧,有了这些基础,学习JQuery 简直就是小菜了。。。。