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 相关文章推荐
Valerio 发布了 Mootools
Sep 23 Javascript
javascript new 需不需要继续使用
Jul 02 Javascript
js分解url参数(面向对象-极简主义法应用)
Aug 09 Javascript
jquery 获取表单元素里面的值示例代码
Jul 28 Javascript
setInterval()和setTimeout()的用法和区别示例介绍
Nov 17 Javascript
javascript处理表单示例(javascript提交表单)
Apr 28 Javascript
jquery的总体架构分析及实现示例详解
Nov 08 Javascript
JS轮播图实现简单代码
Feb 19 Javascript
Mint UI 基于 Vue.js 移动端组件库
Nov 07 Javascript
Angular6封装http请求的步骤详解
Aug 13 Javascript
浅谈VUE-CLI脚手架热更新太慢的原因和解决方法
Sep 28 Javascript
js实现tab栏切换效果
Aug 02 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
程序员编程十条戒律
2009/07/09 PHP
PHP 数组排序方法总结 推荐收藏
2010/06/30 PHP
ThinkPHP实现的rsa非对称加密类示例
2018/05/29 PHP
Laravel框架基于ajax和layer.js实现无刷新删除功能示例
2019/01/17 PHP
JScript中的undefined和&quot;undefined&quot;的区别
2007/03/08 Javascript
传递参数的标准方法(jQuery.ajax)
2008/11/19 Javascript
JS面向对象、prototype、call()、apply()
2009/05/14 Javascript
基于jquery的修改当前TAB显示标题的代码
2010/12/11 Javascript
JavaScript通过元素的ID和name设置样式
2014/07/08 Javascript
Javascript 拖拽的一些高级的应用(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
JS+CSS实现的简单折叠展开多级菜单效果
2015/09/12 Javascript
每天一篇javascript学习小结(Boolean对象)
2015/11/12 Javascript
安装使用Mongoose配合Node.js操作MongoDB的基础教程
2016/03/01 Javascript
JavaScript实现移动端滑动选择日期功能
2016/06/21 Javascript
详解XMLHttpRequest(一)同步请求和异步请求
2016/09/14 Javascript
实例解析jQuery工具函数
2016/12/01 Javascript
jQuery与js实现颜色渐变的方法
2016/12/30 Javascript
JS实现压缩上传图片base64长度功能
2019/12/03 Javascript
基于Angular 8和Bootstrap 4实现动态主题切换的示例代码
2020/02/11 Javascript
微信小程序单选框自定义赋值
2020/05/26 Javascript
Python操作mongodb数据库进行模糊查询操作示例
2018/06/09 Python
pyqt5 实现工具栏文字图片同时显示
2019/06/13 Python
django云端留言板实例详解
2019/07/22 Python
Python安装tar.gz格式文件方法详解
2020/01/19 Python
python随机生成大小写字母数字混合密码(仅20行代码)
2020/02/01 Python
Python类绑定方法及非绑定方法实例解析
2020/10/09 Python
css3动画过渡实现鼠标跟随导航效果
2018/02/08 HTML / CSS
html5理解head_动力节点Java学院整理
2017/07/13 HTML / CSS
FILA斐乐中国官方商城:意大利运动品牌
2017/01/25 全球购物
化工机械应届生求职信
2013/11/04 职场文书
学习党章思想汇报
2014/01/07 职场文书
主题婚礼策划方案
2014/02/10 职场文书
中文教师求职信
2014/02/22 职场文书
银行求职信怎么写
2019/06/20 职场文书
解决vue-router的beforeRouteUpdate不能触发
2022/04/14 Vue.js
Elasticsearch6.2服务器升配后的bug(避坑指南)
2022/09/23 Servers