事件及事件绑定

最新推荐文章于 2025-03-25 21:42:58 发布
最新推荐文章于 2025-03-25 21:42:58 发布
阅读量1.2k 收藏 9
点赞数 1
分类专栏： JavaScript 文章标签： javascript 前端 html5
原文链接：https://www.jianshu.com/p/ddf2f561d5b9?utm_source=desktop&utm_medium=timeline
版权

事件及事件绑定

一、事件理解

1.1、什么是事件

事件是用户或浏览器自身执行的某个动作，诸如点击click

JavaScript制作交互效果，离不开事件，所谓事件，就是用户的某个行为，能够触发一个函数的执行

1.2、绑定事件绑定

  <div id="box">点我</div>
    <script>
        box.onclick=function(){
            //console.log(111);
        }
    </script>

这个匿名函数，平时永远不会执行，必须等到事件的发生才执行

响应某个时间的函数叫做事假处理程序，通常我们俗称为事件处理函数，事件的处理程序是以‘on-’开始的，因此点击click的事件处理程序是onclick

二、DOM0事件绑定

DOM分为级别，DOM的标准分0级，1级，2级，3级，不同的标准，标准一直在升级

2.1、DOM0级事件绑定的用法

语法：

dom.on+type=fn;

1、dom：绑定事件的对象

2、type：为事件的类型

3、fn：为事件触发时执行的函数

<div id="box">点我</div>
    <script>
        box.onclick=function(){
            console.log(111);
        }
    </script>

也可以绑定一个有名的函数，当做事件处理程序

 <div id="box">点我</div>
    <script>
        box.onclick=dianji;
        function dianji(){
            console.log('点我干啥');
        }
    </script>

2.2、DOM0级绑定事件处理函数的次数

一个dom对象同一个事件类型只能绑定一个事件处理函数

 <div id="box">点击</div>
    <script>
        box.onclick=function(){
            console.log('第一次点我干啥');
        }
        box.onclick=function(){
            console.log('第二次点我干啥');
        }
    </script>

2.3、DOM0级解除事件绑定

语法：通过元素的事件属性上绑定空对象null来达到解除事件绑定

dom.on+type=null

 <div id="box">点击</div>
    <script>
        box.onclick=function(){
            console.log('第一次点我干啥');
        }
        box.onclick=null;
    </script>

三、批量绑定事件和事件排他

3.1、批量绑定事件

1、利用for循环批量绑定事件:for循环包裹添加绑定事件的语句

for(var i = 0 ; i < ps.length ; i++){
    ps[i].onclick = function(){
        alert("你好");
    }
}

2、对序号的影响

异步造成的问题又出现了，每个li标签点击之后，都是4，而不是我们预想的0,1,2,3,4

 <style>
        #ul{
            list-style: none;
        }
        #ul li{
            width: 100px;
            height: 100px;
            background-color: pink;
            float: left;
            margin-left: 5px;
        }
    </style>
<body>
    <ul id="ul">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <script>
        var ou=document.querySelectorAll('#ul li');
        // var len=ou.length;
        // console.log(len);
        for(var i=0;i<ou.length;i++){
                ou[i].onclick=function(){
                console.log(i);
            }
        }
    </script>

3、利用闭包解决异步语句造成的影响

<style>
        #ul{
            list-style: none;
        }
        #ul li{
            width: 100px;
            height: 100px;
            background-color: pink;
            float: left;
            margin-left: 5px;
        }
    </style>
<body>
    <ul id="ul">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <script>
        var ou=document.querySelectorAll('#ul li');
        // var len=ou.length;
        // console.log(len);
        for(var i=0;i<ou.length;i++){
            (function(m){
                ou[m].onclick=function(){
                console.log(m);
            }
            })(i);
        }
    </script>

4、除了IIFE之外，还有一种方法，就是强制添加属性的方法，任何一个对象，我们都可以通过点语法来设置新的属性

    <style>
        #ul{
            list-style: none;
        }
        #ul li{
            width: 100px;
            height: 100px;
            background-color: pink;
            float: left;
            margin-left: 5px;
        }
    </style>
<body>
    <ul id="ul">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <script>
        var ou=document.querySelectorAll('#ul li');
        for(var i=0;i<ou.length;i++){
            ou[i].index=i;
            ou[i].onclick=function(){
                console.log(this.index);
            }
        }
    </script>

3.2、对应和排他

1、对应：点击第一排的li，第二排对应的li变红

2、排他

四、DOM2级事件监听

DOM2级做了新的规范，不用on…来绑定监听，屙屎使用一个方法

