事件及事件绑定

【微信小程序】事件绑定和事件对象 小程序中绑定事件与在网页开发中绑定事件几乎一致,只不过在小程序不能通过on的方式绑定事件,也没有click等事件,小程序中绑定事件使用bind方法,click事件也需要使用tap事件来进行代替bind:事件名bind事件名事件处理函数需要写到.js文件中,在 .js 文件中需要调用小程序提供的 Page 方法来注册小程序的页面,我们可以直接在 Page 方法中创建事件处理函数。 阅读详情

事件及事件绑定

一、事件理解

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语句块执行完毕之后,执行后面的语句。

22222222222222222222222222 222222222222222222222222 立即下载

相关推荐

深入MoveIt与OMPL集成开发:从源码编译到自定义规划算法实战

本文详细介绍了如何从源码编译集成MoveIt与OMPL,并实现自定义规划算法的完整流程。通过清理环境、获取源码、解决编译依赖与错误,最终指导开发者创建并集成名为MyRRT的自定义规划算法,从而实现对机器人运动规划栈的深度定制与优化。

h0i1j2k3l的博客 467

事件绑定方式总结

事件绑定方法

EmilyHoward的博客 1175

炼丹-Pyecharts: JupyterLab无法render_notebook

炼丹-Pyecharts: JupyterLab无法render_notebook问题描述Jupyter-Lab 环境下render_notebook显示空白 问题描述Jupyter-Lab 环境下render_notebook显示空白 首先需要使用pyecharts自带的config来申明一下使用pyecharts的运行环境 from pyecharts.globals import Curre...

MichaelZzzzz的博客 4687

为按钮和表单绑定事件常用的两种方式

绑定事件常用的两种方式,以及其注意事项

qq_45344586的博客 3137

PC网站实现微信扫码登录功能(二)

上篇我们介绍了怎么申请账号以及最后拿到appId和appSecret,如果有不清楚的可以看一下 PC网站实现微信扫码登录功能(一) 下面我就来说一下怎样在PC端怎么实现扫码登录功能。 一、进入官方文档网站 https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Wechat_Login.html 其实官网对过程描述的已经非常细致了。并且提供了两种扫码方式。一种是跳转二维码扫描页面,另一种是内嵌式二维码。大家可以

qq_35771266的博客 3万+

RT-Thread Studio与CubeMX联合编程(超级详细)

RT-Thread Studio与CubeMX联合编程 本文章参考以下文章: https://blog.youkuaiyun.com/qq_40824852/article/details/122596043 https://zhuanlan.zhihu.com/p/395106066 https://blog.youkuaiyun.com/m0_37697335/article/details/108890584 一、简介 经过上次对RT-Thread Studio的初步尝试,发现RT-Thread Studio中存在官方支

zhuzhu的博客 3万+

事件绑定的三种方式

addEventListener 的第三个参数若为 false(默认),绑定的是冒泡事件,在冒泡阶段触发;若为 true,绑定的是捕获事件,在捕获阶段触发。

m0_59070120的博客 1706

194、产线 Camera 校准与测试:终检测试项、规格线制定与量产数据监控

摘要: 文章通过"绿屏门"案例揭示了产线Camera校准测试中的关键问题,提出了系统性改进方案。在终检测试方面,建议增加多增益暗电流测试、混合光源色温测试和径向亮度梯度测试,覆盖用户真实场景。规格线制定强调用CPK替代固定百分比,区分硬软规格并建立动态调整机制。量产监控需关注参数趋势、边界模组分布,构建失效模式数据库。实践建议包括测试冗余设计、规格余量预留、自动化监控、供应商数据共享和人工抽检保留。文章指出Camera产线质量管控需形成"测试设计-规格优化-数据监控"闭环,以数据驱动决策避免客诉风险。

sundong_81的博客 192

react——事件绑定

