事件对象event和计时器

事件对象：event

    属性：

        srcElement事件源对象

        keyCode 键盘按键Ascii码

window方法：

    定时器：

    1)setTimeout();//n毫秒后执行一次

    2)setInterval();//每隔n秒执行一次

    这两个方法都有个返回值,返回一个定时器id,可以定义一个变量接收

    清除定时器方法:

    setTimeout()对应的是 clearTimeout(id);

    setInterval()对应的是 clearInterval(id);

<html>

    <head>

    </head>

    <body>

        <div onclick="show1()">aaaa</div>

        <h2 onclick="show1()">bbb</h2>

        <p onclick="show1()">www</p>

    </body>

    <script>

        //弹出对应的内容

        function show(obj){

            alert(obj.innerText);

        }

        //我不希望使用this关键字，

        function show1(){

            alert(event.srcElement.innerText);

        }

    </script>

</html>

<html>

    <head>

    </head>

    <!--<body onkeypress="show()">-->

    <body onkeyup="show()">

        <input type="text" onkeyup="if(this.value!=this.value.toUpperCase())this.value=this.value.toUpperCase()"/>

    </body>

    <script>

        function show(){

            alert(event.keyCode);

            if(event.keyCode=="27"){

                window.close();

            }

        }

    </script>

</html>

<html>

    <head>

    <!--定时器Interval-->

    </head>

    <body>

        <div id="one" style="color:red;font-size:10cm;text-align:center">

        0

        </div>

        <input type="button" onclick="stop1()" value="stop"/>

        <input type="button" onclick="start1()" value="start1"/>

    </body>

    <script>

        var one=document.getElementById("one");

        var i=1;

        var dt="";

        function start1(){

            dt=setInterval(function(){

                one.innerText=i;

                i++;

            },"100");

        }

        function stop1(){

            clearInterval(dt);

        }

    </script>

</html>

定时器

<html>

    <head>

    <!-- 不做了，思路：

        按enter键停止，将xs，ys替换为0，再次按，判断xs和ys是否为0，是的话，讲根据fx给xsys赋值。

        实现鼠标点哪往哪里走：获取鼠标的坐标，和现在的左边，确定应该往x走多少，y走多少，根据x y的值调走的速度

    -->

    </head>

    <body onkeydown="opt()">

        <img border="0" id="ren" src="data:images/q_1.jpg" style="position:absolute;left:0px;top:0px;">

    </body>

    <script>

        var ren=document.getElementById("ren");

        var fx="q";

        function transStr(obj){

            //return obj.substring(obj.lastIndexOf("/")+1,obj.length);

            return obj.substr(obj.lastIndexOf("/")+1);

        }

        function changetu(){

            if(transStr(ren.src).charAt(2)=="1")

                ren.src="data:images/"+fx+"_2.jpg";

            else

                ren.src="data:images/"+fx+"_1.jpg";

        }

        function start1(){

            setInterval(function(){

                run();

                changetu();

            },400);

        }

        start1();

        function opt(){

            var code=event.keyCode;

            switch(code){

            case 37://左

                fx="z"

                ys=0;

                xs=-5;

                break;

            case 39://右

                fx="y";

                ys=0;

                xs=5;

                break;

            case 38://上

                fx="h";

                xs=0;

                ys=-5;

                break;

            case 40://下

                fx="q";

                xs=0;

                ys=5;

                break;

            }

        }

        var x=0;

        var y=0;

        var xs=0;

        var ys=0;

        function run(){

            x+=xs;

            y+=ys

            ren.style.left=x;

            ren.style.top=y;

        }

    </script>

</html>

走路游戏

事件 event window.event

事件对象属性：

    1、srcElement 事件源对象

    2、keyCode 事件发生时候的键盘码 keypress keydown keyup

    3、clientX，clientY  相对于窗口鼠标的x坐标y坐标

    4、screenX、screenY  相对于屏幕

    5、returnValue

    6、cancelBubble 取消冒泡(取消剩下的事件)+