4.1、主浏览器事件的绑定和解绑方法

1、绑定事件方法
addEventListener()

add：添加，Event：事件，Listener：监听

接受三个参数：什么事件、函数、是否监听捕获阶段

dom.addEventListener('click',function(){},false)

第一个参数：事件名不用写on,click、mouseover、mouseout

第二个参数：函数可以是匿名函数，也可以是有名函数

第三个参数：布尔值（默认值为false，可以省略），true表示监听捕获，false表示监听冒泡阶段

    <div id="box">点我</div>
    <script>
        box.addEventListener('click',function(){
            console.log('box被点击，捕获阶段');
        },false)
    </script>
2、事件绑定的this指向

发现this指向box元素自身

<div id="box">点我</div>
    <script>
        box.addEventListener('click',function(){
            console.log(this);  // <div id="box">点我</div>
        },false)
    </script>
3、可以绑定多个事件出来程序

addEventListener可以重复添加相同事件名的事件：

    <div id="box">点我</div>
    <script>
        box,addEventListener('click',function(){
            console.log('xixi');
        },false);
        box.addEventListener('click',function(){
            console.log('haha');
        },false);
    </script>

我们给box绑定了两个事件监听，不会覆盖，两个监听的函数都会执行，按照代码执行顺序

以下写法不是多个，而是同一个事件处理程序

    <div id="box">点我</div>
    <script>
        box.addEventListener('click',fn,false);
        box.addEventListener('click',fn,false);
        function fn(){
            console.log('haha');
        }
    </script>
4、解除绑定事件

使用方法：removeEventListener()

    <div id="box">点我</div>
    <script>
    		//解绑有名函数
        box.addEventListener('click',fn,false);
        function fn(){
            console.log('haha');
        }
        box.removeEventListener('click',fn,false);
			//解绑匿名函数
        box.addEventListener('click',function(){
            console.log('xixi');
            box.removeEventListener('click',arguments.callee,false);
        },false)
    </script>

4.2、低版本IE事件的绑定和解绑方法

IE6,7,8不支持addEventListener()方法

1、IE8及以下的事件绑定

需要加on

dom.attachEvent('onclick',函数)

没有第三个参数，不能选择监听捕获、冒泡，只能监听冒泡

    <div id="box"></div>
    <script>
        box.attachEvent('onclick',function(){
            console.log('haha');
        })
    </script>

第一个参数：必须写on，和addEventListener()不一样

第二个参数：事件处理函数

没有第三个参数，只能监听冒泡，所以和on…写法一样

2、低版本IE的事件监听方法的this指向

低版本IE的事件监听attachEvent：事件处理函数里面的this，不是触发事件的这个元素，而是window

 <div id="box"></div>
    <script>
        box.attachEvent('onclick',function(){
            console.log(this);
        })
    </script>
3、可以绑定多个事件处理程序

同一个事件名的多个监听，会反着执行

 <div id="box"></div>
    <script>
        box.attachEvent('onclick',function(){
            console.log(1);
        })
           box.attachEvent('onclick',function(){
            console.log(2);
        })
           box.attachEvent('onclick',function(){
            console.log(3);
        })
    </script>
4、解绑事件

使用方法：datachEvent()

   <div id="box"></div>
    <script>
        box.attachEvent('onclick',fn);
        function fn(){
        	console.log('haha');
        }
				box.datachEvent('onclick',fn);
    </script>

4.3、封装兼容方法

    <div id="box">点我</div>
    <script>
        function fn(dom,type,callback){
            if(dom.addEventListener){
                //DOM2级：主浏览器兼容
                dom.addEventListener(type,callback,false);
            }else if(dom.attchEvent){
                //DOM2级：低级浏览器IE8及其以下
                dom.attchEvent('on'+type,function(){
                    callback.call(dom);
                });
            }else{
                //DOM0级
                dom['on'+type]=callback;
            }
        }
        fn(box,'click',function(){
            console.log(111);
        })
    </script>

4.4、DOM2级事件的绑定和解绑

1、事件监听的兼容问题

1.1、IE8以上主流浏览器

dom.addEventListener(type,function,false);

this指向dom本身

1.2、低版本浏览器

dom.attachEvent(‘on’+type,function);

this指向window

2、解绑事件处理函数

2.1、IE8以上主流浏览器

dom.removeEventListener(type,function,false);

2.2、低版本浏览器

dom.datachEcent(‘on’+type,function);

五、事件的分类

5.1、鼠标事件

onclick 点击鼠标左键触发

