event事件(浏览器)

最新推荐文章于 2022-07-17 16:30:18 发布
最新推荐文章于 2022-07-17 16:30:18 发布
阅读量2.9k 收藏 5
点赞数 1
分类专栏： 知识点

event 事件对象

        event 事件对象 存储事件中的信息
        chrome ----- undefined
        IE     ----- null
        firefox ----- not defined

        event在属性事件中 --- 参数
        兼容ie写法 event || window.event;

鼠标位置(一般会拿鼠标到顶部的绝对距离)

        只会拿第一屏幕的距离 不会拿到滚动条的高度
        clientX
        clientY
        IE678无效 拿到滚动条的高度+第一屏幕的距离
        pageX
        pageY

        滚动高度
        谷歌:         document.body.scrollTop
        其他浏览器:   document.documentElement.scrollTop

监听鼠标位置例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Author" content=" ">
    <title>Document</title>
    <style type="text/css">
        *{margin: 0;padding: 0;}
        a{text-decoration: none;}
        ul,li{list-style: none;}
        body{font-size: 14px;font-family: "微软雅黑"; height: 1000px;}
        #x{width: 100%;border-top:5px dashed green;position: absolute;left: 0;top: 0}
        #y{height: 1000px;border-right: 5px dashed green;position: absolute;left: 0;top: 0}
        #txt{height: 25px;padding: 5px;display:inline-block;line-height: 25px;text-align: center;background: #ccc;color: red;position: absolute;left: 0;top: 0}
    </style>
</head>
<body>
    <div id="x"></div>
    <div id="y"></div>
    <div id="txt"></div>
    <script type="text/javascript">
        /*
            鼠标位置

            只会拿第一屏幕的距离 不会拿到滚动条的高度
            clientX
            clientY

            IE678无效 拿到滚动条的高度+第一屏幕的距离
            pageX
            pageY

            滚动高度
            谷歌:         document.body.scrollTop
            其他浏览器:   document.documentElement.scrollTop
         */
        var x = document.getElementById("x");
        var y = document.getElementById("y");
        var txt = document.getElementById("txt");
        document.onmousemove = function(ev){
            var ev = ev || window.event;
            var pos = getXY(ev);
            var Cx = ev.clientX;
            var Cy = ev.clientY;
            var maxH = getMax("height");
            var maxW = getMax("width");
            var num = 5;
            var num2 = 5;
            x.style.left = pos.x + "px";
            x.style.top = pos.y + "px";
            x.style.marginLeft = -pos.x + "px";

            y.style.left = pos.x + "px";
            y.style.top = pos.y + "px";
            y.style.marginTop = -pos.y + "px";
            // 失去焦点的修改
            if(pos.y>(maxH-40)){
                num = -35;
            };
            if(pos.x>(maxW-313)){
                num2 = -313;
            }
            txt.style.left = (pos.x+num2) + "px";
            txt.style.top = (pos.y+num) + "px";
            txt.innerHTML = "pageX:"+pos.x + "pageY:"+pos.y +",clientX:"+Cx+"clientY:"+Cy;
        }


         //做一个兼容 用clientX,clientY 实现pageX,pageY功能
         //拿到的是到顶部的绝对距离 鼠标位置
         function getXY(ev){
            var ev = ev || window.event;
            var xx=0,yy=0;
            //ie9+
            if(ev.pageX){
                xx = ev.pageX;
                yy = ev.pageY;
            }else{
                var ctop=0,cleft=0;
                //IE678 clientX,clientY + scroll
                if(document.documentElement){
                    //滚动高度
                    ctop = document.documentElement.scrollTop;
                    cleft = document.documentElement.scrollLeft;
                }else{
                    //IE9+
                    ctop = document.body.scrollTop;
                    cleft = document.body.scrollLeft;
                };
                //拿到的只是数字
                xx = ev.clientX + cleft;
                yy = ev.clientY + ctop;
            };
            // var arr = [xx,yy];
            // var json = {
            //     x:xx,
            //     y:yy
            // };
            return {
                x:xx,
                y:yy
            };
         };
         function getMax(param){
            if(param == "height"){
                return window.innerHeight?window.innerHeight:document.documentElement.clientHeight;
            }else{
                return window.innerWidth?window.innerWidth:document.documentElement.clientWidth;
            }
         }
    </script>
</body>
</html>

鼠标拖拽

            拖拽
            三个步骤
                鼠标按下
                    //写在鼠标按下事件内
                    鼠标移动
                    鼠标抬起
                        释放添加的事件

            如果分开写 你移动快 盒子掉落

