关于JavaScript中事件的一些重要说明

最新推荐文章于 2024-09-22 11:17:00 发布

weixin_30640291

最新推荐文章于 2024-09-22 11:17:00 发布

阅读量65

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/gisland/archive/2009/10/25/1589487.html

版权

1，JavaScript异步回调

Code
<script language="javascript">
    //注册回调函数loaded到处理函数window.onload上
    window.onload = loaded;
    //把方法window.alert地址传递给show函数
    var show = window.alert;
    function loaded(){
        show("success");
    }
</script>

2，事件对象

　　下面的js实现当在textarea文本框里面键入回车时，并不导致换行。即禁用回车键

Code
<textarea ></textarea>
<script language = "javascript">
/*
事件的对象的棘手部分在于，IE的实现与W3C的规范有查表。IE使用一个独立的全局事件对象(它可以再全局变量属性window.event中找到)，而其他浏览器则使用独立的包含事件对象的参数传递。
*/
document.getElementsByTagName("textarea")[0].onkeypress = function(e)
{
    //如果不存在事件对象，则获取全局的(仅IE)的对象
    var e = e || window.event;

    //如果敲击了回车键，返回false(使它不发生任何行为)
    return e.keyCode != 13;
}
</script>

3，this关键字

　　浏览器会把this关键字等同于引用该函数(含有this关键字的函数)的当前元素

Code
<body>
    <div id = "body">
        <ul class = "links">
            <li>
                <a href = "/">Home</a>
            </li>
            <li>
                <a href = "./">mappath</a>
            </li>
            <li>
                <a href = "../">parentpath</a>
            </li>
        </ul>
    </div>
</body>
<script language = "javascript">
    var li = document.getElementsByTagName("li");
    for (var i = 0; i < li.length; i++)
    {
        li[i].onclick = handeClick;
    }
    function handeClick()
    {
        this.style.backgroundColor = "blue";
        this.style.color = "red";
    }
</script>

4，取消事件冒泡

　　通常当你对子元素作样式作修改，或者触发事件，根据冒泡原理，其父元素也会作相同改变，为防止这类事情发生，需要做取消事件冒泡的处理。

　　下面实例展示了鼠标会为其悬停的当前元素加上红色的边框。如果不阻止事件冒泡的话，每次把鼠标移到一个元素上时，该元素及其父元素都会有红色的边框，这是我们不希望看到的。

Code
<body>
    <div id = "body">
        <ul class = "links">
            <li>
                <a href = "/">Home</a>
            </li>
            <li>
                <a href = "./">mappath</a>
            </li>
            <li>
                <a href = "../">parentpath</a>
            </li>
        </ul>
    </div>
</body>

<script language="javascript">
    //阻止冒泡的通用函数
    function stopBubble(e)
    {
        if (e && e.stopPropagation)
            //w3c方法
            e.stopPropagation();
        else
            //ie方法
            window.event.cancelBubble = true;
    }

    var li = document.getElementsByTagName("*");
    for (var i = 0; i < li.length; i++)
    {
        //监听用户鼠标，当移动到元素上时，为元素加上红色边框
        li[i].onmouseover = function(e)
        {
            this.style.border = "1px solid red";
            stopBubble(e);
        }

        //检查用户鼠标，当移开元素时，删除我们加上的边框
        li[i].onmouseout = function(e)
        {
            this.style.border = "0px";
            stopBubble(e);
        }
    }
</script>

5，重载浏览器的默认行为

　　浏览器都有这种默认的行为，即当我们在<a>标签上点击的时候会链接到href属性的地址上，有的时候我们并不希望这种事情发生，而想实现我们自己的效果，比如弹出警告框，示例如下。

Code
<a href = "http://www.csu.edu.cn">重载浏览器的默认行为</a>

<script language = "javascript">
/*
为了达到同<a href = "#" onclick = function(){alert("success");}>content</a>相同效果
*/
    function stopDefault(e)
    {
        //W3C防止浏览器默认行为
        if (e && e.preventDefault)
            e.preventDefault();

        //IE防止浏览器默认行为
        else
            window.event.returnValue = false;

        return false;
    }

    var a = document.getElementsByTagName("a");
    for (var i = 0; i < a.length; i++)
    {
        a[i].onclick = function(e)
        {
            alert("我已经修改了浏览器的默认行为了");

            return stopDefault(e);
            //好像直接写下面一句也可以
            //return false;
        }
    }
</script>

6，事件的亲和力(accessibility,又称可访问性)

　　为了使得自己的网站更有亲和力，可以这样考虑，当我们把鼠标放在一个元素上或者通过键盘的tab键访问时，其样式应该保持一致，如下代码

Code
<body>
    <div id = "body">
        <ul class = "links">
            <li>
                <a href = "/">Home</a>
            </li>
            <li>
                <a href = "./">mappath</a>
            </li>
            <li>
                <a href = "../">parentpath</a>
            </li>
        </ul>
    </div>
</body>

<script language="javascript">
    var a = document.getElementsByTagName("a");
    for (var i = 0; i < a.length; i++)
    {
        //绑定鼠标悬停和聚焦事件处理函数到<a>元素上
        //当用户把鼠标悬停到链接上，或者(使用键盘)聚焦到链接上时，它会把<a>的背景颜色变成蓝色
        a[i].onmouseover = a[i].onfocus = function()
        {
            this.style.backgroundColor = "blue";
        }
        //绑定鼠标离开和模糊事件处理函数到<a>元素上
        //当用户从链接移开时，它会把<a>的背景颜色变成白色
        a[i].onmouseout = a[i].onblur = function()
        {
            this.style.backgroundColor = "white";
        }
    }
</script>

7，绑定事件监听

Code
//addEventt()添加事件
//Scott Andrew’s original addEvent() function

//elm元素,document.getElementId('btn1')
//evType事件名称,要注意的是"onclick"要改为"click","onblur"要改为"blur",也就是说事件名不要带"on",如Click
//fn当然就是绑定的函数了,记住不要跟括号,如showalert
//useCapture布尔值，表示该事件的响应顺序.userCapture若为true,则浏览器采用Capture,若为false则采用bubbing方式.建议用false
function addEvent(elm, evType, fn, useCapture)
{
    if (elm.addEventListener)
    {//firefox,navigation,etc..
        elm.addEventListener(evType, fn, useCapture);
    }
    else if (elm.attachEvent)
    {//IE
        var r = elm.attachEvent('on' + evType,fn);
    }
    else
    {
        elm['on' + evType] = fn;
    }
}

//removeEvent()注销事件

//参数名同addEvent()函数
function removeEvent(elm, evTye, useCapture)
{
    if (elm.detachEvent)
    {
        elm.detachEvent('on' + evType);
    }
    else if (elm.removeEventListener)
        {
            elm.removeEventListener(evType, userCapture);
        }
}

转载于:https://www.cnblogs.com/gisland/archive/2009/10/25/1589487.html