oncontextmenu 点击鼠标右键触发，浏览器有默认的右键行为，不常用

ondblclick 双击鼠标左键触发

onmousedown 鼠标任意键按住时触发

onmouseup 鼠标任意键抬起时触发

onmouseenter 鼠标进入元素时触发

onmouseleave 鼠标离开元素时触发

onmouseover 鼠标进去元素时触发

onmouseout 鼠标离开元素时触发

onmousemove 鼠标在元素上移动触发===》持续触发

注意：οnclick=onmousedown+onmouseup

5.2、滚轮事件

onmousewheel 鼠标滚轮在元素上滚动时触发的（IE+Chrome）

DOMMouseScroll 鼠标滚轮在元素上滚动时触发的（Firefox）

5.3、键盘事件

onkeydown 按住键盘上任意键触发===>持续触发

onkeypress 按住键盘上部分键触发（只有功能键才触发）====>持续触发

onkeyup 键盘上按键抬起时触发

5.4、资源事件

onload 页面或者图片加载完成时触发

5.5、window事件

onresize 在窗口大小改变时触发

onscroll 在页面滚动的时候触发

5.6、焦点事件

onfocus 得到焦点

onblur 失去焦点

5.7、常用功能键

ctrlKey、shiftKey、altKey

对应的keyCode为17,16，19

如果功能键被按下了是true，没按下就是false

Enter键对应的keyCode为13

左上右下键对应的keyCode为37,38,39,40

box.okeydown=function(event){
			console.log(event.altKey);
}

事件处理模型和事件对象

一、事件处理模型

当一个dom节点触发事件后，该事件会按照HTML结构在根节点和这个元素节点之间传播，路径上的所有的节点都会收到该事件

1.1、什么是事件处理模型

事件流就是当你单击了某个元素，单击事件不仅仅发生在这个元素上，你也单击了它的父元素、父元素的父元素、…它的祖先元素，甚至单击了整个页面

‘事件流’描述的是页面上各个元素接收事件的顺序

我们为了描述事件的传播顺序，特意人为规定了两个阶段：捕获阶段、冒泡阶段。点击页面上的一个元素，事件在哪个阶段触发，这取决于添加事件监听的方法

1、事件的传播

事件传播也称为事件流，指的是事件的流向，事件的执行顺序，比如在一个大盒子里有一个小盒子。都给他们绑定点击事件，点击小盒子，大盒子的事件也会被触发，这个就叫做事件的传播

当元素触发一个事件的时候，其父元素也会触发相同的事件，父元素的父元素也会触发相同的事件，也就是说，页面上的任何一个元素触发事件，都会一层一层最终导致window的相同事件触发，前提是各层级元素都得有相同的事件，不然就不会触发

在事件传播的过程中，有一些注意的点：

1、只会传播同类的事件

2、只会从点击元素开始按照HTML的结构逐层向上元素的事件会被触发

3、内部元素不管有没有该事件，只要上层元素有该事件，那么上层元素的事件就会被触发

2、冒泡和捕获

冒泡：就是从事件目标的事件处理函数开始，依次向外，直到window的事件处理函数触发，也就是从下向上的执行事件处理函数

捕获：就是从window的事件处理函数开始，依次向内，只要事件目标的事件处理函数执行，也就是说从上向下的执行事件处理函数

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6vrRE6Pc-1635345304018)(C:\Users\web\AppData\Roaming\Typora\typora-user-images\image-20210901192429686.png)]

1.2、DOM0级事件绑定

box.onclick=function(){}

这种注册监听的写法，就是DODM0级的事件绑定方法，就是把onclick当做属性添加给了box元素

 <style>
        #parent{
            width: 300px;
            height: 300px;
            background-color: pink;
        }
        #box{
            width: 200px;
            height: 200px;
            background-color: blue;
        }
        #child{
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
<body>
   <div id="parent">
       <div id="box">
           <div id="child"></div>
       </div>
   </div>
   <script>
       /*
       从小到大：冒泡阶段
        parent   ③
            |
            box  ②
                |
                child  ①
       */
       parent.onclick=function(){
           console.log('parent');
       }
       box.onclick=function(){
           console.log('box');
       }
       child.onclick=function(){
           console.log('child');
       }  //child box parent
   </script>

这种事件添加方法，只能监听冒泡过程,事件的捕获阶段，没有监听成功

这里需要注意，在IE9、Chrome里面，事件会冒泡到window对象，而IE6,、7、8仅仅冒泡到documen对象

另外，用这种方法绑定的监听，this指的是触发这个事件的元素，没有任何的浏览器兼容问题

