Js on及addEventListener原理用法区别解析


Posted in Javascript onJuly 11, 2020

一.首先介绍两者的用法:

1.on的用法:以onclick为例

第一种:

obj.onclick = function(){
//do something..
}

第二种:

obj.onclick= fn;
function fn (){
//do something...
}

第三种:当函数fn有参数的情况下使用匿名函数来传参:

obj.onclick = function(){fn(param)};
function fn(param){
//do something..
}

不能够这样写:错误写法:obj.onclick= fn(param):

因为这样写函数会立即执行,不会等待点击触发,特别注意一下

2.addEventListener的用法:

形式:

addEventListener(event,funtionName,useCapture)

参数:

  • event:事件的类型如 “click”
  • funtionName:方法名
  • useCapture(可选):布尔值,指定事件是否在捕获或冒泡阶段执行。
  • true - 事件句柄在捕获阶段执行
  • false- false- 默认。事件句柄在冒泡阶段执行

写法:

第一种:

obj.addEventListener("click",function(){
//do something
}));

第二种,没参数可以直接写函数名

obj.addEventListener("click",fn,fasle));
function fn(){
//do something..
}

第三种:函数有参数时需要使用匿名函数来传递参数

obj.addEventListener("click",function(){fn(parm)},false);

二.两者的区别

1.on事件会被后面的on的事件覆盖

以onclick为例:

//obj是一个dom对象,下同//注册第一个点击事件
obj.onclick(function(){
alert("hello world");
});
//注册第二个点击事件
obj.onclick(function(){
alert("hello world too");
});

最终会只有弹框输出:

hello world too

2.addEventListener 则不会覆盖。

//注册第一个点击事件
obj.addEventListener("click",function(){
alert("hello world");
}));
//注册第二个点击事件
obj.addEventListener("click",function(){
alert("hello world too");
}));

这样会连续输出:

hello world
hello world too

三.addEventListener注意事项:

1.特别说明addEventListener不被IE9以下兼容,IE9以下用使用attachEvent()

obj.attachEvent(event,funtionName);

参数:

event:事件类型(需要写成“onclick”前面加on,这个与addEventListener不同)

funtionName:方法名(要参数是也是需要使用匿名函数来传参)

四.事件集合:

1.鼠标事件:

  • click(单击)
  • dbclick(双击)
  • mousedown(鼠标按下)
  • mouseout(鼠标移走)
  • mouseover(鼠标移入)
  • mouseup(鼠标弹起)
  • mousemove(鼠标移动)

2.键盘事件:

  • keydown(键按下)
  • keypress(按键)
  • keyup(键起来)
  • 3.HTML事件:
  • load(加载页面)
  • unload(卸载离开页面)
  • change(改变内容)
  • scroll(滚动)
  • focus(获得焦点)
  • blur(失去焦点)

五.总结:

onXXX与addEventListener都是为dom元素添加事件监听,使其在事件发生后执行相应的代码,操作。有了它们我们实现了页面与用户交互。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript倒计时页面跳转实例小结
Sep 11 Javascript
js实现通用的微信分享组件示例
Mar 10 Javascript
图片放大镜jquery.jqzoom.js使用实例附放大镜图标
Jun 19 Javascript
JS实现当前页居中分页效果的方法
Jun 18 Javascript
jquery pagination分页插件使用详解(后台struts2)
Jan 22 Javascript
Vue插件写、用详解(附demo)
Mar 20 Javascript
HTML5实现微信拍摄上传照片功能
Apr 21 Javascript
JavaScript数据结构之单链表和循环链表
Nov 28 Javascript
使用socket.io制做简易WEB聊天室
Jan 02 Javascript
angular4笔记系列之内置指令小结
Nov 09 Javascript
微信小程序常用赋值方法小结
Apr 30 Javascript
vue实现购物车功能(商品分类)
Apr 20 Javascript
JS call()及apply()方法使用实例汇总
Jul 11 #Javascript
JS如何定义用字符串拼接的变量
Jul 11 #Javascript
基于原生js实现判断元素是否有指定class名
Jul 11 #Javascript
详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)
Jul 11 #Javascript
详解element-ui 表单校验 Rules 配置 常用黑科技
Jul 11 #Javascript
uniapp,微信小程序中使用 MQTT的问题
Jul 11 #Javascript
VSCode 配置uni-app的方法
Jul 11 #Javascript
You might like
使用php将某个目录下面的所有文件罗列出来的方法详解
2013/06/21 PHP
PHP实现的oracle分页函数实例
2016/01/25 PHP
php的laravel框架快速集成微信登录的方法
2016/12/12 PHP
laravel 修改记住我功能的cookie保存时间的方法
2019/10/14 PHP
php设计模式之正面模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
JQuery学习笔记 nt-child的使用
2011/01/17 Javascript
jquery插件开发之实现google+圈子选择功能
2014/03/10 Javascript
jQuery实现漂亮实用的商品图片tips提示框效果(无图片箭头+阴影)
2016/04/16 Javascript
javascirpt实现2个iframe之间传值的方法
2016/06/30 Javascript
jQuery动态创建元素以及追加节点的实现方法
2016/10/20 Javascript
jQuery编写设置和获取颜色的插件
2017/01/09 Javascript
Ionic + Angular.js实现图片轮播的方法示例
2017/05/21 Javascript
详解用node编写自己的cli工具
2017/05/23 Javascript
hammer.js实现图片手势放大效果
2017/08/29 Javascript
javascript设计模式 ? 中介者模式原理与用法实例分析
2020/04/20 Javascript
vue-iview动态新增和删除的方法
2020/06/17 Javascript
Tornado Web服务器多进程启动的2个方法
2014/08/04 Python
Python中的localtime()方法使用详解
2015/05/22 Python
利用 Monkey 命令操作屏幕快速滑动
2016/12/07 Python
Python实现的弹球小游戏示例
2017/08/01 Python
python编程实现随机生成多个椭圆实例代码
2018/01/03 Python
对Python中type打开文件的方式介绍
2018/04/28 Python
python3获取当前目录的实现方法
2019/07/29 Python
浅谈keras中自定义二分类任务评价指标metrics的方法以及代码
2020/06/11 Python
java关于string最常出现的面试题整理
2021/01/18 Python
实例讲解CSS3中Transform的perspective属性的用法
2016/04/22 HTML / CSS
CSS3实现歌词进度文字颜色填充变化动态效果的思路详解
2020/06/02 HTML / CSS
Foot Locker英国官网:美国知名运动产品零售商
2019/02/21 全球购物
幼儿园义卖活动方案
2014/01/17 职场文书
幼儿教师考核制度
2014/01/25 职场文书
文明青少年标兵事迹材料
2014/01/28 职场文书
策划总监岗位职责
2014/02/16 职场文书
2014年学生会工作总结
2014/11/07 职场文书
教师外出学习心得体会
2016/01/18 职场文书
《丑小鸭》教学反思
2016/02/19 职场文书
MySQL分布式恢复进阶
2022/07/23 MySQL