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 相关文章推荐
动态创建的表格单元格中的事件实现代码
Dec 30 Javascript
jquery插件珍藏(图片局部放大/信息提示框)
Jan 08 Javascript
angularjs指令中的compile与link函数详解
Dec 06 Javascript
node.js中的events.EventEmitter.listenerCount方法使用说明
Dec 08 Javascript
html的DOM中document对象anchors集合用法实例
Jan 21 Javascript
Node.js node-schedule定时任务隔多少分钟执行一次的方法
Feb 10 Javascript
javascript实现英文首字母大写
Apr 23 Javascript
分享一些常用的jQuery动画事件和动画函数
Nov 27 Javascript
实例详解带参数的 npm script
May 28 Javascript
JavaScript中的全局属性与方法深入解析
Jun 14 Javascript
js实现从右往左匀速显示图片(无缝轮播)
Jun 29 Javascript
微信小程序APP页面的之间的相互传递参数以及自定义组件
Apr 19 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中可以自动分割查询字符的Parse_str函数使用示例
2014/07/25 PHP
PHP实现简单数字分页效果
2015/07/26 PHP
PHP+Mysql+jQuery实现发布微博程序 php篇
2015/10/15 PHP
javascript学习笔记(二十) 获得和设置元素的特性(属性)
2012/06/20 Javascript
jQuery图片的展开和收缩实现代码
2013/04/16 Javascript
javascript读写XML实现广告轮换(兼容IE、FF)
2013/08/09 Javascript
JS获取文本框,下拉框,单选框的值的简单实例
2014/02/26 Javascript
不到30行JS代码实现Excel表格的方法
2014/11/15 Javascript
浅谈javascript对象模型和function对象
2014/12/26 Javascript
JavaScript实现节点的删除与序号重建实例
2015/08/05 Javascript
JavaScript实现的圆形浮动标签云效果实例
2015/08/06 Javascript
jQuery弹簧插件编写基础之“又见弹窗”
2015/12/11 Javascript
微信小程序  生命周期详解
2016/10/27 Javascript
Bootstrap整体框架之CSS12栅格系统
2016/12/15 Javascript
canvas 实现中国象棋
2017/02/17 Javascript
详解Vuex中mapState的具体用法
2017/09/28 Javascript
JS/HTML5游戏常用算法之碰撞检测 地图格子算法实例详解
2018/12/12 Javascript
JQuery属性操作与循环用法示例
2019/05/15 jQuery
laydate只显示时分 不显示秒的功能实现方法
2019/09/28 Javascript
javascript实现移动端红包雨页面
2020/06/23 Javascript
详解Python中的序列化与反序列化的使用
2015/06/30 Python
python中 chr unichr ord函数的实例详解
2017/08/06 Python
Windows下Anaconda2安装NLTK教程
2018/09/19 Python
pycharm 配置远程解释器的方法
2018/10/28 Python
对python捕获ctrl+c手工中断程序的两种方法详解
2018/12/26 Python
解决python3运行selenium下HTMLTestRunner报错的问题
2018/12/27 Python
python3 实现爬取TOP500的音乐信息并存储到mongoDB数据库中
2019/08/24 Python
pygame实现俄罗斯方块游戏(基础篇1)
2019/10/29 Python
浅谈Python xlwings 读取Excel文件的正确姿势
2021/02/26 Python
香蕉共和国加拿大官网:Banana Republic加拿大
2018/08/06 全球购物
大学毕业后的十年规划
2014/01/07 职场文书
上班早退检讨书
2014/01/09 职场文书
2014年干部作风建设总结
2014/10/23 职场文书
2015年校长新年寄语
2014/12/08 职场文书
投标售后服务承诺书
2015/04/29 职场文书
Python文件的操作示例的详细讲解
2021/04/08 Python