1.3、DOM2级事件绑定

DOM2级事件绑定是通过新增的addEventListener()来监听事件

box.addEventListener('click',function(){},false)

小题目

 //捕获阶段先与冒泡阶段
//事件源的意思是源头，比如点击到谁，谁就是源头
//事件源是没有捕获阶段的，也就是说事件源是不区分冒泡和捕获阶段，也就是谁在前执行谁
<div id="box1">1
        <div id="box2">2
            <div id="box3">3</div>
        </div>
    </div>
    <script>
         //false是监听阶段，true是捕获阶段
        box2.addEventListener('click',function(){
            console.log(1);
        },true)  //捕获阶段
        box1.addEventListener('click',function(){
            console.log(2);
        })   //监听阶段
        box3.addEventListener('click',function(){
            console.log(3);
        },false)   //监听阶段 //弹出顺序1、3、2.
    </script>

1.4、低版本IE的事件绑定

IE6、7、8不支持addEventListener()方法

box.attachEvent('onclick',函数)

没有第三个参数，不能选择监听捕获、冒泡，只能选择监听冒泡

事件流永远是先下后上，先捕获后冒泡，但是不同的添加监听的方式，决定了能够监听那一部分

1.5、总结

1、DOM0级的方式，只能监听冒泡阶段，不能有同名的事件，会覆盖

  • this是触发事件的整个元素
  • 高版本浏览器会冒泡到window
  • 低版本浏览器会冒泡到document

2、DOM2级的方法，addEventListener()

  • 可以自由设置冒泡、捕获。第三个参数：true就是捕获，false就是冒泡
  • 事件名不加on，可以有同名事件，会顺序执行，不覆盖
  • this是触发事件的这个元素
  • 事件会冒泡到window

3、IE6、7、8是自己的方法，attachEvent()

  • 只能监听冒泡阶段，没有第三参数
  • 事件名写on，可以有同名事件，会反着执行（事件栈）
  • this是window而不是触发事件的这个元素
  • 事件仅仅冒泡到document

二、事件对象

任何的事件处理函数，浏览器、JS引擎会默认的往里面传一个实参，就是事件对象，通常用形参event来接收

 <style>
        #box{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
<body>
    <div id="box"></div>
    <script>
        //事件对象：就是说你触发事件的时候，js会给事件处理函数传递一个实参，这个实参是这个事件触发的详细信息组合的对象
       //IE低版本浏览器，并没有将事件对象作为实参传递给事件处理函数，而是将事件对象挂载到window对象上，称为window的属性（window.event）
        box.onclick=function(event){
            console.log(arguments);
            console.log(event);
            console.log(event.clientY);
        }
    </script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vJLKxMzF-1635345304026)(C:\Users\web\AppData\Roaming\Typora\typora-user-images\image-20210901200942214.png)]

浏览器在调用这个事件处理函数，调用的时候会传进去一个实际参数（event），这个参数是一个对象，表示这次点击事件的所有细节，比如按的是什么按钮，是onclick还是ondblclick等、点击的位置等等，所有的事件细节，都被封装到了这个event对象里面

比如以下案例：获取鼠标当前的位置

event.clientX表示触发事件的时候，鼠标的X轴位置（相对于浏览器）

不同的事件，就有不同的event值，可以想象到键盘事件，没有鼠标的位置

 <style>
        #box{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
<body>
    <div id="box"></div>
    <script>
        box.onclick=function(event){
          event=event || window.event;  //兼容主浏览器和IE低版本浏览器
          this.innerHTML=`当前鼠标坐标为：X轴为${event.clientX}，Y轴为：${event.clientY}`;
          console.log(event);
        }
    </script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WSanFw4i-1635345304028)(C:\Users\web\AppData\Roaming\Typora\typora-user-images\image-20210901202700195.png)]

2.1、通用事件对象和方法

1、event.type 返回事件的类型，没有on，比如‘click’

2、event.target 返回你点击的最小的那个元素，即使这个元素身上没有监听，也是返回它（事件源）

3、event.currentTarget 返回自己，this一定和event.currentTarget是一个元素

4、event.button 区分左键、中间、右键

5、阻止事件流

event.stopPropagation()  //停止传播事件流

6、阻止默认事件

右键出菜单 、图片拖动、a标签跳转、表单提交这些网页的默认事件

event.preventDefault()

2.2、事件对象上储存的常用信息

clientX、clientY 鼠标距离浏览器左上角的水平、竖直距离

pageX、pageY 鼠标距离页面左上角的水平、竖直距离

