Javascript事件实例详解


Posted in Javascript onNovember 06, 2013

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"/>
<div id="div1" style="width:100px;height:150px;background:#ccc;"></div>
</body>
 

鼠标移动---在可视区有效
 <title>鼠标移动</title>
<script>
    window.onmousemove=function(ev){
        var oEvent=ev||event;
        var odiv=document.getElementById('div1');
        odiv.style.left=oEvent.clientX+'px';
        odiv.style.top=oEvent.clientY+'px';
    };
</script>
</head>
<body>
<div id="div1" style="width:50px;height:50px;background:blue;position:absolute;"></div>
</body>
 

 键盘改变位置和方向---通过keycode获取键盘的键值来执行相应的操作。
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#div1 {width:100px; height:100px; background:#CCC; position:absolute;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
document.onkeydown=function (ev)
{
    var oEvent=ev||event;
    var oDiv=document.getElementById('div1');    //←        37
    //右        39
    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>
 

鼠标跟随小尾巴
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
div {width:10px; height:10px; background:red; position:absolute;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload=function ()
{
    var aDiv=document.getElementsByTagName('div');
    var i=0;    document.onmousemove=function (ev)
    {
        var oEvent=ev||event;
        for(i=aDiv.length-1;i>0;i--)
        {
            aDiv[i].style.left=aDiv[i-1].style.left;
            aDiv[i].style.top=aDiv[i-1].style.top;
        }
        aDiv[0].style.left=oEvent.clientX+'px';
        aDiv[0].style.top=oEvent.clientY+'px';
    };
};
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>

keycode
 <script>
document.onkeydown=function (ev)
{
    var oEvent=ev||event;    alert(oEvent.keyCode);
};
</script>
 

 ctrlKey---可以通过ctrl+enter组合键来提交内容
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload=function ()
{
    var oBtn=document.getElementById('btn1');
    var oTxt1=document.getElementById('txt1');
    var oTxt2=document.getElementById('txt2');    oBtn.onclick=function ()
    {
        oTxt1.value+=oTxt2.value+'\n';
        oTxt2.value='';
    };
    oTxt2.onkeydown=function (ev)
    {
        var oEvent=ev||event;
        if(oEvent.ctrlKey && oEvent.keyCode==13)
        {
            oTxt1.value+=oTxt2.value+'\n';
            oTxt2.value='';
        }
    };
};
</script>
</head>
<body>
<textarea id="txt1" rows="10" cols="40"></textarea><br />
<input id="txt2" type="text" />
<input id="btn1" type="button" value="留言" />
</body>
</html>
Javascript 相关文章推荐
写的htc的数据表格
Jan 20 Javascript
IE8 原生JSON支持
Apr 13 Javascript
jQuery中获取Radio元素值的方法
Jul 02 Javascript
JavaScript字符串对象的concat方法实例(用于连接两个或多个字符串)
Oct 16 Javascript
javascript中setTimeout使用指南
Jul 26 Javascript
jQuery解决浏览器兼容性问题案例分析
Apr 15 Javascript
浅谈js之字面量、对象字面量的访问、关键字in的用法
Nov 20 Javascript
JavaScript转换数据库DateTime字段类型方法
Jun 27 Javascript
Angularjs中ng-repeat的简单实例
Aug 25 Javascript
JS实现在文本指定位置插入内容的简单示例
Dec 22 Javascript
详解从买域名到使用pm2部署node.js项目全过程
Mar 07 Javascript
简述ES6新增关键字let与var的区别
Aug 23 Javascript
zTree插件之多选下拉菜单实例代码
Nov 06 #Javascript
Jquery ajax执行顺序 返回自定义错误信息(实例讲解)
Nov 06 #Javascript
Js参数值中含有单引号或双引号问题的解决方法
Nov 06 #Javascript
浅析Js中的单引号与双引号问题
Nov 06 #Javascript
表单元素与非表单元素刷新区别详细解析
Nov 06 #Javascript
js onclick事件传参讲解
Nov 06 #Javascript
jquery validation验证身份证号,护照,电话号码,email(实例代码)
Nov 06 #Javascript
You might like
用PHP和Shell写Hadoop的MapReduce程序
2014/04/15 PHP
PHP中使用socket方式GET、POST数据实例
2015/04/02 PHP
php导出中文内容excel文件类实例
2015/07/06 PHP
ZendFramework框架实现连接两个或多个数据库的方法
2016/12/08 PHP
PHP 7.1新特性的汇总介绍
2016/12/16 PHP
Laravel实现定时任务的示例代码
2017/08/10 PHP
PHP简单实现二维数组的矩阵转置操作示例
2017/11/24 PHP
阿里云的WindowsServer2016上部署php+apache
2018/07/17 PHP
tp5(thinkPHP5)框架实现多数据库查询的方法
2019/01/10 PHP
浅谈laravel-admin的sortable和orderby使用问题
2019/10/03 PHP
谈谈我对JavaScript DOM事件的理解
2015/12/18 Javascript
关于backbone url请求中参数带有中文存入数据库是乱码的快速解决办法
2016/06/13 Javascript
用原生JS实现简单的多选框功能
2017/06/12 Javascript
js实现本地图片文件拖拽效果
2017/07/18 Javascript
JavaScript实现单例模式实例分享
2017/12/22 Javascript
Vue源码中要const _toStr = Object.prototype.toString的原因分析
2018/12/09 Javascript
[01:09:16]DOTA2-DPC中国联赛 正赛 SAG vs Dynasty BO3 第一场 1月25日
2021/03/11 DOTA
Python中函数参数设置及使用的学习笔记
2016/05/03 Python
python基础教程之五种数据类型详解
2017/01/12 Python
Python入门之三角函数全解【收藏】
2017/11/08 Python
Python中单、双下划线的区别总结
2017/12/01 Python
强悍的Python读取大文件的解决方案
2019/02/16 Python
Python with语句用法原理详解
2020/07/03 Python
Python Merge函数原理及用法解析
2020/09/16 Python
matplotlib之属性组合包(cycler)的使用
2021/02/24 Python
CSS3 3D酷炫立方体变换动画的实现
2019/03/26 HTML / CSS
UGG雪地靴荷兰官网:UGG荷兰
2016/09/09 全球购物
家庭睡衣和家庭用品:Little Blue House
2018/03/18 全球购物
Seavenger官网:潜水服、浮潜、靴子和袜子
2020/03/05 全球购物
介绍下WebSphere的安全性
2013/01/31 面试题
骨干教师培训制度
2014/01/13 职场文书
工业设计专业自荐书
2014/06/05 职场文书
有限公司股东合作协议书
2014/10/29 职场文书
车间主任岗位职责
2015/02/03 职场文书
天鹅湖观后感
2015/06/09 职场文书
详解PHP用mb_string处理windows中文字符
2021/05/26 PHP