react有两种写法,一种是类组件,也叫有状态组件;一种是函数式组件,也叫无状态组件,而后引入了react hooks,函数式组件也能修改状态。在这两种组件中的事件绑定的原理一样,写法不一样。这篇文章主要就是记录这两种组件中的事件绑定写法。

m0_55173487的博客 2097

【产品】 产品设计:如何解决铝合金氧化着色后表面硬度低的问题(硬质氧化)

1、氧化处理技术 1)化学氧化 化学氧化处理所获得的膜层较薄,一般厚度为0.5μm ~4μm,质软不耐磨,抗蚀能力低于阳极氧化膜。 一般不宜单独便用,由于化学氧化膜吸附能力好,主要作用于油漆的底层,化学氧化按其溶液性可分为碱性和酸性两种。按其膜层性质可分为氧化膜,磷酸盐膜、铬酸盐膜及磷酸一铬酸盐膜等(这类型的氧化膜是可导电)。 2)电化学氧化(阳极氧化) 电化学氧化(俗称阳极氧化)是铝及...

产品线负责人 9728

C#部署YOLO三种方案深度实测:OpenCV DNN vs ONNX Runtime vs TensorRT

在工业视觉项目落地阶段,C#生态下部署YOLO模型主要有三条技术路线。很多开发者仅凭经验选型,往往在部署后期踩中性能瓶颈、兼容故障、维护成本超标的坑。本文基于工控机常见硬件配置,针对YOLOv8系列模型做控制变量实测,从推理性能、部署难度、工业稳定性、综合成本等多个维度做横向对比,给出可直接落地的选型结论。

这里只有干货:从 Modbus 通信到 MES 对接,从 YOLO 训练到工控机部署,带你搞定工业软件开发全流程。 464

事件绑定(DOM0级事件绑定和DOM2级事件绑定)

DOM0级事件绑定 box.onclick=function(){} 元素.事件行为=函数 box.onclick=function(){} 相当于给一个元素的属性赋值,只能赋一个值,后面如果再赋值就会覆盖前面的值,所以说DOM0级事件只可以绑定一次,如果绑定多次,后面的会把前面的给覆盖了,因为是一个赋值的过程,一个属性只能赋一个值 复制代码DOM0级事件移除 元素.事件行为=null;// 元素...

weixin_33805557的博客 1087

uniapp(微信小程序) - 实现uniapp小程序电子签名板,横屏手写姓名签名专用写字画板,客户专用签字板,手写签名签字画板组件,手写签名,(详细运行示例,一键复制开箱即用)

uniapp实现微信小程序的电子签名效果,uniapp微信小程序 电子签名 写字板,用uniapp实现微信小程序的电子签名,uniapp微信小程序canvans实现手写签名,记录一个uniapp写的小程序的手写板,横屏,用于签名,unniapp实现电子签名,uniapp怎么做横屏的手写签名,uniapp如何实现签字板,uniapp小程序平台下怎么做电子签名板组件,uniapp电子签名插件,uniapp最好用的电子写字板插件组件源码,实现uniapp 手写签名功能,手写板、签字板,uni-app插件市场最好的

✅ 精选推荐文章 1万+

第 26 章 事件绑定及深入

事件绑定分为两种:一种是传统事件绑定(内联模型,脚本模型),一种是现代事件绑定 (DOM2 级模型)。现代事件绑定在传统绑定上提供了更强大更方便的功能。

weixin_44010641的博客 1285

最新的sdio 4.0 spec 协议标准 带书签 高清完整PDF版

Part-E1-SDIO-Specification-Ver4.00-Final-120220.pdf:最新的sdio 4.0 spec 协议标准 带书签 高清完整PDF版,包括SDIO 接口的外设,SDIO 接口官方协议等。

深度学习工具包 DeepLearningToolbox