offsetX、offsetY 鼠标距离触发事件的元素左上角的水平、竖直距离

layerX、layerY 鼠标距离最近定位父级元素左上角的水平、竖直距离

screenX、screenY 鼠标距离计算机屏幕左上角的水平、竖直距离

2.3、IE6、7、8的兼容问题

在调用事件处理函数的时候，高级浏览器是传给这个事件处理函数一个实际参数event对象，但是IE6、7、8是给window对象绑定一个当前的event属性

IE事件对象兼容方法

 <style>
        #box{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
<body>
    <div id="box"></div>
    <script>
        box.onclick=function(event){
          event=event || window.event;  //兼容主浏览器和IE低版本浏览器
          this.innerHTML=`当前鼠标坐标为：X轴为${event.clientX}，Y轴为：${event.clientY}`;
          console.log(event);
        }
    </script>

|| 就是或逻辑短路运算符，如果event有定义，那么就event对象，否则就是window.event对象

2.4、IE事件对象中的不兼容的方法

1、阻止默认事件

主浏览器

event.preventDefault()

在IE是一个属性

event.returnValue=false

这些的兼容性问题，就用能录检测来解决

//阻止默认的滚动事件，阻止的方法有浏览器兼容问题
if(event.preventDefault){
		event.preventDefault();
}else{
		event.returnValue=false;
}

2、阻止事件冒泡

主浏览器

event.stopPropagation()

在IE是一个属性

event.cancelBubble=true;

这些的兼容性问题，就用能录检测来解决

if(event.stopPropagation){
		event.stoppropagation();
}else{
		event.cancelBubble=true;
}

3、事件源兼容

主浏览器

event.target

在IE是一个属性

event.srcElement;

这些的兼容性问题，就用短路语法

var targetElem=event.target || event.secElement;

4、总结IE 6、7、8中不支持方法，我们要记住这三个：

  1. event.preventDefault()不兼容！ 在IE 6、7、8中用event.returnValue=false; 代替
  2. event.stopPropagation()不兼容！在IE 6、7、8中用event.cancelBubble=true;代替
  3. event.target不兼容，在IE 6、7、8中用event.srcElement代替

三、什么是事件委托

利用事件冒泡的原理把子级的事件委托给祖先元素

优点：不需要循环绑定每个子元素，可以节约浏览器性能。添加新的子元素时，不需要再给新元素绑定事件

四、滚轮事件

4.1、滚轮事件及方向值

1、滚轮事件

滚轮事件就是鼠标滚动的时候触发的

onmousewheel就是鼠标滚动事件，mouse鼠标，wheel轮子

2、滚轮方向值

event参数最重要的参数就event.wheelDalta属性。表示滚动方向，这是浏览器的规定：

鼠标往上滚 （往后滚轮）：120

鼠标往下滚 （往前滚轮）：-120

如果滚动快速，可能会出现120的整数倍，正负值是一样的

 document.onmousewheel=function(event){
            event=event||window.event;
            console.log(event);
        }

4.2、火狐浏览器不兼容

1、获取的滚轮事件

火狐使用自己的专用事件DOMMouseScroll，并且这个事件只能通过标准的DOM2级的事件绑定方式添加

2、火狐的滚轮方向值

火狐表示滚动方向的事件的属性叫做event.detail，detail就是细节的意思

注意：火狐滚轮方向值和其他的不一样，并且反着的

滚动方向往上（往前滚轮）：-3

滚动方向向下（往后滚轮）：3

document.addEventListener("DOMMouseScroll",function(event){
    //oDiv.innerHTML = event.detail;  
  	event=event||window.event;
    console.log(event);
},false);
3、兼容封装
  //主浏览器绑定滚轮事件
        document.onmousewheel=function(event){
            event=event||window.event;
            var wheelDelta=getWheelDetail(event);
            console.log(wheelDelta);
        }

        //火狐绑定滚轮事件
        document.addEventListener=('DOMMouseScroll',function(event){
            event=event||window.event;
            var detail=getWheelDetail(event);
            console.log(detail);

        })
        function getWheelDetail(event){
            //非火狐
            if(event.wheelDelta){
                return event.wheelDelta/120;
            //火狐
            }else{
                return event.detail/3;
            }
        }

 <style>
    #box {
      overflow: hidden;
      width: 300px;
      height: 300px;
      border: 2px solid red;
      margin: 50px auto;
    }
  </style>
</head>

