你所在位置:首页Javascript开发 → JavaScript高级篇之事件、注册事件、及大量例子(八)

JavaScript高级篇之事件、注册事件、及大量例子(八)

发布时间:2019-05-15

前言:我这篇将和大家一起学习事件和事件的处理,这篇的内容还是比较广泛的,希望大家喜欢。
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、接下来我将使用一个比较长的例子,来和大家一起理解高级事件的应用.
内容:当蟊昃厥强梢韵允竟ぞ咛崾尽br />  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("p");//构造一个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("mouut", 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="" >
<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>
    <p><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></p>
</body>
</html>
 效果:

 \

 

总结:Javascript的文章就暂时总结到这篇吧,有了这些基础,学习JQuery 简直就是小菜了。。。。


 

摘自  ben2012


 


上一篇:js跨域取数据功能的实现
下一篇:JavaScript高级篇之DOM文档,简单封装及调用、动态添加、删除样式(七)