鼠标事件+键盘事件+表单事件+其它事件

目录

鼠标事件

1.鼠标点击事件

2.鼠标移动

 3.鼠标经过(很重要)

4.鼠标来源

5.鼠标定位

6.鼠标按键

7.鼠标滚轮事件

键盘事件(监听键盘)一般都是在window上面操作

 4.获取当前坐标的属性

输入框自带的事件(称为表单事件) 

1.input事件   用户在输入框中输入就会触发(是监听元素的)    常用

2.change事件 

3.让输入框自动有焦点

4.焦点事件 focus

5.失去焦点  blur

其它事件 

1.onload 加载完毕时执行

2.scroll  元素的滚动条滚动


鼠标事件

鼠标事件类型
事件类型说明
click被选元素内单击鼠标左键时发生,如果右键也按下则不会发生。当用户的焦点在按钮上并按了 Enter 键时,同样会触发这个事件
dblclick被选元素内双击鼠标左键时发生,如果右键也按下则不会发生    doubleclick  双击
mousedown被选元素内单击任意一个鼠标按钮时发生       只要鼠标按钮按下(不管按哪个)都触发
mouseout鼠标指针位于某个元素上且将要移出元素的边界时发生
mouseover鼠标指针移出某个元素到另一个元素上时发生
mouseup松开任意一个鼠标按钮时发生    鼠标按钮在被选元素内松开
mousemove鼠标在某个元素上时持续发生

注意点:onclick和click的区别  ,on 就是绑定事件的意思,onclick就是绑定点击事件,click才是事件的名字 

为什么addEventListener('click',fn) 中的click不是onclick,因为addEventListener是添加,不需要绑定。

看到onclick这种加了on的 就是绑定事件 ,看到click这种不加on的就是监听事件addEventListener('click',fn)。

注意:下面的事件,如果想写在属性绑定或者行内式就加on,如果想写在addEventListener里面不加on

1.鼠标点击事件

鼠标点击事件包括 :click(单击)(左键)dblclick(双击)mousedown(按下)mouseup(松开)。其中 click 事件类型比较常用,而 mousedown 和 mouseup 事件类型多用在鼠标拖放、拉伸操作中。当这些事件处理函数的返回值为 false 时,会禁止绑定对象的默认行为。

contextmenu(右键) ,得通过event.preventDefault();阻止默认事件,通过return false;没有效果

<body>
    <div class="box">666</div>
    <script>
        let box = document.querySelector('.box');
        box.addEventListener('contextmenu',function(){
            event.preventDefault();  //这里写阻止默认事件
            console.log(6666);
            // return false;
        });
    </script>
</body>

2.鼠标移动

mousemove 事件类型是一个实时响应的事件,当鼠标指针的位置发生变化时(至少移动一个像素),就会触发 mousemove 事件。该事件响应的灵敏度主要参考鼠标指针移动速度的快慢以及浏览器跟踪更新的速度

例子:(此例子很重要)下面示例演示了如何综合应用各种鼠标事件实现页面元素拖放操作的设计过程。实现拖放操作设计需要解决以下几个问题。

  • 定义拖放元素为绝对定位以及设计事件的响应过程,这个比较容易实现。
  • 清楚几个坐标概念:按下鼠标时的指针坐标移动中当前鼠标指针坐标松开鼠标时的指针坐标拖放元素的原始坐标拖动中的元素坐标
  • 算法设计:按下鼠标时,获取被拖放元素和鼠标指针的位置,在移动中实时计算鼠标偏移的距离,并利用该偏移距离加上被拖放元素的原坐标位置,获得拖放元素的实时坐标。

 如上图所示,其中变量 ox 和 oy 分别记录按下鼠标时被拖放元素的纵横坐标值,它们可以通过事件对象的 offsetLeft 和 offsetTop 属性获取变量 mx 和 my 分别表示按下鼠标时,鼠标指针的坐标位置。而 event.mx 和 event.my 是事件对象的自定义属性,用它们来存储当鼠标移动时鼠标指针的实时位置。

