132、js中事件绑定的几种方式

news/2024/7/11 1:50:46 标签: jquery, javascript

一、事件有三个阶段:

  1. 事件捕获阶段-----由外向里
  2. 事件目标阶段-----最开始选中的那个,但是不一定是最先出现的,根据是那个阶段而定
  3. 事件冒泡阶段-----由里向外

二、绑定方式有哪些?

DOM和jQuery当中都有

  • DOM中:

(1)onclick。 对象.on事件名字=事件处理函数----------如果是多个相同事件注册用这种方式,最后一个执行,之前的会被覆盖掉;

javascript">my$("ID名字").οnclick=function( ){ };

(2)对象.addEventListener("没有on的事件名字",事件处理函数,冒泡传递false/捕获传递true);

javascript">my$("ID名字").addEventListener("click",function( ){ },false);

(3)对象.attachEvent("有on的事件的名字",事件处理函数);

javascript">my$("ID名字").attachEvent("onclick",function( ){ });

三、绑定事件的区别: 

  • addEventListener 和 onclick的区别

(1)一个onclick处理器在同一时间只能指向唯一的对象。因此就算对于同一对象绑定了多次,但是只有最后的一次绑定生效。下图,虽然绑定了两次,只会弹出一个弹出框:‘我是click2’;

 

(2)addEventListener对于同一对象两次绑定的事件,都能够成功运行,也就是前后弹出 ‘我是addEvent1’ '我是'addEvent2'。故对于一个可以绑定的事件对象,想绑定的多次事件都能运行,选用addEventListener。

(3)addEventListener对任何DOM都是有效的,而onclick仅限于HTML;

(4)addEventListener可以控制listener的触发阶段(捕获/冒泡);
 

  • addEventListener 和 attachEvent 的区别

(1)相同点:都可以为元素绑定事件

(2)不同点:

  • 方法名不一样
  • 参数个数不一样addEventListener三个参数,attachEvent两个参数
  • addEventListener 谷歌、火狐都支持IE8不支持 ;attachEvent 谷歌火狐都不支持,IE8支持
  • this不同,addEventListener 中的this是当前绑定事件的对象attachEvent中的this指的是window
  • addEventListener中的事件的类型(事件的名字)没有on ,attachEvent 中的事件的类型(事件的名字)有on


http://www.niftyadmin.cn/n/1022350.html

相关文章

90、快手---机器人的运动范围

一、题目 地上有一个m行n列的方格,从坐标 [0,0] 到坐标 [m-1,n-1] 。一个机器人从坐标 [0, 0] 的格子开始移动,它每次可以向左、右、上、下移动一格(不能移动到方格外),也不能进入行坐标和列坐标的数位之和大于k的格子…

xtrabackup 备份恢复

XtraBackup物理备份 Percona XtraBackup是世界上唯一的开源,免费的MySQL热备份软件,为InnoDB和XtraDB 数据库执行非阻塞备份。使用Percona XtraBackup,可以实现以下优势: 快速可靠地完成的备份 备份期间的不间断事务处理 节省磁…

133、v-model的原理

vue的v-model原理简述_逆风的蔷薇-CSDN博客

查出/tmp的权限,以数字方式显示

看到群里朋友问了这么个问题,闲着没事想了想 思路: 查看目录权限最常用的命令是ls -ld和stat 执行 ls -ld /tmp得到的结果如下: [01:41:09 rootubuntu ~]#ls -ld /tmp drwxrwxrwt 11 root root 4096 Jul 13 01:41 /tmp看到drwxrwxrwx脑子里是可以反映出1777的数字权限,但没…

[置顶] 制作开机LOGO就是这么简单!

转自: http://mp.weixin.qq.com/s?__bizMzAxNTAyOTczMw&mid2649328522&idx1&sn64107695fef34ba48f04a78be7a37951&chksm83976f00b4e0e61629f6f38a4868727bbd1f333a3bb43f0d1303adeb5fa3bb2d6b00f61e35df&mpshare1&scene23&srcid0612vT…

91、快手--去除3个及以上重复的字符

题目:去除数组中3个及以上相邻的0 const data [1, 2, 3, 0, 0, 0, 5, 2, 0, 1, 0, 0, 2]; //去除三个及以上相邻的0 //返回结果:[1,2,3,5,2,0,1,0,0,2] //去除三个及以上相邻的0const data [1, 2,0,0, 3, 0, 0, 0,0, 5, 2, 0, 1, 0, 0, 0]; // [1, …

92、快手---作用域输出问题

// 问题一 var count 10;function a() {return count 10; }function b() {var count 20;return a(); }console.log(b()); //20// 问题二 var a [1, 2, 3, 4]; function set(a) {a [5, 6, 7, 8]; } set(a); console.log(a); //[1,2,3,4]var a [1, 2, 3, 4]; function set(…

pikachu靶场通关之暴力破解

暴力破解 攻击者在不知道目标系统的账号密码的情况下,一种对目标系统尝试性的登录 连续性尝试字典自动化 字典 一个有效的字典,可以大大提高暴力破解的效率 字典会在下篇文章分享 如果一个网站没有对登录接口实施防暴力破解的措施,或者实施了不合理…