Javascript事件实例详解

2024-05-06 14:34:12

字体：大中小

来源：转载

供稿：网友

document是位于html标签之上的，可以说是权力最大的。下面的实例当你单击页面上的任何位置都会弹出“a”,正是运用了document的特性。
代码如下:
<script>
     document.onclick=function(){
         alert('a');
     };
</script>

获取鼠标位置clientX,clientY---注意这里仅仅只是可视区的鼠标位置
代码如下:
<script>
    document.onclick=function(ev){
        if(ev)
        {
            alert(ev.clientX+','+ev.clientY);
        }
        else{
            alert(event.clientX+','+event.clentY);
        };
    };
</script>

或者
代码如下:
<script>
    document.onclick=function(ev){
    /*    if(ev)
        {
            alert(ev.clientX+','+ev.clientY);
        }
        else{
            alert(event.clientX+','+event.clentY);
        };
    };*/
    var oEvent=ev||event;
    alert(oEvent.clientX+','+oEvent.clientY);
    };
</script>

事件冒泡---一层一层叠加的元素在一起，形成事件冒泡，比如下面的例子：document的最大范围影响了div的响应。
代码如下:
<script>
    window.onload=function(){
        var obtn=document.getElementById('btn1');
        var odiv=document.getElementById('div1');
        obtn.onclick=function(ev){
            var oEvent=ev||event;
            odiv.style.display='block';
            oEvent.cancelBubble=true;//清除冒泡
        };
        document.onclick=function(){
            odiv.style.display='none';
        };
    };
</script>
</head>
<body>
<input type="button" value="显示" id="btn1"/>

上一篇：jQuery中$.fn的用法示例介绍

下一篇：jquery增加时编辑jqGrid(实例代码)

学习交流

硬盘分区如何设置准确的分区空间

硬盘分区如何设置准确的分区空间...

热门图片

猜你喜欢的新闻

猜你喜欢的关注