<html>

    <head>

    </head>

    <body>

        <div id="one"></div>

    </body>

    <script>

        var one=document.getElementById("one");        

    window.document.onmousemove=function test(e){//我们将这个代码在IE执行正常，在火符却失效，因为火符不能直接获取event对象，按直接在body标签里面加事件，使用参数获取不到所以用另一种方式绑定事件，但这样在ie里面却出现问题，得到的是undefined

    //所以我们使用逻辑控制试试

            var ev=e || window.event;//注意，这个e是window处理过的event对象，就是火符得到的参数

            var cx=ev.clientX;

            var cy=ev.clientY;

            var sx=ev.screenX;

            var sy=ev.screenY;

            var str="clientX="+cx+" clientY="+cy+" screenX="+sx+" screecY="+sy;

            one.innerText=str;

            window.status=str;//window的状态栏

            window.document.title=str;

        }

    </script>

</html>

鼠标坐标例子

<html>

    <head>

    <!-- 图跟随鼠标移动-->

    </head>

    <body>

        <img id="tu" src="data:images/srf.jpg" style="position:absolute; left:400; top:200px;"  />

    </body>

    <script>

        var tu=document.getElementById("tu");

        document.onmousemove=function test(e){

            var ev=e || window.event;

            tu.style.top=ev.clientY;

            tu.style.left=ev.clientX;

        }

    </script>

</html>

图跟随鼠标移动

<html>

    <!--

        拖拽游戏

    可以给one里面生成一个x，点击x删除div，我就不做了 -->

    <head>

        <style type"text/css">

            .one{

                position:absolute;

                width:200px;

                height:40px;

                background-color:red;

            }

        </style>

    </head>

    <body>

        <input type="button" onclick="cre()"/>

        <!--<div id="one" style=""></div>-->

    </body>

    <script>

        var one=null;

        var dx=0;//点的位置

        var dy=0;

        var sx=0;//div的位置

        var sy=0;

        //鼠标按下可以拖动，鼠标松开不能拖动，操作针对的是DIV内容。

        var tuodong=false;

        function cre(){//我控制它只能产生一个DIV

            if(one!=null){

                return;

            }

                one=document.createElement("div");

                one.className="one";

                one.style.top="100px";

                one.style.left="200px";//刚才在下面移动的方法中报参数无效，就是指的是获取的top和left的值无效，在这里给one的style的top等属性赋值保险一点

                document.body.appendChild(one);

            //因为只有创建了才有one对象赋值，所以，前面这里会报错，要放在cre里面

            one.onmousedown=function(e){

                var ev=e || window.event;

                dx=ev.clientX;

                dy=ev.clientY;

                sx=parseInt(one.style.left);

                sy=parseInt(one.style.top);

                if(!tuodong){

                    tuodong=true;

                }

            }

            document.onmousemove=function(e){

        //刚刚的效果不完善，因为鼠标按下移动后，div的top和left会变成鼠标的位置，我们希望的效果是鼠标放在div的某一个位置而不受影响

                var ev=e || window.event;

                if(tuodong){

                    //alert(one.style.top);//获取的是空，需要使用这个alert(one.offsetTop);

                    one.style.top=ev.clientY-(dy-sy);

                    one.style.left=ev.clientX-(dx-sx);

                }

            }

        }

        //var tu=document.getElementById("one");

        document.onmouseup=function(e){

            if(tuodong){

                tuodong=false;

            }

        }

    </script>

</html>

拖拽游戏

<html>

    <head>

    </head>

    <!--<body oncontextmenu="return show()" onbeforeunload="window.event.returnValue='你小心点'">-->

    <body onclick="one()">

        <img src="data:images/srf.jpg" onclick="two()">

        <script>

            <!-- 去掉文本菜单方法-->

            /*1、function show(){

                alert("000000");

                return false;

            }*/

            function show(){

                alert("oooooo");

                window.event.returnValue=false;

            }

            function one(){

                alert("######");

            }

            function two(){

            //我们发现点击图片的话，先执行方法two再执行方法one，只是因为图片也处于body体内，为了避免重复触发事件，可以使用cancelBubble

                alert("@@@@@@");

                var ev=window.event.cancelBubble=true;

            }

        </script>

    </body>

</html>

下面两个属性

事件对象event和计时器的更多相关文章

