10.12 笔记-JavaScript 05 事件对象

来源：互联网发布：库里体测数据编辑：程序博客网时间：2024/06/03 05:24

JavaScript05

1. 什么是事件
用鼠标或者键盘操作文本文档的时候产生一个事件，事件就是用户操作
事件驱动: 当产生事件的时候，就会调用程序去处理事件,达到效果这个过程叫做事件驱动

2. 事件组成

事件源事件事件处理



3. 事件设置

i. 标签引入
ii. 标签绑定

code:

        <body>            <button id="btn"> 点击</button>        </body>        <script>        function func(){            // code .. //1.标签引入        }        var btn = document.getElementById('btn');        btn.onclick=function(){            // code .. 2.标签绑定        }        </script>

4. 事件对象

鼠标坐标
e.clientX 鼠标坐标x轴
e.clientY 鼠标坐标y轴

code:

        <body>            <div id="box" onclick="test(event,this)"></div>        </body>        <script>            //标签引入方式绑定事件            //需要在绑定的时候传递一个实参event 函数这里用形参来接受            //标签绑定形式获取事件对象 (最常用的形式  重点内容)            var box = document.getElementById('box');            //标准浏览器会自动传递一个参数 这个参数就是事件 对象            box.onclick = function(e){                //IE中 可以直接在事件函数中使用event这个对象                var e = e || event;  //解决事件对象兼容性问题                document.title = "X:" + e.clientX +"Y:" + e.clientY;                //box.innerHTML = '元素对象赋值';                this.innerHTML = 'this代表本类对象,赋值效果一样';            }        </script>

5. 事件列表
文档事件
window 顶级对象
window.onload = function(){} 文档加载成功
window.onunload = function(){} 关闭窗口的时候触发
window.onbeforeunload = function(){} 在离开时给予提示信息

code:

        <body>            <button id="btn">测试</button>        </body>        <script>            //关闭窗口的事件 触发事件  只有IE支持            window.onunload =function(){                alert('关闭了');            }            //在离开时给予提示信息 用来确保安全            window.onbeforeunload= function(){                return '确定要离开吗？';            }        </script>        <script>            //文档加载成功的时候 会触发onload事件            window.onload = function(){            var btn =document.getElementById('btn');            alert(btn);        }        </script>

图片事件
imgObject.onload = function(){} 图片加载成功之后触发
imgObject.onerror = function(){} 图片加载失败之后触发

code:

        <body>            <img src="./2.jpg" alt="" id="img">        </body>        <script>            var img = document.getElementById('img');            //图片加载成功之后触发            img.onload = function(){                alert('图片加载成功');            }            //图片加载失败之后触发            img.onerror = function(){                alert('图片加载失败');                //我们可以进行新图片路径赋值                //注意:如果进行新图片路径也加载失败会被重复调用方法                this.src="./0.jpg";            }        </script>

鼠标事件方法
onclick 点击事件,鼠标点击一次
ondblclick 双击事件,鼠标双击
onmousedown 鼠标按下事件
onmouseup 鼠标弹起事件
onmousemove 鼠标移动事件
onmouseover 鼠标移入
onmouseout 鼠标移除
onmouseenter 鼠标移入
onmouseleave 鼠标移除
onmouseover 和 onmouseout 与 onmouseenter和onmouseleave
前者对于包含关系的元素会出现一入一出的效果(也就是说子元素和父元素之间滑过会被响应)
后者对于包含关系的元素不会出现一入一出的效果
(子元素和父元素之间滑过值只响应一次)
code:

        <body>            <button id="butt">单击</button>        </body>        <script>            var butt = document.getElementById('butt');            butt.onmousedown = function(){                console.log('按下了鼠标');            }            butt.onmouseup = function(){                console.log('鼠标弹起了');            }            butt.onclick = function(){                console.log('鼠标单击事件');            }            butt.ondblclick = function(){                console.log('鼠标双击事件')            }            document.onmousemove = function(e){                // 调整浏览器兼容性问题                var e = e || event;                // 鼠标移动位置事件                document.title = "X:"+e.clientX+" Y:"+e.clientY;            }        </script>

6. 实现拖拽div
code:

        <!DOCTYPE html>        <html>            <head>                <meta charset='utf-8'>                <title>document</title>                <style>                    #box{width:100px;height:100px;background:orange;position:absolute;}                </style>            </head>            <body>                <div id="box" style="top:0px;left:0px"></div>            </body>            <script>                var box = document.getElementById('box');                box.onmousedown = function(e){                    // 解决兼容性                    var e = e || event;                    // 计算偏移位置                    var y = e.clientY - parseInt(box.style.top);                    var x = e.clientX - parseInt(box.style.left);                    document.onmousemove = function(e){                        var e = e || event;                        document.title = "x:"+ e.clientX + " Y:"+ e.clientY;                    //将鼠标的坐标作为box的left和top                    //对相对应的位置进行相应处理                    box.style.top = e.clientY - y +'px';                    box.style.left = e.clientX - x + 'px';                    }                }                // 鼠标抬起时将移动事件清空                box.onmouseup = function(){                    document.onmousemove = null;                }            </script>        </html>

7. 鼠标移入移除响应导航菜单
code:

        <!DOCTYPE html>        <html>            <head>                <meta charset="utf-8">                <title>document</title>                <style>                    #box{                        width:100px;height:100px;background:orange;                    }                    #big{                        width:200px;height:200px;background:blue;                        display:none;margin-top:10px;                    }                </style>            </head>            <body>                <div id="box"></div>                <div id="big"></div>            </body>            <script>                var box = document.getElementById('box');                var big = document.getElementById('big');                var timer;                //当鼠标移入到boxdiv的时候让bigdiv显示 style.display="block"                box.onmouseover = big.onmouseover = function(){                    //console.log('鼠标移入'+timer);                    //延迟触发的事件我们在这里将其取消掉                    clearTimeout(timer);                    big.style.display='block';                }                box.onmouseout = big.onmouseout = function(){                    //console.log('鼠标移出');                    // 使用定时器特性让其延迟触发消失内容                    timer = setTimeout(function(){                        big.style.display='none';                    },300);                }            </script>        </html>

8. 图片放大镜,类似于淘宝图片预览放大
offsetLeft 和 offsetTop 获取当前元素距离父元素的left和top值
scrollTop 和 scrollLeft 滚动条所在位置可读可写的属性

code:

        <!DOCTYPE html>        <html lang="en">        <head>            <meta charset="UTF-8">            <title>Document</title>            <style>                #big{width:200px;height:200px;overflow:hidden;                position:absolute;top:10px;left:430px;display:none;}            </style>        </head>        <body>            <img id="small" src="./1.jpg" alt="" width="400px">            <div id="big">                <img src="./1.jpg" alt="">            </div>        </body>        <script>            var small = document.getElementById('small');            var big = document.getElementById('big');            small.onmousemove = function(e){                var e = e || event;                //获取鼠标在图片上的相对坐标                var x = e.clientX - small.offsetLeft;                var y = e.clientY - small.offsetTop;                document.title="X:" + x + "Y:" + y;                //大图与小图的比例 -70 适当调整让图片居中                big.scrollTop = y * 4 - 70;                big.scrollLeft = x * 4 - 70;                //显示我们的大图                big.style.display = "block";            }            small.onmouseout = function(){                big.style.display = "none";            }        </script>        </html>

9. 图片轮播加左右按钮数字按钮

document.getElementsByName() 通过name属性找到对象返回数组

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>   *{margin:0px; padding:0px;}   #left{position:fixed;left:60px;top:120px;width:30px;height:30px;}   #right{position:fixed;left:370px;top:120px;width:30px;height:30px;}</style></head><body><div id="left" onclick="func('-')"><img src="./images/left.png" alt="" width="100%"></div><img src="./images/11.jpg" name="list1" style="display:block" alt=""><img src="./images/22.jpg" name="list1" style="display:none" alt=""><img src="./images/33.jpg" name="list1" style="display:none"alt=""><img src="./images/44.jpg" name="list1" style="display:none" alt=""><img src="./images/55.jpg" name="list1" style="display:none"alt=""><div id="right" onclick="func('+')"><img src="./images/right.png" alt="" width="100%"></div></body><script>m=0;//获取img元素对象集合list = document.getElementsByName('list1');//图片轮播左右按钮function func(b){//把定时器清除clearInterval(mytime);//alert(m);switch(b){case '-':m =m-2;if(m<-1){m=3;}break;case "+"://alert(m);break;}running();//调用定时器mytime = setInterval(running,1000);}//让图片显示function show(m){//遍历for(var i=0;i<list.length;i++){if(i==m){list[i].style.display="block";}else{list[i].style.display="none";}}}//让图片滚动function running(){m++if(m==5){m=0;}show(m);}//定时器mytime = setInterval(running,1000);</script></html>

阅读全文

0 0