当获取了上面 3 对坐标值之后,就可以动态计算拖动中元素的实时坐标位置,即 x 轴值为 ox+event.mx-mx,y 轴为 oy+event.my-my。当释放鼠标按钮时,就可以释放事件类型,并记下松开鼠标指针时拖动元素的坐标值,以及鼠标指针的位置,留待下一次拖放操作时调用

代码:这是借鉴的别人的代码,这部分知识掌握还会回来写的。

<div id="box" ></div>
    <script>
        // 初始化拖放对象
        var box = document.getElementById("box");
        // 获取页面中被拖放元素的引用指针
        box.style.position = "absolute";  // 绝对定位
        box.style.width = "200px";  // 定义宽度
        box.style.height = "200px";  // 定义高度
        box.style.backgroundColor = "red";  // 定义背景色
        // 初始化变量,标准化事件对象
        var mx, my, ox, oy;  // 定义备用变量
        function e(event){  // 定义事件对象标准化函数
            if( ! event){  // 兼容IE浏览器
                event = window.event;
                event.target = event.srcElement;
                event.layerX = event.offsetX;
                event.layerY = event.offsetY;
            }
            event.mx = event.pageX || event.clientX + document.body.scrollLeft;
            // 计算鼠标指针的x轴距离
            event.my = event.pageY || event.clientY + document.body.scrollTop;
            // 计算鼠标指针的y轴距离
            return event;  // 返回标准化的事件对象
        }
         // 定义鼠标事件处理函数
        document.onmousedown = function(event){  // 按下鼠标时,初始化处理
            event = e(event);  // 获取标准事件对象
            o = event.target;  // 获取当前拖放的元素
            ox = parseInt(o.offsetLeft);  // 拖放元素的x轴坐标
            oy = parseInt(o.offsetTop);  // 拖放元素的y轴坐标
            mx = event.mx;  // 按下鼠标指针的x轴坐标
            my = event.my;  // 按下鼠标指针的y轴坐标
            document.onmousemove = move;  // 注册鼠标移动事件处理函数
            document.onmouseup = stop;  // 注册松开鼠标事件处理函数
        }
        function move(event){  // 鼠标移动处理函数
            event = e(event);
            o.style.left = ox + event.mx - mx  + "px";  // 定义拖动元素的x轴距离
            o.style.top = oy + event.my - my + "px";  // 定义拖动元素的y轴距离
        }
        function stop(event){  // 松开鼠标处理函数
           event = e(event);
           ox = parseInt(o.offsetLeft);  // 记录拖放元素的x轴坐标
           oy = parseInt(o.offsetTop);  // 记录拖放元素的y轴坐标
           mx = event.mx ;  // 记录鼠标指针的x轴坐标
           my = event.my ;  // 记录鼠标指针的y轴坐标
           o = document.onmousemove = document.onmouseup = null;
           // 释放所有操作对象
        }
    </script>

 3.鼠标经过(很重要)

鼠标经过包括移过移出两种事件类型。

这下面4个绑定的都是父元素:

01.当移动鼠标指针到某个元素上时将触发 mouseover 事件如果从父元素中移到子元素中时,也会触发父元素的 mouseover 事件类型。从子元素移到父元素中也会触发。从子元素或者父元素中移到外面则不会触发,从外面移到子元素或者父元素会触发。(范围广点)

02.当移动鼠标指针到某个元素上时,将触发 mouseenter 事件;如果从父元素中移到子元素不会触发,从子元素中移到父元素也不会触发。从子元素或者父元素中移到外面则不会触发,从外面移到子元素或者父元素会触发。

mouseenter 事件的应用:结合伪类元素hover  下拉框,鼠标一移入父元素,就会出现一个下拉框,是父元素的子元素。从父元素中进入子元素不会触发,从子元素进入父元素也不会触发,从父元素进入外面,下拉框消失。

03.当把鼠标指针移出某个元素时,将触发 mouseout 事件。(从子元素中移出到父元素中就会触发mouseout事件,从父元素中移除到子元素也会触发,鼠标从子元素或者父元素移除到外面,就会触发该元素的mouseout事件)(范围广点)

