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 相关文章推荐
用Javscript实现表单复选框的全选功能
May 25 Javascript
JavaScript中获取未知对象属性的代码
Apr 27 Javascript
JavaScript获取元素尺寸和大小操作总结
Feb 27 Javascript
JS实现兼容各种浏览器的高级拖动方法完整实例【测试可用】
Jun 21 Javascript
功能强大的Bootstrap效果展示(二)
Aug 03 Javascript
jQuery实现点击后高亮背景固定显示的菜单效果【附demo源码下载】
Sep 21 Javascript
KnockoutJS 3.X API 第四章之表单value绑定
Oct 10 Javascript
JS异步函数队列功能实例分析
Nov 28 Javascript
vue中轮训器的使用
Jan 27 Javascript
Vue 组件注册实例详解
Feb 23 Javascript
微信小程序判断用户是否需要再次授权获取个人信息
Jul 18 Javascript
JS严格模式原理与用法实例分析
Apr 27 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截断标题且兼容utf8和gb2312编码
2013/09/22 PHP
ThinkPHP分页实例
2014/10/15 PHP
php中将一个对象保存到Session中的方法
2015/03/13 PHP
[对联广告] JS脚本类
2006/08/27 Javascript
通过javascript设置css属性的代码
2009/12/28 Javascript
javascript拓展DOM操作 prependChild insertAfert
2010/11/17 Javascript
通过JS来判断页面控件是否获取焦点
2014/01/03 Javascript
JS获取计算机mac地址以及IP的实现方法
2014/01/08 Javascript
jQuery实现跨域
2015/02/03 Javascript
AngularJS表单和输入验证实例
2016/11/02 Javascript
jquery mobile移动端幻灯片滑动切换效果
2020/04/15 Javascript
Javascript基础回顾之(二) js作用域
2017/01/31 Javascript
CodeMirror js代码加亮使用总结
2017/03/25 Javascript
vue.js与element-ui实现菜单树形结构的解决方法
2018/04/21 Javascript
JS数组去重常用方法实例小结【4种方法】
2018/05/28 Javascript
webpack4+Vue搭建自己的Vue-cli项目过程分享
2018/08/29 Javascript
Angular7创建项目、组件、服务以及服务的使用
2019/02/19 Javascript
koa2服务端使用jwt进行鉴权及路由权限分发的流程分析
2019/07/22 Javascript
js判断复选框是否选中的方法示例【基于jQuery】
2019/10/10 jQuery
Python3安装Pymongo详细步骤
2017/05/26 Python
Python方法的延迟加载的示例代码
2017/12/18 Python
pandas pivot_table() 按日期分多列数据的方法
2018/11/16 Python
Python实现语音识别和语音合成功能
2019/09/20 Python
pycharm部署、配置anaconda环境的教程
2020/03/24 Python
python 实现波浪滤镜特效
2020/12/02 Python
纯css3实现宠物小鸡实例代码
2018/10/08 HTML / CSS
全球虚拟主机商:HostGator
2017/02/06 全球购物
Skyscanner英国:苏格兰的全球三大领先航班搜索服务之一
2017/11/09 全球购物
JSF面试题:Jsf中导航的标签是什么
2013/04/20 面试题
海南地接欢迎词
2014/01/14 职场文书
积极贯彻学习两会精神总结
2014/03/17 职场文书
微笑服务标语
2014/06/24 职场文书
明星邀请函
2015/02/02 职场文书
办公室岗位职责
2015/02/04 职场文书
项目安全员岗位职责
2015/02/15 职场文书
Python中的 Set 与 dict
2022/03/13 Python