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 相关文章推荐
asp.net+js 实现无刷新上传解析csv文件的代码
May 17 Javascript
Safari5中alert的无限循环BUG
Apr 07 Javascript
javascript检查表单数据是否改变的方法
Jul 30 Javascript
createTextRange()的使用示例含文本框选中部分文字内容
Feb 24 Javascript
基于jQuery实现拖拽图标到回收站并删除功能
Nov 25 Javascript
javascript制作照片墙及制作过程中出现的问题
Apr 04 Javascript
JS监控关闭浏览器操作的实例详解
Sep 12 Javascript
JS加密插件CryptoJS实现的DES加密示例
Aug 16 Javascript
浅谈webpack4.x 入门(一篇足矣)
Sep 05 Javascript
原生JS实现列表内容自动向上滚动效果
May 22 Javascript
js实现移动端吸顶效果
Jan 08 Javascript
JavaScript 数组去重详解
Sep 15 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 dirname(__FILE__) 获取当前文件的绝对路径
2011/06/28 PHP
php中用于检测一个地理IP地址是否可用的代码
2012/02/19 PHP
解决ajax+php中文乱码的方法详解
2013/06/09 PHP
php网站判断用户是否是手机访问的方法
2013/11/01 PHP
PHP中include()与require()的区别说明
2017/02/14 PHP
php基于session锁防止阻塞请求的方法分析
2017/08/07 PHP
解决laravel(5.5)访问public报错的问题
2019/10/12 PHP
使用IE6看老赵的博客 jQuery初探
2010/01/17 Javascript
jquery 插件学习(六)
2012/08/06 Javascript
输入自动提示搜索提示功能的javascript:sugggestion.js
2013/09/02 Javascript
关于JS数组追加数组采用push.apply的问题
2014/06/09 Javascript
jQuery中removeAttr()方法用法实例
2015/01/05 Javascript
原生JS实现仿淘宝网左侧商品分类菜单效果代码
2015/09/10 Javascript
javascript常用经典算法实例详解
2015/11/25 Javascript
轻松掌握JavaScript中的Math object数学对象
2016/05/26 Javascript
jQuery模拟完美实现经典FLASH导航动画效果【附demo源码下载】
2016/11/09 Javascript
javascript中的try catch异常捕获机制用法分析
2016/12/14 Javascript
Angular.js中ng-include用法及多标签页面的实现方式详解
2017/05/07 Javascript
ajax +NodeJS 实现图片上传实例
2017/06/06 NodeJs
详解用webpack把我们的业务模块分开打包的方法
2017/07/20 Javascript
Vue项目中如何使用Axios封装http请求详解
2019/10/23 Javascript
JS数组方法shift()、unshift()用法实例分析
2020/01/18 Javascript
Vue数据双向绑定原理实例解析
2020/05/15 Javascript
react+antd 递归实现树状目录操作
2020/11/02 Javascript
Python装饰器实现几类验证功能做法实例
2017/05/18 Python
python针对excel的操作技巧
2018/03/13 Python
使用python实现unix2dos和dos2unix命令的例子
2019/08/13 Python
python实现连连看游戏
2020/02/14 Python
Wedgwood英国官方网站:英式精致骨瓷餐具、礼品与生活精品,源于1759年
2019/09/02 全球购物
瑞士最大的图书贸易公司:Orell Füssli
2019/12/28 全球购物
什么是静态路由,其特点是什么?什么是动态路由,其特点是什么?
2013/07/26 面试题
《尊严》教学反思
2014/02/11 职场文书
个性与发展自我评价
2014/02/11 职场文书
三好学生先进事迹材料
2014/08/28 职场文书
上党课的心得体会
2014/09/02 职场文书
Python基础知识之变量的详解
2021/04/14 Python