<body>
  <div id="box">
    <div>111111111111111111111111</div>
    <div>222222222222222222222222</div>
    <div>33333333333333333333333</div>
    <div>111111111111111111111111</div>
    <div>222222222222222222222222</div>
    <div>33333333333333333333333</div>
    <div>111111111111111111111111</div>
    <div>222222222222222222222222</div>
    <div>33333333333333333333333</div>
    <div>111111111111111111111111</div>
    <div>222222222222222222222222</div>
    <div>33333333333333333333333</div>
    <div>111111111111111111111111</div>
    <div>222222222222222222222222</div>
    <div>33333333333333333333333</div>
    <div>111111111111111111111111</div>
    <div>222222222222222222222222</div>
    <div>33333333333333333333333</div>
    <div>111111111111111111111111</div>
    <div>222222222222222222222222</div>
    <div>33333333333333333333333</div>
    <div>111111111111111111111111</div>
    <div>222222222222222222222222</div>
    <div>33333333333333333333333</div>
    <div>111111111111111111111111</div>
    <div>222222222222222222222222</div>
    <div>33333333333333333333333</div>
    <div>111111111111111111111111</div>
    <div>222222222222222222222222</div>
    <div>33333333333333333333333</div>
    <div>111111111111111111111111</div>
    <div>222222222222222222222222</div>
    <div>33333333333333333333333</div>
    <div>111111111111111111111111</div>
    <div>222222222222222222222222</div>
    <div>33333333333333333333333</div>
    <div>111111111111111111111111</div>
    <div>222222222222222222222222</div>
    <div>33333333333333333333333</div>
    <div>111111111111111111111111</div>
    <div>222222222222222222222222</div>
    <div>33333333333333333333333</div>
    <div>111111111111111111111111</div>
    <div>222222222222222222222222</div>
    <div>33333333333333333333333</div>
    <div>111111111111111111111111</div>
    <div>222222222222222222222222</div>
    <div>33333333333333333333333</div>
    <div>111111111111111111111111</div>
    <div>222222222222222222222222</div>
    <div>33333333333333333333333</div>
    <div>111111111111111111111111</div>
    <div>222222222222222222222222</div>
    <div>33333333333333333333333</div>
    <div>111111111111111111111111</div>
    <div>222222222222222222222222</div>
    <div>33333333333333333333333</div>
    <div>111111111111111111111111</div>
    <div>222222222222222222222222</div>
    <div>33333333333333333333333</div>
    <div>111111111111111111111111</div>
    <div>222222222222222222222222</div>
    <div>33333333333333333333333</div>
    <div>111111111111111111111111</div>
    <div>222222222222222222222222</div>
    <div>33333333333333333333333</div>
    <div>111111111111111111111111</div>
    <div>222222222222222222222222</div>
    <div>33333333333333333333333</div>
    <div>111111111111111111111111</div>
    <div>222222222222222222222222</div>
    <div>33333333333333333333333</div>
    <div>111111111111111111111111</div>
    <div>222222222222222222222222</div>
    <div>33333333333333333333333</div>
    <div>111111111111111111111111</div>
    <div>222222222222222222222222</div>
    <div>33333333333333333333333</div>
    <div>111111111111111111111111</div>
    <div>222222222222222222222222</div>
    <div>33333333333333333333333</div>
    <div>111111111111111111111111</div>
    <div>222222222222222222222222</div>
    <div>33333333333333333333333</div>
    <div>111111111111111111111111</div>
    <div>222222222222222222222222</div>
    <div>33333333333333333333333</div>
    <div>111111111111111111111111</div>
    <div>222222222222222222222222</div>
    <div>33333333333333333333333</div>
    <div>111111111111111111111111</div>
    <div>222222222222222222222222</div>
    <div>33333333333333333333333</div>
    <div>111111111111111111111111</div>
    <div>222222222222222222222222</div>
    <div>33333333333333333333333</div>
    <div>111111111111111111111111</div>
    <div>222222222222222222222222</div>
    <div>33333333333333333333333</div>
    <div>111111111111111111111111</div>
    <div>222222222222222222222222</div>
    <div>33333333333333333333333</div>
    <div>111111111111111111111111</div>
    <div>222222222222222222222222</div>
    <div>33333333333333333333333</div>
    <div>111111111111111111111111</div>
    <div>222222222222222222222222</div>
    <div>33333333333333333333333</div>
    <div>111111111111111111111111</div>
    <div>222222222222222222222222</div>
    <div>33333333333333333333333</div>
    <div>111111111111111111111111</div>
    <div>222222222222222222222222</div>
    <div>33333333333333333333333</div>
    <div>111111111111111111111111</div>
    <div>222222222222222222222222</div>
    <div>33333333333333333333333</div>
    <div>111111111111111111111111</div>
    <div>222222222222222222222222</div>
    <div>33333333333333333333333</div>
    <div>111111111111111111111111</div>
    <div>222222222222222222222222</div>
    <div>33333333333333333333333</div>
    <div>111111111111111111111111</div>
    <div>222222222222222222222222</div>
    <div>33333333333333333333333</div>
    <div>111111111111111111111111</div>
    <div>222222222222222222222222</div>
    <div>33333333333333333333333</div>
  </div>
  <script>
    // 除了火狐外滚轮事件
    let tt = 0
    box.onmousewheel = function(ev) {
      ev = ev || window.event
      let detail = getWheelDetail(ev)
      tt += detail / -1 * 10
      console.log(detail)
      console.log(tt)
      this.scrollTo(0, tt)
        // console.log(ev.wheelDelta)
        // 向下(往后拉滚轮) -120
        // 向上(往前推滚轮)) 120

      // 事件函数处理其他逻辑
    }
    // 火狐绑定滚轮事件
    box.addEventListener('DOMMouseScroll', function(ev) {
      ev = ev || window.event;
      let detail = getWheelDetail(ev)
      console.log(detail)
      tt += detail / -1 * 10
      console.log(detail)
      console.log(tt)
      this.scrollTo(0, tt)
      // 事件函数处理其他逻辑
      // console.log('ev', ev)
      // 向下(往后拉滚轮) 3
      // 向上(往前推滚轮)) -3
    }, false)
    // 封装处理滚轮详情的函数
    function getWheelDetail(ev) {
      if (ev.wheelDelta) {
        // !火狐
        return ev.wheelDelta / 120
      } else {
        // 火狐
        return -ev.detail / 3
      }
    }
  </script>