这里写图片描述

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="Author" content="">
        <meta name="Keywords" content="">
        <meta name="Description" content="">
        <title>Document</title>
        <style type="text/css">
            * {margin: 0; padding: 0;}
            a {text-decoration: none;}
            ul,li {list-style: none;}
            body {font-family: "Microsoft yahei";}
            #box {width: 100px; height: 100px; border-radius: 50%; background: lightgreen; position: absolute; top: 0; left: 0s;}
        </style>
    </head>
<body>
<div id="box"></div>
<script type="text/javascript">
    /*
        拖拽
        三个步骤
            鼠标按下
                //写在鼠标按下事件内
                鼠标移动
                鼠标抬起
                    释放添加的事件

        如果分开写 你移动快 盒子掉落
     */
    var boxDom = document.getElementById("box");
    boxDom.onmousedown = function(e){
        var ev = e || window.event;
        // 拖拽的坐标  鼠标移动的距离(第二次位置-第一次位置) + 之前自身所在的位置.
        // 第一次
        var x1 = getXY(ev).x;
        var y1 = getXY(ev).y;
        // 自身的位置
        var ctop = this.offsetTop;
        var cleft = this.offsetLeft;
        var maxW = getMax("width")-this.offsetWidth;
        var maxH = getMax("height")-this.offsetHeight;
        //你要给doucment添加onmousemove
        document.onmousemove = function(e){
            var e = e || window.event;
            // 第二次
            var x2 = getXY(e).x;
            var y2 = getXY(e).y;
            var x = x2-x1+cleft;
            var y = y2-y1+ctop;

            //边界
            if(x>maxW)x=maxW;
            if(x<0)x=0;
            if(y>maxH)y=maxH;
            if(y<0)y=0;
            boxDom.style.left = x + "px";
            boxDom.style.top = y + "px";
        };
        document.onmouseup = function(e){
            // 清除onmousemove 和 自己
            document.onmousemove = null;
            document.onmouseup= null;
        }
    };

    function getXY(ev){
       var ev = ev || window.event;
       var xx=0,yy=0;
       //ie9+
       if(ev.pageX){
           xx = ev.pageX;
           yy = ev.pageY;
       }else{
           var ctop=0,cleft=0;
           //IE678 clientX,clientY + scroll
           if(document.documentElement){
               //滚动高度
               ctop = document.documentElement.scrollTop;
               cleft = document.documentElement.scrollLeft;
           }else{
               //IE9+
               ctop = document.body.scrollTop;
               cleft = document.body.scrollLeft;
           };
           //拿到的只是数字
           xx = ev.clientX + cleft;
           yy = ev.clientY + ctop;
       };
       // var arr = [xx,yy];
       // var json = {
       //     x:xx,
       //     y:yy
       // };
       return {
           x:xx,
           y:yy
       };
    };
    // 页面高度
    function getMax(param){
       if(param == "height"){
           return window.innerHeight?window.innerHeight:document.documentElement.clientHeight;
       }else{
           return window.innerWidth?window.innerWidth:document.documentElement.clientWidth;
       }
    }
</script>
</body>
</html>

添加事件
—-属性事件的添加

IE———attachEvent(eventName, function(){});
解绑====>detachEvent(eventName,fn)
非IE ——–addEventListener(eventName,function(){},false);
解绑====>removeEventListener(eventName,fn,false)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Author" content=" ">
    <title>Document</title>
    <style type="text/css">
        *{margin: 0;padding: 0;}
        a{text-decoration: none;}
        ul,li{list-style: none;}
        body{font-size: 14px;font-family: "微软雅黑";}
        #box{}
    </style>
</head>
<body>
    <a href="javascript:void(0)" id="aa">点我</a>
    <script type="text/javascript">
        /*
            添加事件
            属性事件的添加

            IE      attachEvent('onclick',function(){});
            非IE    addEventListener('click',function(){},false);

         */

        var aDom = document.getElementById("aa");
        // aDom.onclick = function(){
        //     alert(1);
        // }

        //ie
        // aDom.attachEvent('onclick',function(){
        //     alert(1);
        // });

        //非ie
        // aDom.addEventListener("click",function(){
        //     alert(1);
        // },false);


        bind(aDom,'click',function(){
            alert(1);
        });
        /*
            兼容写法
         */

        function bind(obj,eventName,Fn){
            if(obj.attachEvent){
                obj.attachEvent("on"+eventName,function(){
                    //改变this的指向
                    Fn.call(obj);
                });
            }else{
                obj.addEventListener(eventName,Fn,false);
            };
        };


        var json = {
            a:1,
            clickMe : function(){
                var This = this;
                aDom.onclick = function(){
                    alert(This.a);
                };
            }
        }

    </script>