04.当把鼠标指针移除出某个元素时,将触发 mouseleave 事件。(从父元素中移出到子元素中,不会触发,从子元素中移除到父元素中也不会触发,只有移除到父元素之外才会触发)(这里子元素也是算父元素中的一部分)

注意点:mouseenter  和 mouseleave 不支持冒泡

上面4个用下面代码验证就好:

<body>  
    <style>
        .box{
            width: 400px;
            height: 300px;
            background-color: brown;
            cursor: pointer;
        }
        .son{
            width: 200px;
            height: 400px;
            background-color: palegreen;
            cursor: pointer;
            margin: 20px;
        }
    </style>
    <div class="box">
        <div class="son"></div>
    </div>
    <script>
        //被选中是父元素
        var box = document.querySelector('.box');
        box.addEventListener('mouseleave',()=>{
            console.log('鼠标从被选元素中出去');
        })
    </script>
</body>

eg:在下面示例中,分别为 3 个嵌套的 div 元素定义了 mouseover 和 mouseout 事件处理函数,这样当从外层的父元素中移动到内部的子元素中时,将会触发父元素的 mouseover 事件类型,但是不会触发 mouseout 事件类型。

    <div>
        <div>
            <div>盒子</div>
        </div>
    </div>
    <script>
        var div = document.getElementsByTagName("div");
        // 获取3个嵌套的div元素
        for(var i=0;i<div.length;i++){    // 遍历嵌套的div元素
            div[i].onmouseover = function(e){   // 注册移过事件处理函数
                this.style.border = "solid blue";
            }
            div[i].onmouseout = function(){   // 注册移出事件处理函数
                this.style.border = "solid red";
            }
        }
    </script>

4.鼠标来源

当一个事件发生后,可以使用事件对象的 target 属性获取发生事件的节点元素。如果在 IE 事件模型中实现相同的目标,可以使用 srcElement 属性。

5.鼠标定位

当事件发生时,获取鼠标的位置是件很重要的事件。由于浏览器的不兼容性,不同浏览器分别在各自事件对象中定义了不同的属性,说明如下表所示。这些属性都是以像素值定义了鼠标指针的坐标,但是由于它们参照的坐标系不同,导致精确计算鼠标的位置比较麻烦。

属性及其兼容性
属性说明兼容性
clientX以浏览器窗口左上顶角为原点,定位 x 轴坐标 (浏览器)所有浏览器,不兼容 Safari
clientY以浏览器窗口左上顶角为原点,定位 y 轴坐标所有浏览器,不兼容 Safari
offsetX以当前事件的目标对象左上顶角为原点,定位 x 轴坐标所有浏览器,不兼容 Mozilla
offsetY以当前事件的目标对象左上顶角为原点,定位 y 轴坐标所有浏览器,不兼容 Mozilla
pageX以 document 对象(即文档窗口)左上顶角为原点,定位 x 轴坐标(页面 body)所有浏览器,不兼容 IE
pageY以 document 对象(即文档窗口)左上顶角为原点,定位 y 轴坐标所有浏览器,不兼容 IE
screenX计算机屏幕左上顶角为原点,定位 x 轴坐标  (电脑屏幕)所有浏览器
screenY计算机屏幕左上顶角为原点,定位 y 轴坐标所有浏览器
layerX最近的绝对定位的父元素(如果没有,则为 document 对象)左上顶角为元素,定位 x 轴坐标Mozilla 和 Safari
layerY最近的绝对定位的父元素(如果没有,则为 document 对象)左上顶角为元素,定位 y 轴坐标Mozilla 和 Safari

 

 

eg1:

下面介绍如何配合使用多种鼠标坐标属性,以实现兼容不同浏览器的鼠标定位设计方案。

首先,来看看 screenX 和 screenY 属性。这两个属性获得了所有浏览器的支持,应该说是最优选用属性,但是它们的坐标系时计算机屏幕,也就是说,以计算机屏幕左上角为定位原点。这对于以浏览器窗口为活动空间的网页来说没有任何价值。因为不同的屏幕分辨率,不同的浏览器窗口大小和位置,都使得在网页中定位鼠标成为一件很困难的事情。