五、捕获错误

try(…)catch(ex){}

try表示尝试，里面的语句可能有错误，catch(ex)参数ex就是try语句段里面出现的错误，在catch里面进行了一个捕获，可以把这个错误控制在这个catch语句块里，而不向浏览器抛出

程序的执行逻辑是这样的： 运行try语句块里面的语句，如果遇见了错误的语句，不向浏览器抛出错误。而是执行catch语句段里的语句。try语句里面没有执行完的语句，不执行了。catch语句块执行完毕之后，执行后面的语句。

【微信小程序】事件绑定和事件对象
云泽野の编程日记
06-04 3050
小程序中绑定事件与在网页开发中绑定事件几乎一致，只不过在小程序不能通过on的方式绑定事件，也没有click等事件，小程序中绑定事件使用bind方法，click事件也需要使用tap事件来进行代替bind:事件名bind事件名事件处理函数需要写到.js文件中，在 .js 文件中需要调用小程序提供的 Page 方法来注册小程序的页面，我们可以直接在 Page 方法中创建事件处理函数。
ES6中javascript实现函数绑定及类的事件绑定功能详解
10-19
ES6（ECMAScript 2015）引入了许多现代JavaScript语言的新特性，其中包括了对于函数绑定的简化以及在类中的事件绑定方法的改进。函数绑定是一种把函数中的this值固定为特定对象的技术，它减少了在JavaScript中由于...
事件和事件绑定
lly193426的博客
09-14 589
一.DOM 什么是事件：事件是浏览器赋予元素的默认行为，也可以理解为事件是天生具备的，不论我们是否为其绑定方法，当某些行为触发的时候，相关的事件都会被触发执行。 什么是事件绑定：给元素默认的事件行为绑定方法，这样可以在行为触发的时候，执行这个方法。 鼠标事件 click：点击事件（PC：频繁点击N次，触发N次点击事件）单击事件（移动端：30ms内没有发生第二次点击操作，算作单击事件行为，所以click在移动端有300ms延迟） dbclick：双击事件 contextmenu：鼠标右键点击触发 mouse
JavaScript基础-常用的鼠标事件
最新发布
m0_61787196的博客
03-25 449
JavaScript基础-常用的鼠标事件
window bom，事件绑定
gimm667的专栏
09-01 166
原生脚本入口,页面dom加载完之后进入执行 window.onload = function (){ } 图片文件全部加载完，执行 类比对jquery $().onready(){ } dom加载完执行 事件绑定， dom中元素绑定 <button id=btn onclick=click()>，<selector id=selonchange=change()> js中绑定,表现与行为分开 document.getElement(btn)...
给window对象绑定onload事件
ikmb的专栏
02-26 1250
 给window对象绑定onload事件不能在DOM ready后绑定//$(document).ready(function() { var isIE6 = $.browser.msie && (parseInt($.browser.version)  if (isIE6) {     $(window).bind("load", function() {      
