zoukankan      html  css  js  c++  java
  • 事件对象

    这次来讲讲HTML 的event对象,事件对象,首先实现的是实现功能:当鼠标在areadiv中移动时,在messdiv中来显示鼠标的坐标。

    首先先弄两个div,代码如下:

    <body>

     <div id="areadiv"></div>
      <div id="messdiv"></div>
    </body>
    #areadiv{
         500px;
        height: 200px;
        border: 1px gray solid;
        margin-bottom: 10px;
                    
      }
    #messdiv{
       300px;
      height: 100px;
     border: 1px gray solid;
                    
     }   

    //首先获取两个div
    var aeradiv = document.getElementById("areadiv");
    var messdiv = document.getElementById("messdiv");

    然后给div事件,所以以下是js代码

    aeradiv.onmousemove = function(event){
    //查看文档可知,onmousemove--该事件将会在鼠标在元素中移动时被触发
    /*事件对象 --当事件的响应函数被触发时,浏览器每次都会1将一个事件对象作为实参传递进去给响应函数
    在事件对象中封装了当前事件相关的一切信息,比如:鼠标的坐标,键盘哪个按键被按下,鼠标滚轮滚动放下等,具体请看文档
    *
    * */

    /*
    在IE8以下呢,响应函数被触发时,浏览器不会传递事件对象,
    在IE8及以下的浏览器,是将事件对象作为window对象的属性保存的。
    于是可以使用window.event实现
    *
    * */

    //但是这样子的话,火狐不兼容,火狐的对象没有保存在window的,所以做到兼容的话,必须做个判断
    if(!event){
    event = window.event
    }
    var x = event.clientX;
    var y = event.clientY;
    messdiv.innerHTML = "x = "+x+", y = "+y
    // confirm("x = "+x+", y = "+y)
    //clientX 可以获取鼠标指针的水平坐标, clientY 可以获取鼠标指针的垂直坐标

    //在messdiv显示鼠标坐标
    }

    </script>
















  • 相关阅读:
    message sent to deallocated instance
    将本地项目提交github
    WKWebView 初窥-JS交互探究
    抓包工具Charles的使用
    iOS hook delegate (一)
    Return
    控制方法只有相应权限才可执行
    如何模拟登陆添加了CSRF保护的网站
    HTTP客户端都应该支持的五个特性
    如何利用WebClient模拟登陆CSRF控制的网站
  • 原文地址:https://www.cnblogs.com/caicaihong/p/9313301.html
Copyright © 2011-2022 走看看