其次,如果以 document 对象为坐标系,则可以考虑选用 pageX 和 pageY 属性实现在浏览器窗口中进行定位。这对于设计鼠标跟随来说是一个好主意,因为跟随元素一般都以绝对定位的方式在浏览器窗口中移动,在 mousemove 事件处理函数中把 pageX 和 pageY 属性值传递给跟绝对定位元素的 top 和 left样式属性即可。

IE 事件模型不支持上面的属性,为此还需寻求兼容 IE 的方法。而看 clientX 和 clientY 属性是以 window 对象为坐标系,且 IE 事件模型支持它们,可以选用它们。不过考虑 window 等对象可能出现的滚动条偏移量,所以还应加上相对于 window 对象的页面滚动的偏移量。 

var posX = 0, posY = 0;
var event = event || window.event;
if (event.pageX || event.pageY) {
    posX = event.pageX;
    posY = event.pageY;
} else if (event.clientX || event.clientY) {
    posX = event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
    posY = event.clientY + document.documentElement.scrollTop + document.body.scrollTop;
}

在上面代码中,先检测 pageX 和 pageY 属性是否存在,如果存在则获取它们的值;如果不存在,则检测并获取 clientX 和 clientY 属性值,然后加上 document.documentElement 和 document.body 对象的 scrollLeft 和 scrollTop 属性值,这样在不同浏览器中就获得了相同的坐标值。 

eg2:

封装鼠标定位代码。设计思路:能够根据传递的具体对象,以及相对鼠标指针的偏移量,命令该对象能够跟随水保移动。

先定义一个封装函数,设计函数传入参数为对象引用指针、相对鼠标指针的偏移距离,以及事件对象。然后封装函数能够根据事件对象获取鼠标的坐标值,并设置该对象为绝对定位,绝对定位的值为鼠标指针当前的坐标值。

var pos = function (o, x, y, event) {  //鼠标定位赋值函数
    var posX = 0, posY = 0;  //临时变量值
    var e = event || window.event;  //标准化事件对象
    if (e.pageX || e.pageY) {  //获取鼠标指针的当前坐标值
        posX = e.pageX;
        posY = e.pageY;
    } else if (e.clientX || e.clientY) {
        posX = event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
        posY = event.clientY + document.documentElement.scrollTop + document.body.scrollTop;
    }
    o.style.position = "absolute";  //定义当前对象为绝对定位
    o.style.top = (posY + y) + "px";  //用鼠标指针的y轴坐标和传入偏移值设置对象y轴坐标
    o.style.left = (posX + x) + "px";  //用鼠标指针的x轴坐标和传入偏移值设置对象x轴坐标
}

下面测试封装代码。为 document 对象注册鼠标移动事件处理函数,并传入鼠标定位封装函数,传入的对象为 <div> 元素,设置其位置向鼠标指针右下方偏移(10,20)的距离。考虑到 DOM 事件模型通过参数形式传递事件对象,所以不要忘记在调用函数中还要传递事件对象。 

<div id="div1">鼠标追随</div>
<script>
    var div1 = document.getElementById("div1");
    document.onmousemove = function (event) {
        pos (div1, 10, 20, event);
    }
</script>

eg3:

获取鼠标指针在元素内的坐标。使用 offsetX 和 offsetY 属性可以实现这样的目标,但是 Mozilla 浏览器不支持。可以选用 layerX 和 layerY 属性来兼容 Mozilla 浏览器。

var event = event || window.event;
if (event.offsetX || event.offsetY) {  //适用非Mozilla浏览器
    x = event.offsetX;
    y = event.offsetY;
} else if (event.layerX || event.layerY) {  //兼容Mozilla浏览器
    x = event.layerX;
    y = event.layerY;
}