事件绑定
weixin_30294021的博客
04-07 236
事件绑定 1、什么是事件绑定 所谓的事件绑定就是为某个对象的某个事件绑定相应的事件处理程序，我们把这个过程就称之为"事件绑定"。 2、事件绑定的三种形式 ① 行内绑定 ② 动态绑定 ③ 事件监听 3、行内绑定 基本语法：<标签 属性列表… 事件="事件的处理程序" /> 由此可知：咱们刚才在常用Javascript事件中演示的都是通过行内绑...
layui动态绑定事件的方法
10-16
首先，我们需要了解动态创建DOM元素后，原有的事件绑定可能不会生效。这是因为事件监听器是在元素创建时就绑定的，而对于后来添加到DOM中的元素，监听器并未注册。为了解决这个问题，我们通常会采用事件委托的方式。...
微信小程序 动态绑定事件并实现事件修改样式
08-30
在微信小程序中，动态绑定事件和根据事件修改...这个实例展示了如何实现这一功能，包括WXML的事件绑定、JS的事件处理函数生成以及WXSS的样式控制。希望这个案例对你理解微信小程序的动态事件绑定和样式修改有所帮助。
关于动态生成dom绑定事件失效的原因及解决方法
11-28
之前做项目都是直接用jquery的bind绑定事件，不过当时都不是动态生成dom元素，而是已经页面中原本存在的dom元素进行事件绑定，最近在测试给动态生成的dom绑定事件的时候发现事件失效，于是就测试了一下： ...
详解Canvas事件绑定
12-13
下面我就来简单的实现一个canvas内部各个图片的事件绑定。 我先来讲下实现原理：其实就是canvas绑定相关事件，在通过记录图片所在canvas的坐标，判断事件作用于哪个图片中。这样讲是不是感觉跟事件代理有点相似咧。...
Vue中给Window绑定事件
aybaiwan的博客
08-02 1242
通过jsBridge方法，H5可以调用客户端（ios，android）的内部方法，但是在vue里，所有的方法都是在组件内部声明的，也只能在组件内部调用，同样，客户端也需要能调用H5页面里定义的js方法，原生调用h5方法必须定义在window对象下。
事件有几个阶段？事件绑定方式有哪些？以及区别是什么?
小鱼儿~同学
07-23 1420
事件有三个阶段： 1.事件捕获阶段-----由外向里 2.事件目标阶段-----最开始选中的那个，但是不一定是最先出现的，根据是那个阶段而定 3.事件冒泡阶段-----有里向外 事件绑定方式有哪些？ DOM和jQuery当中都有 DOM中： 1.对象.on事件名字=事件处理函数----------如果是多个相同事件注册用这种方式，最后一个执行，之前的会被覆盖掉；    参考代码：m...
事件的绑定
m0_65916942的博客
11-12 265
/ addEventListener：绑定监听事件，可以给同一元素绑定多个相同事件（不会发生事件覆盖）console.log('绑定事件的元素（事件源）',e.currentTarget)addEventListener：绑定监听事件，可以给同一元素绑定多个相同事件（不会发生事件覆盖）console.log('事件对象，有事件相关的信息e', e);console.log('触发事件的元素',e.target)// this 指向绑定事件的元素（事件源）// 绑定相同的多个事件时，后面的会覆盖前面的。
Window.onload事件绑定
自学C++,会写HelloWorld
08-17 303
else if (document.attachEvent) { //IE浏览器。if (document.addEventListener) { //标准浏览器。//注销时间，避免重复触发。
事件概念和事件绑定
hcwdd的博客
05-30 282
事件的概念 就和数据库中的触发器一样，当操作了数据的时候回引发对应的触发器程序的执行，JS中的世间就是对用户的特定行为做出相应的响应的过程，其实就是浏览器监听到用户的特定行为时会执行对应的绑定程序。 事件的绑定 在html元素上将触发事件的行为和事件相应的程序相关联起来的过程就叫做事件的绑定 DEMO:绑定函数（一个单击事件） html文件 <!DOCTYPE html> <ht...
深入理解jQuery点击事件及事件绑定机制
资源摘要信息: "teacher...以上知识点涵盖了jQuery中点击事件及事件绑定机制的各个方面，从基础的事件绑定到事件命名空间、自定义事件，再到性能优化和版本兼容性问题，为理解和应用jQuery的事件处理提供了详细的参考。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值