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 相关文章推荐
document.write()及其输出内容的样式、位置控制
Aug 12 Javascript
jquery链式操作的正确使用方法
Jan 06 Javascript
javascript自定义函数参数传递为字符串格式
Jul 29 Javascript
JavaScript驾驭网页-CSS与DOM
Mar 24 Javascript
bootstrap 模态框(modal)实现水平垂直居中显示
Jan 23 Javascript
很棒的vue弹窗组件
May 24 Javascript
JS非空验证及邮箱验证的实例
Aug 11 Javascript
JavaScript 中的12种循环遍历方法【总结】
May 31 Javascript
bootstrap自定义样式之bootstrap实现侧边导航栏功能
Sep 10 Javascript
深入理解 Koa 框架中间件原理
Oct 18 Javascript
JS如何实现封装列表右滑动删除收藏按钮
Jul 23 Javascript
vue+element-ui JYAdmin后台管理系统模板解析
Jul 28 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原理的opcodes(操作码)
2010/10/26 PHP
浅谈php和js中json的编码和解码
2016/10/24 PHP
PHP XML和数组互相转换详解
2016/10/26 PHP
PHP 获取指定地区的天气实例代码
2017/02/08 PHP
PHP-FPM和Nginx的通信机制详解
2019/02/01 PHP
关于laravel框架中的常用目录路径函数
2019/10/23 PHP
jQuery 学习6 操纵元素显示效果的函数
2010/02/07 Javascript
计算世界完全对称日的js代码,粗糙版
2011/11/04 Javascript
Json和Jsonp理论实例代码详解
2013/11/15 Javascript
键盘上一张下一张兼容IE/google/firefox等浏览器
2014/01/28 Javascript
Internet Explorer 11 浏览器介绍:别叫我IE
2014/09/28 Javascript
Javascript代码实现仿实例化类
2015/04/03 Javascript
BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)
2016/07/07 Javascript
bootstrap table表格客户端分页实例
2017/08/07 Javascript
element 结合vue 在表单验证时有值却提示错误的解决办法
2018/01/22 Javascript
AngularJS 监听变量变化的实现方法
2018/10/09 Javascript
vue-router权限控制(简单方式)
2018/10/29 Javascript
[02:09]DOTA2辉夜杯 EHOME夺冠举杯现场
2015/12/28 DOTA
Python下的twisted框架入门指引
2015/04/15 Python
python中使用xlrd读excel使用xlwt写excel的实例代码
2018/01/31 Python
浅谈python连续赋值可能引发的错误
2018/11/10 Python
python3使用QQ邮箱发送邮件
2020/05/20 Python
Pandas实现dataframe和np.array的相互转换
2019/11/30 Python
python 控制台单行刷新,多行刷新实例
2020/02/19 Python
利用python实现凯撒密码加解密功能
2020/03/31 Python
使用pymysql查询数据库,把结果保存为列表并获取指定元素下标实例
2020/05/15 Python
CSS3中设置3D变形的transform-style属性详解
2016/05/23 HTML / CSS
库存图片、照片、矢量图、视频和音乐:Shutterstock
2021/02/12 全球购物
甜品店的创业计划书范文
2014/01/02 职场文书
中医专业职业生涯规划书范文
2014/01/04 职场文书
高中军训感想300字
2014/03/04 职场文书
1亿有多大教学反思
2014/05/01 职场文书
传播学专业毕业生自荐书
2014/07/01 职场文书
销售工作决心书
2015/02/04 职场文书
go语言中http超时引发的事故解决
2021/06/02 Golang
关于MybatisPlus配置双数据库驱动连接数据库问题
2022/01/22 Java/Android