但是,layerX 和 layerY 属性是以绝对定位的父元素为参照物,而不是元素自身。如果没有绝对定位的父元素,则会以 document 对象为参照物。为此,可以通过脚本动态添加或者手动添加的方式,设计在元素的外层包围一个绝对定位的父元素,这样可以解决浏览器兼容问题。考虑到元素之间的距离所造成的误差,可以适当减去 1 个或几个像素的偏移量。

完整设计代码如下:

<input type="text" id="text" />
<span style="position:absolute;">
    <div id="div1" style="width:200px;height:160px;border:solid 1px red;">鼠标跟随</div>
</span>
<script>
    var t = document.getElementById("text");
    var div1 = document.getElementById("div1");
    div1.onmousemove = function (event) {
        var event = event || window.event;  //标准化事件对象
        if (event.offsetX || event.offsetY) {
            t.value = event.offsetX + "" + event.offsetY;
        } else if (event.layerX || event.layerY) {
            t.value = (event.layerX-1) + "" + (event.layerY-1);
        }
    }
</script>

这种做法能够解决在元素内部定位鼠标指针的问题。但是,由于在元素外面包裹了一个绝对定位的元素,会破坏整个页面的结构布局。在确保这种人为方式不会导致结构布局混乱的前提下,可以考虑选用这种方法。

6.鼠标按键

通过事件对象的 button 属性可以获取当前鼠标按下的键,该属性可用于 click、mousedown、mouseup 事件类型。不过不同模型的约定不同,具体说明如下表所示。

鼠标事件对象的 button 属性
单击IE 事件模型DOM 事件模型
左键10
右键22
中键41

IE 事件模型支持位掩码技术,它能够侦测到同时按下的多个键。例如,同时按下左右键,则 button 属性值为 1+2=3;同时按下中键和右键,则 button 属性值为 2+4=6;同时按下左键和中键,则 button 属性值为 1+4=5;同时按下 3 个键,则 button 属性值为 1+2+4=7。

但是 DOM 模型不支持这种掩码技术,如果同时按下多个键,就不能够准确侦测。例如,按下右键(2)与同时按下左键和右键(0+2=2)的值是相同的。因此,对于 DOM 模型来说,这种 button 属性约定值存在很大的缺陷。不过,在实际开发中很少需要同时检测多个鼠标按钮问题,一般仅需要探测鼠标左键或右键单击行为。

eg: 下面代码能够监测右键单击操作,并阻止发生默认行为。

document.onclick = function (e) {
    var e = e || window.event;  //标准化事件对象
    if (e.button == 2) {
        e.preventDefault();
        return false;
    }
}    

当鼠标单击事件发生时,会触发很多事件:mousedown、mouseup、click、dblclick。这些事件响应的顺序如下: 

mousedown → mouseup → click → mousedown → mouseup → click → dblclick

当鼠标在对象间移动时,首先触发的事件是 mouseout,即在鼠标移出某个对象时发生。接着,在这两个对象上都会触发 mousemove 事件。最后,在鼠标进入对象上触发 mouseover 事件。

7.鼠标滚轮事件

1.onwheel()   鼠标指针在被选元素内部,鼠标滚轮滚动时才会触发

mousewheel  也是鼠标滚轮事件

被选元素的子元素也算是被选元素内部。

<body>  
    <style>
        .box{
            width: 400px;
            height: 300px;
            background-color: brown;
            cursor: pointer;
        }
        .son{
            width: 200px;
            height: 400px;
            background-color: palegreen;
            cursor: pointer;
            margin: 20px;
        }
    </style>
    <div class="box">
        <div class="son"></div>
    </div>
    <script>
        //被选中是父元素
        var box = document.querySelector('.box');
        box.onwheel = function(){
            console.log('鼠标指针在被选元素内部,鼠标滚轮滚动时才会触发');
        }
    </script>
</body>

注意:并不是 滚动条的滚动事件,而是鼠标滚轮的滚动事件

应用:调节音量

键盘事件(监听键盘)一般都是在window上面操作

1.keydown  输入框的键盘按下 就会触发   (一般用这个就够了)

