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 相关文章推荐
javascript 动态table添加colspan\rowspan 参数的方法
Jul 25 Javascript
jQuery元素的隐藏与显示实例
Jan 20 Javascript
Javascript实现颜色rgb与16进制转换的方法
Apr 18 Javascript
Prototype框架详解
Nov 25 Javascript
深入理解JS中的Function.prototype.bind()方法
Oct 11 Javascript
使用selenium抓取淘宝的商品信息实例
Feb 06 Javascript
微信小程序实现弹出菜单
Jul 19 Javascript
微信小程序基于canvas渐变实现的彩虹效果示例
May 03 Javascript
微信小程序云开发如何使用npm安装依赖
May 18 Javascript
js实现坦克移动小游戏
Oct 28 Javascript
axios 实现post请求时把对象obj数据转为formdata
Oct 31 Javascript
解决VUE项目localhost端口服务器拒绝连接,只能用127.0.0.1的问题
Aug 14 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
PHP5.0正式发布 不完全兼容PHP4 新增多项功能
2006/10/09 PHP
Django 标签筛选的实现代码(一对多、多对多)
2018/09/05 PHP
基于laravel belongsTo使用详解
2019/10/18 PHP
ExtJs GridPanel简单的增删改实现代码
2010/08/26 Javascript
Dom 是什么的详细说明
2010/10/25 Javascript
用JQuery实现表格隔行变色和突出显示当前行的代码
2012/02/10 Javascript
XMLHttpRequest Level 2 使用指南
2016/08/26 Javascript
vue.js轮播图组件使用方法详解
2018/07/03 Javascript
js调用设备摄像头的方法
2018/07/19 Javascript
用Node写一条配置环境的指令
2019/11/14 Javascript
python中pygame模块用法实例
2014/10/09 Python
python的变量与赋值详细分析
2017/11/08 Python
简单实现python画圆功能
2018/01/25 Python
python如何通过twisted实现数据库异步插入
2018/03/20 Python
使用NumPy和pandas对CSV文件进行写操作的实例
2018/06/14 Python
Python递归求出列表(包括列表中的子列表)的最大值实例
2020/02/27 Python
Python 定义只读属性的实现方式
2020/03/05 Python
Python生成器实现简单&quot;生产者消费者&quot;模型代码实例
2020/03/27 Python
Python BeautifulReport可视化报告代码实例
2020/04/13 Python
Python-for循环的内部机制
2020/06/12 Python
基于python实现图片转字符画代码实例
2020/09/04 Python
python 解决函数返回return的问题
2020/12/05 Python
python 爬虫爬取京东ps4售卖情况
2020/12/18 Python
阿里巴巴国际站:Alibaba.com
2016/07/21 全球购物
瑞典Happy Socks美国官网:购买色彩斑斓的快乐袜子
2016/10/19 全球购物
网站开发实习生的自我评价
2013/12/11 职场文书
中专三年学习的个人自我评价
2013/12/12 职场文书
体育系毕业生求职自荐信
2014/04/16 职场文书
协议书范本
2014/04/23 职场文书
劳动竞赛活动总结
2014/05/05 职场文书
党员群众路线教育实践活动剖析材料
2014/10/10 职场文书
2014个人年终工作总结范文
2014/12/15 职场文书
2016年精神文明建设先进个人事迹材料
2016/02/29 职场文书
离婚协议书范文2016
2016/03/18 职场文书
Python+Selenium实现读取网易邮箱验证码
2022/03/13 Python
Java代码规范与质量检测插件SonarLint的使用
2022/08/05 Java/Android