zoukankan      html  css  js  c++  java
  • javascript——event事件

    event : 事件对象 , 当一个事件发生的时候,和当前这个对象发生的这个事件有关的一些详细的信息都会被临时保存到一个指定地方-event对象,供我们在需要的调用。飞机-黑匣子

    事件对象必须在一个事件调用的函数里面使用才有内容
    事件函数:事件调用的函数,一个函数是不是事件函数,不在定义的决定,而是取决于这个调用的时候

    兼容
    ie/chrome : event是一个内置全局对象
    标准下 : 事件对象是通过事件函数的第一个参数传入

    如果一个函数是被事件调用的那么,这个函数定义的第一个参数就是事件对象

    clientX[Y] : 当一个事件发生的时候,鼠标到页面可视区的距离

    <script>
        // alert(event);    //undefined
    
        /*document.onclick = function(){
            alert(event);    //object MouseEvent 鼠标事件
        };*/
    
        function fn1(ev){
            // alert(event);
            // alert(ev);
            var ev = ev || event;
            // alert(ev);
            alert('鼠标到可视区左边(X轴)距离:' + ev.clientX + ',鼠标到可视区上边(Y轴)距离:' + ev.clientY);
        }
        // fn1();            //不是事件调用函数
        document.onclick = fn1;        //是事件调用的函数,所以event有内容
    </script>

    onmousemove : 当鼠标在一个元素上面移动的触发
    触发频率不是像素,而是间隔时间,在一个指定时间内(很短),如果鼠标的位置和上一次的位置发生了变化,那么就会触发一次

    div跟随鼠标移动demo:

    window.onload = function(){
            var i = 0;
            var oDiv = document.getElementById('div1');
    
            document.onmousemove = function(){
                
                document.title = i++;
                var ev = ev || event;
                var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    
                 oDiv.style.left = ev.clientX + 'px';
                 oDiv.style.top = ev.clientY + scrollTop + 'px';
            };
        };
  • 相关阅读:
    BNUOJ 34978 汉诺塔 (概率dp)
    hdu1427 速算24点
    vim学习之以退为进——可反复移动和可反复改动的美妙结合
    C++设计模式实现--策略(Strategy)模式
    ios怎样在一个UIImageButton的里面加一些自己定义的箭头
    HTML5 Canvas 画图入门
    AT3728 Squirrel Migration
    HTTP请求的GET与POST方式的区别
    HTTP 的请求过程?
    servlet的生命周期
  • 原文地址:https://www.cnblogs.com/bokebi520/p/4343978.html
Copyright © 2011-2022 走看看