键盘按一个字母,就会监听按下的字母是什么(删除键也算是按下键盘也会触发)。如果按住不放就会一直触发。

应用:一般判定用户按了什么键

2.keyup   输入框的键盘松开就会触发。

3.keypress   输入框的键盘按下就会触发 

键盘事件触发时,产生的事件对象中:key属性和keyCode属性  重要

key是哪个键,返回的是按下的键的键名(键码)

keyCode返回keydown和keyup事件发生的时候按键的代码,以及keypress 事件的Unicode字符(ASCII码值);(firefox2不支持 event.keycode,可以用 event.which替代 )

<body>
    <script>
        window.onkeydown = function(){
            console.log("键盘按下事件");
            console.log(event.keyCode);
            console.log(event.key);
        }
        window.onkeyup = function(){
            console.log("键盘松开事件");
        }
    </script>
</body>

分析:给window添加键盘事件,当鼠标在窗口内时,按下键盘上的键,会触发键盘事件。 

 4.获取当前坐标的属性

clientX  clientY || x  y :获取的是鼠标点击的位置距离窗口的左边和上边的距离

输入框自带的事件(称为表单事件) 

1.input事件   用户在输入框中输入就会触发(是监听元素的)    常用

用户输入内容,或者粘贴内容,或者拖拽内容到输入框,都会触发input事件

与 keydown的区别,input输入框的value值一直在变。keydown事件是监听键盘的,input事件是监听元素的,如果是语音输入那种,keydown就没效果。input事件就会有用。所以input用得更多一点。

一般输入框input元素绑定input事件,其它元素可以绑定keydown事件。

<body>  
    <input type="text" id="box2">
    <script>
        //被选中是父元素
        var box2 = document.querySelector('#box2');
        box2.addEventListener('input',function(){
            console.log('输入框的键盘按下');
        });
    </script>
</body

2.change事件 

输入框失焦并且value改变会触发change事件

鼠标指针在输入之前点击输入框,焦点在输入框里面,输入内容后,鼠标指针点击其它地方,焦点就不在输入框里面了,且输入内容value值也改变,就会触发change事件。

失焦和value值改变两个条件必须同时满足才能触发change事件。

<body>  
    <input type="text" id="box2">
    <script>
        var box2 = document.querySelector('#box2');
        box2.addEventListener('change',function(){
            console.log('输入框失焦并且value改变');
        });
    </script>
</body>

应用:用户的输入验证,不是用户输入一位就验证一位然后提醒他输入的正确与否,这样烦人,而是等用户输完了,输入框失焦value值改变完再验证,所以change事件就很好用。 

3.让输入框自动有焦点

01.标签的写法

    <input type="text" id="box1" autofocus>

 02.js写法

<body>  
    <input type="text" id="box2">
    <script>
        var box2 = document.querySelector('#box2');
        box2.focus();
    </script>
</body>

分析:这样写目的是,一刷新页面,就会有输入框的光标自动闪烁。也就是焦点在输入框。 

但一般不能每个输入框都设置光标闪烁,因为输入框都是写完一个再写一个。

4.焦点事件 focus

输入框获取焦点时触发

<body>
    <input type="text" id="box2">
    <script>
        var box2 = document.querySelector('#box2');
        box2.addEventListener('focus', function () {
            console.log('输入框获取焦点时触发');
        });
    </script>
</body>

分析:输入框一获取焦点,立马就提示用户输入什么。。

5.失去焦点  blur

输入框失焦时触发

<body>
    <input type="text" id="box2">
    <script>
        var box2 = document.querySelector('#box2');
        box2.addEventListener('blur', function () {
            console.log('输入框失焦时触发');
        });
    </script>
</body>

拖拽事件

这三个事件是一起用的。

 dragstart  开始拖动,该事件绑定在拖动的节点之上。

dragover  拖动到目标区域之上,该事件绑定在目标区域之上事件需要清除浏览器默认事件,不然无法触发drop事件

