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 相关文章推荐
Json对象替换字符串占位符实现代码
Nov 17 Javascript
jquery提升性能最佳实践小结
Dec 06 Javascript
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
Apr 24 Javascript
jQuery+ajax中getJSON() 用法实例
Dec 22 Javascript
tuzhu_req.js 实现仿百度图片首页效果
Aug 11 Javascript
前端框架Vue.js构建大型应用浅析
Sep 12 Javascript
jQuery实现复选框的全选和反选
Feb 02 Javascript
图文介绍Vue父组件向子组件传值
Feb 17 Javascript
浅谈PDF.js使用心得
Jun 07 Javascript
从组件封装看Vue的作用域插槽的实现
Feb 12 Javascript
微信小程序云开发如何使用云函数生成二维码
May 18 Javascript
Jquery属性的获取/设置及样式添加/删除操作技巧分析
Dec 23 jQuery
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实现的生成静态HTML速度快类库
2007/03/31 PHP
PHP 程序员也要学会使用“异常”
2009/06/16 PHP
探讨:array2xml和xml2array以及xml与array的互相转化
2013/06/24 PHP
Yii2使用自带的UploadedFile实现的文件上传
2016/06/20 PHP
php中Redis的应用--消息传递
2017/03/28 PHP
浅谈PHP表单提交(POST&amp;GET&amp;URL编/解码)
2017/04/03 PHP
PHP抽象类与接口的区别详解
2019/03/21 PHP
javascript入门·图片对象(无刷新变换图片)\滚动图像
2007/10/01 Javascript
js 文件引入实现代码
2010/04/23 Javascript
JavaScript中yield实用简洁实现方式
2010/06/12 Javascript
关于IE中getElementsByClassName不能用的问题解决方法
2013/08/26 Javascript
简单的Jquery遮罩层代码实例
2013/11/14 Javascript
JavaScript的strict模式与with关键字介绍
2014/02/08 Javascript
使用javascript获取页面名称
2014/12/23 Javascript
jquery调取json数据实现省市级联的方法
2015/01/29 Javascript
jQuery实现分章节锚点“回到顶部”动画特效代码
2015/10/23 Javascript
javascript实现鼠标点击页面 移动DIV
2016/12/02 Javascript
Angular下H5上传图片的方法(可多张上传)
2017/01/09 Javascript
bootstrap响应式工具使用详解
2017/11/29 Javascript
Vue实现一个图片懒加载插件
2019/03/11 Javascript
使用Vue生成动态表单
2019/11/26 Javascript
vue实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动效果
2020/05/28 Javascript
vue 扩展现有组件的操作
2020/08/14 Javascript
vue3.0生命周期的示例代码
2020/09/24 Javascript
python判断、获取一张图片主色调的2个实例
2014/04/10 Python
python嵌套字典比较值与取值的实现示例
2017/11/03 Python
python之pexpect实现自动交互的例子
2019/07/25 Python
ALLSAINTS英国官网:伦敦新锐潮流品牌
2016/09/19 全球购物
印度民族服装购物网站:BIBA
2019/08/05 全球购物
Maxpeedingrods美国:高性能汽车零件
2020/02/14 全球购物
编写函数,将一个3*3矩阵转置
2013/10/09 面试题
致跳高运动员广播稿
2014/01/13 职场文书
社区中秋节活动方案
2014/01/29 职场文书
公司领导班子对照检查材料
2014/09/24 职场文书
工地食品安全责任书
2015/05/09 职场文书
火锅店的开业营销方案范本!
2019/07/05 职场文书