深度学习工具包Deprecation notice.-----This toolbox is outdated and no longer maintained.There are much better tools available for deep learning than this toolbox, e.g. [Theano](http://deeplearning.net/software/theano/), [torch](http://torch.ch/) or [tensorflow](http://www.tensorflow.org/)I would suggest you use one of the tools mentioned above rather than use this toolbox.Best, Rasmus.DeepLearnToolbox================A Matlab toolbox for Deep Learning.Deep Learning is a new subfield of machine learning that focuses on learning deep hierarchical models of data.It is inspired by the human brain's apparent deep (layered, hierarchical) architecture.A good overview of the theory of Deep Learning theory is[Learning Deep Architectures for AI](http://www.iro.umontreal.ca/~bengioy/papers/ftml_book.pdf)For a more informal introduction, see the following videos by Geoffrey Hinton and Andrew Ng.* [The Next Generation of Neural Networks](http://www.youtube.com/watch?v=AyzOUbkUf3M) (Hinton, 2007)* [Recent Developments in Deep Learning](http://www.youtube.com/watch?v=VdIURAu1-aU) (Hinton, 2010)* [Unsupervised Feature Learning and Deep Learning](http://www.youtube.com/watch?v=ZmNOAtZIgIk) (Ng, 2011)If you use this toolbox in your research please cite [Prediction as a candidate for learning deep hierarchical models of data](http://www2.imm.dtu.dk/pubdb/views/publication_details.php?id=6284)```@MASTERSTHESIS\{IMM2012-06284, author = "R. B. Palm", title = "Prediction as a candidate for learning deep hierarchical models of data", year = "2012",}```Contact: rasmusbergpalm at gmail dot comDirectories included in the toolbox-----------------------------------`NN/` - A library for Feedforward Backpropagation Neural Networks`CNN/` - A library for Convolutional Neural Networks`DBN/` - A library for Deep Belief Networks`SAE/` - A library for Stacked Auto-Encoders`CAE/` - A library for Convolutional Auto-Encoders`util/` - Utility functions used by the libraries`data/` - Data used by the examples`tests/` - unit tests to verify toolbox is workingFor references on each library check REFS.mdSetup-----1. Download.2. addpath(genpath('DeepLearnToolbox'));Example: Deep Belief Network---------------------```matlabfunction test_example_DBNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit RBM and visualize its weightsrand('state',0)dbn.sizes = [100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);figure; visualize(dbn.rbm{1}.W'); % Visualize the RBM weights%% ex2 train a 100-100 hidden unit DBN and use its weights to initialize a NNrand('state',0)%train dbndbn.sizes = [100 100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);%unfold dbn to nnnn = dbnunfoldtonn(dbn, 10);nn.activation_function = 'sigm';%train nnopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.10, 'Too big error');```Example: Stacked Auto-Encoders---------------------```matlabfunction test_example_SAEload mnist_uint8;train_x = double(train_x)/255;test_x = double(test_x)/255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit SDAE and use it to initialize a FFNN% Setup and train a stacked denoising autoencoder (SDAE)rand('state',0)sae = saesetup([784 100]);sae.ae{1}.activation_function = 'sigm';sae.ae{1}.learningRate = 1;sae.ae{1}.inputZeroMaskedFraction = 0.5;opts.numepochs = 1;opts.batchsize = 100;sae = saetrain(sae, train_x, opts);visualize(sae.ae{1}.W{1}(:,2:end)')% Use the SDAE to initialize a FFNNnn = nnsetup([784 100 10]);nn.activation_function = 'sigm';nn.learningRate = 1;nn.W{1} = sae.ae{1}.W{1};% Train the FFNNopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.16, 'Too big error');```Example: Convolutional Neural Nets---------------------```matlabfunction test_example_CNNload mnist_uint8;train_x = double(reshape(train_x',28,28,60000))/255;test_x = double(reshape(test_x',28,28,10000))/255;train_y = double(train_y');test_y = double(test_y');%% ex1 Train a 6c-2s-12c-2s Convolutional neural network %will run 1 epoch in about 200 second and get around 11% error. %With 100 epochs you'll get around 1.2% errorrand('state',0)cnn.layers = { struct('type', 'i') %input layer struct('type', 'c', 'outputmaps', 6, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %sub sampling layer struct('type', 'c', 'outputmaps', 12, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %subsampling layer};cnn = cnnsetup(cnn, train_x, train_y);opts.alpha = 1;opts.batchsize = 50;opts.numepochs = 1;cnn = cnntrain(cnn, train_x, train_y, opts);[er, bad] = cnntest(cnn, test_x, test_y);%plot mean squared errorfigure; plot(cnn.rL);assert(er<0.12, 'Too big error');```Example: Neural Networks---------------------```matlabfunction test_example_NNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);% normalize[train_x, mu, sigma] = zscore(train_x);test_x = normalize(test_x, mu, sigma);%% ex1 vanilla neural netrand('state',0)nn = nnsetup([784 100 10]);opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samples[nn, L] = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.08, 'Too big error');%% ex2 neural net with L2 weight decayrand('state',0)nn = nnsetup([784 100 10]);nn.weightPenaltyL2 = 1e-4; % L2 weight decayopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex3 neural net with dropoutrand('state',0)nn = nnsetup([784 100 10]);nn.dropoutFraction = 0.5; % Dropout fraction opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex4 neural net with sigmoid activation functionrand('state',0)nn = nnsetup([784 100 10]);nn.activation_function = 'sigm'; % Sigmoid activation functionnn.learningRate = 1; % Sigm require a lower learning rateopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex5 plotting functionalityrand('state',0)nn = nnsetup([784 20 10]);opts.numepochs = 5; % Number of full sweeps through datann.output = 'softmax'; % use softmax outputopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex6 neural net with sigmoid activation and plotting of validation and training error% split training data into training and validation datavx = train_x(1:10000,:);tx = train_x(10001:end,:);vy = train_y(1:10000,:);ty = train_y(10001:end,:);rand('state',0)nn = nnsetup([784 20 10]); nn.output = 'softmax'; % use softmax outputopts.numepochs = 5; % Number of full sweeps through dataopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, tx, ty, opts, vx, vy); % nntrain takes validation set as last two arguments (optionally)[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');```[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/rasmusbergpalm/deeplearntoolbox/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

DOM事件&事件绑定

目录

最可爱的草莓酱兔兔 456

霍尼韦尔SoftMaster使用说明

霍尼韦尔SoftMaster使用说明

Vue——事件绑定

事件绑定 方法v-on 可以简写成@使用两种方式内联 直接把js写在标签上调用方法 调用methods里定义的方法 事件修饰符.stop 阻止单击事件冒泡.prevent 提交事件不再重载页面.capture 使用事件捕获模式.self 当事件在该元素本身 (比如不是子元素) 触发时触发回调.once <!-- 修饰符可以串联 --> <a v

lihaoen666的博客 6846

IEM模型,地表粗糙度模拟

利用微波反演土壤水分时候,利用IEM模型可以实现对随机地表的模拟

事件绑定与深入详解

事件绑定分为两种:一种是传统事件绑定(内联模型,脚本模型),一种是现代事件绑定(DOM2 级模型)。现代事件绑定在传统绑定上提供了更强大更方便的功能。 一.传统事件绑定的问题传统事件绑定有内联模型和脚本模型,内联模型我们不做讨论,基本很少去用。先来看一下脚本模型,脚本模型将一个函数赋值给一个事件处理函数。 <script type="text/javascript">...

161

JavaScript 事件绑定 封装一个兼容性事件绑定方法

一、事件绑定方法 1、element.on*** = function(event){} this 指向自身 兼容性好,基本等于写在HTML的行间上,所以叫做句柄的绑定方式 2、obj.addEventListener(type,fn,false) IE9以下不兼容 也就是w3c标准 this 指向自身 type:事件类型 fn:处理函数 fals...

qq_42785996的博客 620

传统事件绑定和符合W3C标准的事件绑定有什么区别?

传统事件绑定 &lt;div onclick=””&gt;123&lt;/div&gt; div1.onclick=function(){}; &lt;button onmouseover=””&gt;&lt;/button&gt; 1、如果说给同一个元素绑定了两次或者多次相同类型的事件,那么后面的绑定会覆盖前面的绑定 2、不支持DOM事件流 (事件捕获阶段 =&gt;目标元素阶段=&gt;事...

李天下 1470

事件和事件绑定

一.DOM 什么是事件:事件是浏览器赋予元素的默认行为,也可以理解为事件是天生具备的,不论我们是否为其绑定方法,当某些行为触发的时候,相关的事件都会被触发执行。 什么是事件绑定:给元素默认的事件行为绑定方法,这样可以在行为触发的时候,执行这个方法。 鼠标事件 click:点击事件(PC:频繁点击N次,触发N次点击事件)单击事件(移动端:30ms内没有发生第二次点击操作,算作单击事件行为,所以click在移动端有300ms延迟) dbclick:双击事件 contextmenu:鼠标右键点击触发 mouse

lly193426的博客 668

事件绑定和普通事件有什么区别

事件绑定和普通事件有什么区别 传统事件绑定和符合W3C标准的事件绑定有什么区别? div1.οnclick=function(){}; 1、如果说给同一个元素绑定了两次或者多次相同类型的事件,那么后面的绑定会覆盖前面的绑定 2、不支持DOM事件流 事件捕获阶段目标元素阶段=>事件冒泡阶段 addEventListener 1、 如果说给同一个元素绑定了两次或者多次相同类型的事件,所以的绑...

CassieCD的博客 725

jQuery事件绑定处理

对于每一个HTML页面的开发,都需要有一个与之配对的js文件,HTML之中只需要定义页面结构即可,所有的数据都要求通过程序动态生成,但是在整个过操作流程里,如果使用最原始的事件处理,会出现一下问题 问题一:JavaScript的原始事件绑定操作:document.getElementById(“元素ID”).addEventListenner(事件类型,回调函数,处理阶段),这样的操作太麻烦了...

青椒盖饭的博客 887

JQuery 事件绑定

文章目录一、JQuery 标准的绑定方式二、on绑定事件/off解除绑定三、事件切换:toggle 一、JQuery 标准的绑定方式 * jq对象.事件方法(回调函数); * 注:如果调用事件方法,不传递回调函数,则会触发浏览器默认行为。 * 表单对象.submit();//让表单提交 <script src="js/jquery-3.3.1.min.js"></s...

南淮北安的博客 479

JavaScript学习13:事件绑定

事件绑定分为两种:一种是传统事件绑定(内联模型、脚本模型),一种是现代事件绑定(DOM2级模型)。现代事件绑定在传统绑定的基础上为我们提供了更强大更方便的功能。         传统事件绑定的问题         因为内联模型很少用,这里不做讨论。先来看一下脚本模型,将一个函数赋值给一个事件处理函数。    var box=document.getElementById('box'); bo

爱技术 爱生活 2115

事件绑定和普通事件有什么区别?

//普通添加事件的方法 var btn = document.getElementById('hello'); btn.onclick = function () { alert(1) // 不执行 } btn.onclick = function () { alert(2) // 执行 } //执行上面的代码只会执行2 //事件绑定添加事件 var btn = docum...

高先生的猫 844

angular移除事件绑定事件绑定_angular 7事件绑定

本文概述Angular方便我们将事件与方法绑定在一起。此过程称为事件绑定。事件绑定与括号()一起使用。我们来看一个例子:@Component({selector: 'app-server2', templateUrl: './server2.component.html', styleUrls: ['./server2.component.css']})export class Server2Co...

weixin_35710941的博客 344
上一篇: Object对象
下一篇: 数组的用法
*初级小白*~
博客等级 码龄7年 24粉丝 108原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值