drop 拖动后松开,该事件绑定在目标区域上。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 200px;
            height: 200px;
            background-color: skyblue;
            /* 设置一共绝对定位:使得其脱离文档流,才能在整个窗口随便拖动 */
            position: absolute;
            top: 50px;
            left: 50px;
        }
    </style>
</head>
<body>
    <!-- 没有内容就不会拖拽成功 -->
    <div class="box">盒子</div>
    <script>
        let box = document.querySelector('.box');
        let clickX,clickY;
        box.addEventListener('dragstart',()=>{
            console.log(11111);
            //点击要拖动的元素,获取鼠标点击的位置相对于元素的坐标
            clickX = event.offsetX;
            clickY = event.offsetY;
        });
        // 在window窗口中拖动 
        window.addEventListener('dragover',()=>{
            console.log(22222);
            //并且要阻止默认事件
            event.preventDefault();
        });
        //最终拖到的位置
        window.addEventListener('drag',()=>{
            //计算最终的偏移量 定位到哪里(left,top修改的是定位)
            box.style.left = `${event.pageX-clickX}px`;  //event.pageX-clickX只能得到一个数值,要加上单位
            box.style.top = `${event.pageY-clickY}px`;
        });
    </script>
</body>
</html>

其它事件 

1.onload 加载完毕时执行

一般加载要时间的就有onload属性,比如图片加载要时间,window加载要时间

浏览器加载完毕:5大BOM功能加载完毕,才会执行load事件

<body>
    <script>
        window.onload = function(){
            console.log('浏览器加载完毕:5大BOM功能加载完毕');
            console.log(document.querySelector('#box3'),2222);
        }
    </script>
    <div id="box3">666</div>
</body>

结果:

<body>
    <script>
        window.onload = function(){
            console.log('浏览器加载完毕:5大BOM功能加载完毕');
        }
        console.log(document.querySelector('#box3'),2222);
    </script>
    <div id="box3">666</div>
</body>

 

 分析:两次 console.log(document.querySelector('#box3'),2222);结果打印出来都不一样呢?这就要设计到浏览器的渲染过程了。

图片创建的两种方式   img.onload  图片加载完成触发
01.

        let img1 = document.createElement('img');
        img1.src = 'https://img2.baidu.com/it/u=1026317337,1339775897&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=711';
        img1.onload = function () {
            console.log("img1加载完成");
        }

02.

        let img2 = new Image();
        img2.src = 'https://img2.baidu.com/it/u=2045019318,65348288&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500';
        img2.onload = function () {
            console.log("img2加载完成");
        }

2.scroll  元素的滚动条滚动

<body>  
    <style>
        .box{
            width: 400px;
            height: 300px;
            background-color: brown;
            cursor: pointer;
            /* 子元素超出部分  设置为滚动条*/
            overflow-y: scroll;
        }
        .son{
            width: 200px;
            height: 700px;
            background-color: palegreen;
            cursor: pointer;
            margin: 20px;
        }
    </style>
    <div class="box">
        <div class="son"></div>
    </div>
    <script>
        //被选中是父元素
        var box = document.querySelector('.box');
        box.addEventListener('scroll',function(){
            console.log('元素自己的滚动条滚动了:单位时间内滚动条的位置发生变化');
        })
    </script>
</body>

分析:子元素高度700px,父元素高度300px,父元素设置了超出父元素的部分设置为滚动条形式 。一移动滚动条,就会执行box.addEventListener('scroll',function(){ console.log('元素自己的滚动条滚动了:单位时间内滚动条的位置发生变化'); })。

应用:scroll应用很多,常常给body标签绑一个,判定它的滚动条移动到某个位置后,进行预加载,加载后面的内容,接着显示出来。

eg:

        window.addEventListener('scroll',()=>{
            console.log(document.body.scrolltop||document.documentElement.scrollTop);
        })

获取的是窗口的滚动条的滚动距离。

3.resize监听窗口

eg:

        window.onresize = function () {
            console.log("监听窗口大小变化");
        }

分析:监听窗口大小的改变,改变就触发该事件。 

JSON数据转为对象,对象转为JSON数据 (JSON数据是字符串)

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值