</body>
</html>

attachEvent执行顺序

        IE9+
            先绑定的先执行
        IE8-
            先绑定的后执行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Author" content=" ">
    <title>Document</title>
    <style type="text/css">
        *{margin: 0;padding: 0;}
        a{text-decoration: none;}
        ul,li{list-style: none;}
        body{font-size: 14px;font-family: "微软雅黑";}
        #box{width: 100px;height: 100px;background: red}
    </style>
</head>
<body>
    <div id="box">点我</div>
    <script type="text/javascript">
        /*
            IE9+
                先绑定的先执行
            IE8-
                先绑定的后执行

            实际意义不大
         */

        var boxDom = document.getElementById("box");
        boxDom.attachEvent("onclick",fn1);
        boxDom.attachEvent("onclick",fn2);
        boxDom.attachEvent("onclick",fn3);
        function fn1(){alert(1)};
        function fn2(){alert(2)};
        function fn3(){alert(3)};
    </script>
</body>
</html>

addEventListener执行顺序

        事件捕获
            捕获      父-到-子
            不捕获    子-到-父
        到事件源时
            看捕获和不捕获的位置 前后顺序 谁先定义了先执行谁

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Author" content=" ">
    <title>Document</title>
    <style type="text/css">
        *{margin: 0;padding: 0;}
        a{text-decoration: none;}
        ul,li{list-style: none;}
        body{font-size: 14px;font-family: "微软雅黑";}
        #box1{width: 400px;padding: 50px;background: red}
        #box2{width: 300px;padding: 50px;background: yellow}
        #box3{width: 200px;padding: 50px;background: black}
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2">
            <div id="box3"></div>
        </div>
    </div>
    <script type="text/javascript">
        /*
            事件捕获
                捕获      父---子
                不捕获    子---父
                事件源
                    看捕获和不捕获的位置 前后顺序 谁先定义了先执行谁
         */

        var box1 = document.getElementById("box1");
        var box2 = document.getElementById("box2");
        var box3 = document.getElementById("box3");
        box1.addEventListener('click',f4,false);
        box2.addEventListener('click',f5,false);
        box3.addEventListener('click',f6,false);

        box1.addEventListener('click',f1,true);
        box2.addEventListener('click',f2,true);
        box3.addEventListener('click',f3,true);

        function f1(){console.log(1)};
        function f2(){console.log(2)};
        function f3(){console.log(3)};

        function f4(){console.log(4)};
        function f5(){console.log(5)};
        function f6(){console.log(6)};
    </script>
</body>
</html>

滚轮事件

            wheelDelta  谷歌 IE up --- 120  down --- -120
            detail      火狐    up --- -3   down --- 3
            //屏蔽浏览器默认行为(滚动条)    preventDefault()
    ev.preventDefault();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Author" content=" ">
    <title>Document</title>
    <style type="text/css">
        *{margin: 0;padding: 0;}
        a{text-decoration: none;}
        ul,li{list-style: none;}
        body{font-size: 14px;font-family: "微软雅黑";}
    </style>
</head>
<body>
    <p id="pp">请滚动滚轮</p>
    <input type="text" id="txt" />
    <script type="text/javascript">
        /*
            滚轮事件
                wheelDelta  谷歌 IE up --- 120  down --- -120
                detail      火狐    up --- -3   down --- 3
         */
        var pp = document.querySelector("#pp");
        var text = document.querySelector("#txt");
        function scrollFn(e){
            var ev = e || window.event;

            var d = ev.wheelDelta;//谷歌IE
            // var d = -ev.detail;//火狐
            if(d>0){
                pp.innerHTML = "向上滚动";
                text.value = d;
            }else{
                pp.innerHTML = "向下滚动";
                text.value = d;
            }
        }

        //谷歌
        document.onmousewheel = scrollFn;
        // Firefox
        document.addEventListener("DOMMouseScroll",scrollFn);
    </script>
</body>
</html>

图片缩放

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="Author" content="">
        <meta name="Keywords" content="">
        <meta name="Description" content="">
        <title>Document</title>
        <style type="text/css">
            * {margin: 0; padding: 0;}
            a {text-decoration: none;}
            ul,li {list-style: none;}
            body {font-family: "Microsoft yahei";}
        </style>
    </head>