重新审视事件对象event
前言:之前在学习事件对象event时,一是一直在chrome浏览器(作为主运行环境)下运行调试自个儿程序,二是可能当时对事件对象理解不透彻才导致现在对事件对象的用法陷入了一个大坑,遂以此篇博客记之. ...
谈谈事件对象-event
JavaScript 中的事件对象(event) 当我们每次触发一种事件(如点击事件),我们会在回调函数中传入事件对象event.今天就来来谈谈. 1.当我们想判断当前事件是我们想要的事件类型时,可以 ...
JavaScript：事件对象Event和冒泡
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 绑定事件的两种方式我们在上一篇文章中已经讲过事件的概念.这里讲一下注册 ...
jacascript 事件对象event
前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 在触发DOM上的某个事件时,会产生一个事件对象 event,这个对象中包含着所有与事件有关的信息.所有浏览 ...
javaScript中的事件对象event
事件对象event,每当一个事件被触发的时候,就会随之产恒一个事件对象event,该对象中主要包括了关于该事件的基本属性,事件类型type(click.dbclick等值).目标元素target(我的 ...
Javascript和jquery事件--事件对象event
1. 事件对象event 对于event,js的解释是Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态.而jq的解释是事件处理(事件对象.目标元素 ...
js进阶课程 12-9 jquery的事件对象event的方法有哪些？
js进阶课程 12-9 jquery的事件对象event的方法有哪些? 一.总结一句话总结:三组六个,阻止默认事件一组,阻止冒泡一组,阻止冒泡和剩余事件一组. 1.事件的默认动作指什么? 比如点a标 ...
JS-特效～ 03. 楼层跳跃、事件对象event的获取与使用、event的主要内容、screenX、pageX、clientX的区别、放大镜、模拟滚动条
楼层跳跃 100%子盒子会继承父盒子的宽高.父盒子继承body宽高.Body继承html的宽高. 盒子属性:auto:适应盒子自身的宽度或者高度.(对自己负责) 盒子属性:100%:适应盒子父盒子的宽 ...
js 事件对象event
在触发DOM上的某个事件时,会产生一个事件对象event.这个对象中包含着所有与事件有关的信息.包括导致事件的元素,事件的类型以及其他与特定事件相关的信息. <body> <a hr ...

随机推荐

用wget实现cookie欺骗
用wget实现cookie欺骗 . 分析登录界面的html代码页面在 http://bbs.linuxeden.com/ <form. id="loginform" met ...
ASP.NET母版页与内容页相对路径的问题
1. 图片问题图片显示问题:<img runat="server" src="~/images/ad468x60.gif" alt="&quo ...
acdream1116 Gao the string!(扩展KMP)
今天是字符串填坑的一天,首先填的第一个坑是扩展KMP.总结一下KMP和扩展KMP的区别. 在这里s是主串,t是模式串. KMP可以求出的是以s[i]为结尾的串和 t前缀匹配的最长的长度.假如这个长度是 ...
Android屏幕适应详解（二）
android应用自适应多分辨率的解决方法 1. 首先是建立多个layout文件夹(drawable也一样). 在res目录下建立多个layout文件夹,文件夹名称为layout-800x480等. ...
test1
test1test1test1test1test1test1test1test1test1test1test1test1test1test1test1test1test1test1test1test1 ...
安装mysql之后，存入中文出现乱码
如图显示:安装mysql之后,存入中文出现乱码解决方案: 找到如图的文件位置打开进行如图的修改: 结果:
数据库操作（ADO）
QTP工具本身自带有数据查询和验证功能,但是使用的人会感觉这个功能使用起来比较麻烦,灵活性和复用性较低,于是我们选择了用脚本调用ADO组件实现数据库的操作,现总结下工作中用到的数据库操作,代码如下: ...
lintcode:快乐数
快乐数写一个算法来判断一个数是不是"快乐数". 一个数是不是快乐是这么定义的:对于一个正整数,每一次将该数替换为他每个位置上的数字的平方和,然后重复这个过程直到这个数变为1,或是 ...
java jms
这篇博文我们主要介绍J2EE中的一个重要规范JMS,因为这个规范在企业中的应用十分的广泛,也比较重要,我们主要介绍JMS的基本概念和它的模式,消息的消费以及JMS编程步骤. 基本概念 JMS是java ...
VS2013编译OpenSSL
简述 OpenSSL是一个开源的第三方库,它实现了SSL(Secure SocketLayer)和TLS(Transport Layer Security)协议,被广泛企业应用所采用.对于一般的开发人 ...

事件对象event和计时器

事件对象event和计时器的更多相关文章

随机推荐

热门专题