Javascript -- 事件基础

*获取事件的坐标：event.clientX, event.clentY

window.onload = function()
{
 document.onclick = function(ev){
        var oEvent = ev || event;
        console.log(oEvent.clientX +" , " +oEvent.clientY);    
   }         
}

*事件冒泡

<!DOCTYPE HTML>
<html onclick="alert('html');">
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
div {padding:100px;}
</style>
</head>

<body onclick="alert('body');">
<div style="background:#CCC;" onclick="alert(this.style.background);">
    <div style="background:green;" onclick="alert(this.style.background);">
        <div style="background:red;" onclick="alert(this.style.background);">
        </div>
    </div>
</div>
</body>
</html>

*键盘事件：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1 {width:100px; height:100px; background:#CCC; position:absolute;}
</style>
<script>
document.onkeydown=function (ev)
{
    var oEvent=ev||event;
    var oDiv=document.getElementById('div1');
    if(oEvent.keyCode==37)
    {
        oDiv.style.left=oDiv.offsetLeft-10+'px';
    }
    else if(oEvent.keyCode==39)
    {
        oDiv.style.left=oDiv.offsetLeft+10+'px';
    }
};
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>

*阻止默认事件

<script>
document.oncontextmenu=function ()
{
    return false;    //阻止默认事件
};
</script>

*

*

*

posted on 2016-07-20 17:57  yeatschen  阅读(87)  评论(0)    收藏  举报

导航