<body>
<img src="https://img-blog.youkuaiyun.com/20160213232257842" width="400" id="img">
<script type="text/javascript">
    var imgDom = document.querySelector("#img");
    // console.log(imgDom);
    function scaleFn(e){
        var ev = e || window.event;
        var d = ev.wheelDelta || -ev.detail;
        var maxW = getMax("width");
        if( d>0 ){
            imgDom.width +=10;
        }else{
            imgDom.width -=10;
        };
        if(img.width > maxW){
            img.width = maxW;
        };
        if(img.width < 100){
            img.width = 100;
        }
        //屏蔽浏览器默认行为(滚动条)    preventDefault()
        ev.preventDefault();
    };


    // 兼容
    // 谷歌 IE ---null   Firefox---undefined;
    // alert(document.onmousewheel);
    // alert(undefined==null);//ture
    // 要用绝对等于===
    if(document.onmousewheel === null){
        document.onmousewheel = scaleFn;
    }else{
        document.addEventListener("DOMMouseScroll",scaleFn);
    };

    function getMax(param){
        if(param == "width"){
            return window.innerWidth?window.innerWidth:document.documentElement.clientWidth;
        }else{
            return window.innerHeight?window.innerHeight:document.documentElement.clientHeight;

        }
    }
</script>
</body>
</html>

鼠标按键

    鼠标按键
        左键 --- 0
        滚轮 --- 1
        右键 --- 2
        event.button  

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="Author" content="">
        <meta name="Keywords" content="">
        <meta name="Description" content="">
        <title>Document</title>
        <style type="text/css">
            * {margin: 0; padding: 0;}
            a {text-decoration: none;}
            ul,li {list-style: none;}
            body {font-family: "Microsoft yahei"; -webkit-user-select: none;}
        </style>
    </head>
<body>
<p>123123131</p>
<script type="text/javascript">
    /*
            鼠标按键
            左键 --- 0
            滚轮 --- 1
            右键 --- 2
            event.button
     */
    document.onmousedown = function(e){
        var ev = e || window.event;
        ev.preventDefault();
        var num = ev.button;
        // alert(num);
        if(num == 0){
            // alert("左键");
        }else if(num == 1){
            alert("滚轮按键");
        }else{
            alert("右键");
        }
    }
    // 屏蔽 浏览器默认的右键菜单 oncontextmenu
    document.oncontextmenu = function(){
        // return false;
    };
    // ev.preventDefault();

    // 不被选择  3种方法
    // 1
    // 3 css -webkit-user-select: none; 要写兼容.
    document.onselectstart = function(){   //2  直接写在html上
        // return false;
    };
</script>
</body>
</html>

键盘事件

    onkeydown
        按下
    onkeypress
        一直按
    同时存在的时候down 优先于press


    onkeyup
        字符搜索
        键盘抬起


    keyCode
        键值
        按键 unicode/键值
        a -- 97 / 65
        b -- 98 / 66
    code 显示字母

    w 87
    a 65
    s 83
    d 68

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="Author" content="">
        <meta name="Keywords" content="">
        <meta name="Description" content="">
        <title>Document</title>
        <style type="text/css">
            * {margin: 0; padding: 0;}
            a {text-decoration: none;}
            ul,li {list-style: none;}
            body {font-family: "Microsoft yahei";}
        </style>
    </head>
<body>

<script type="text/javascript">

    document.onkeydown = function(e){  //一直按它也不停的重复执行
        var e = e || window.event;
        var code = e.code;
        var key = e.keyCode;
        console.log(key);
    }
    document.onkeypress = function(e){
        // if(timer)clearInterval(timer);
        var e = e || window.event;
        console.log("press");
    }
    document.onkeyup = function(){
        var e = e || window.event;
        console.log("up");
    }
</script>
</body>
</html>

表单操作

        获得焦点事件
        onfocus()
        失去焦点事件
        onblur()

        focus()获取焦点
        blur()失去焦点


        onchange
            text     当内容改变的时候失去焦点触发
            radio    选中变成非选中触发
            checkbox 选中变成非选中触发
            select   选中内容改变的时候

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Author" content=" ">
    <title>Document</title>
    <style type="text/css">
        *{margin: 0;padding: 0;}
        a{text-decoration: none;}
        ul,li{list-style: none;}
        body{font-size: 14px;font-family: "微软雅黑";}
    </style>
</head>
<body>
    <input type="text" id="txt">
    <select id="sel">
        <option value="123">111</option>
        <option value="22">222</option>
        <option value="33">333</option>
        <option value="44">444</option>
    </select>
    <script type="text/javascript">

        var txt = document.getElementById("txt");
        var sel = document.getElementById("sel");
        txt.focus();
        // txt.onfocus = function(){
        //     console.log('获取焦点');
        // }
        // txt.onblur = function(){
        //     console.log('失去焦点');
        // }
        txt.onchange = function(){
            alert(1);
        };

        sel.onchange = function(){
            // 拿到 option它的值  value 有写的话
            alert(this.value);
            // // selectedIndex  options索引值
            // var value = sel.options[this.selectedIndex].text;
            // alert(value);
        };
    </script>
</body>
</html>
GBase 8s EVENT事件之创建事件
sinat_33233315的博客
05-27 373
GBase 8s EVENT事件之创建事件
javascript 事件对象（event 对象）
weixin_33913332的博客
10-13 120
原文： http://www.cnblogs.com/songyaqi/p/5204143.html &lt;html&gt; &lt;head&gt; &lt;title&gt; Track Mouse &lt;/title&gt; &lt;script type="text/javascript" src="util.js"&gt;&lt;/script&gt; &a
treeview节点被选中的事件_JavaScript从零开始——DOM事件编程（2）
weixin_39773239的博客
12-10 1025
DOM事件发生后，会提供一个事件对象给监听函数，方便进行下一步的处理，这就是Event对象。1 概念浏览器原生提供一个Event对象，所有的事件都是这个对象的实例，或者说继承了Event.prototype对象。Event对象本身就是一个构造函数，可以用来生成新的实例：let event = new Event(type, options); Event构造函数接受两个参数。第一个参数type是字...
浏览器的事件循环（Event Loop）
weixin_45987920的博客
07-17 819
JavaScript的主要用途是与用户互动，以及操作DOM。如果它是多线程的会有很多复杂的问题要处理，比如有两个线程同时操作DOM，一个线程删除了当前的DOM节点，另一个线程是要操作当前的DOM阶段，最后以哪个线程的操作为准？为了避免这种，所以JS是单线程的。...
浏览器下的event对象
lionzl的专栏
07-28 533
浏览器下的event对象2010-02-22 11:46      在javascript中，我们要常常用到event对象来处理一些事件，但是IE和Firefox下event对象的属性是不同的。1.keyCode||which||charCode      IE下支持keyCod
Event事件
Schrodinge的博客
03-07 507
​ 事件是可以被JavaScript侦测到的行为。网页中的每个元素都可以产生某些可以触发JavaScript函数的事件. ​ 事件是一瞬间触发。 事件绑定方式 ​ DOM节点绑定（格式）：节点.on+事件名 = 事件处理函数; //（1）DOM节点绑定 // *同名事件会被覆盖 // *事件处理函数只能冒泡阶段执行 div.onclick = function(){} //（2）作为html属性...
事件委托
weixin_33841722的博客
07-08 102
由于事件的冒泡，我们点击子元素的时候，会把事件一层层的传递给父级元素。相反的，我们操作元素的时候，直接把事件绑定在父级元素上，而不是分别给子元素绑定事件。通过判断子元素，从而达到同样的效果，这就是所谓的“事件委托”。 利用冒泡的原理，把事件加到父级上，触发执行效果。 转载于:https://www.cnblogs.com/taochengyong/p/9281456.html...
event事件
choupixiaolin的博客
03-09 396
event对象 任何事件的触发都会产生event对象event事件对象属性键盘事件 onkeydown 按下键盘触发 onkeyup 松开键盘触发 onkeypress 按下并松开 键盘上每个按键都有对应的ascii码事件冒泡 当最里面的元素触发了事件的时候，会依次向上触发所有元素的相同事件（从触发事件的元素开始一直向上触发） 阻止事件冒泡 event.stopPropagation(); 说明：stopPropagation是事件对象Event的一个方法，作用是阻止目标元素事件冒泡到父级元...
浏览器事件
qq_37464878的博客
11-03 848
1.浏览器事件循环 事件循环介绍： 事件循环的创建时间是在tab页面创建或者web worker创建时创建。 事件循环的目的是不阻塞主线程JavaScript的运行，提供异步回调机制。 事件循环的工作机制是 (持续循环) 在所有异步事件结束之前事件循环一直执行一个类似于while(true)的循环，不停止。 (宏任务和微任务队列) 事件循环会维护一个task queue(宏任务队列)和一个microtask queue(微任务队列)。宏任务队列中有多个子队列，比如定时器回调函数子队
iPanel浏览器EVENT处理详解
"iPanel浏览器EVENT处理说明文档主要介绍了如何在iPanel浏览器中处理EVENT，包括处理原则、处理机制、特定按键的处理以及接口Porting的相关内容，旨在帮助开发者更好地控制和管理用户交互事件。" iPanel浏览器EVENT...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值