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 相关文章推荐
根据分辨率不同,调用不同的css文件
Jul 07 Javascript
Javascript实现的分页函数
Dec 22 Javascript
editable.js 基于jquery的表格的编辑插件
Oct 24 Javascript
jQuery对象的length属性用法实例
Dec 27 Javascript
jQuery构造函数init参数分析
May 13 Javascript
购物车前端开发(jQuery和bootstrap3)
Aug 27 Javascript
JS 对java返回的json格式的数据处理方法
Dec 05 Javascript
js实现轮播图的完整代码
Oct 26 Javascript
javascript自定义日期比较函数用法示例
Jul 22 Javascript
jQuery 查找元素操作实例小结
Oct 02 jQuery
使用原生JS实现火锅点餐小程序(面向对象思想)
Dec 10 Javascript
详解node.js 事件循环
Jul 22 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
上海地方志办公室-上海电子仪表工业志
2021/03/04 无线电
PHP5.5.15+Apache2.4.10+MySQL5.6.20配置方法分享
2016/05/06 PHP
Yii框架批量插入数据扩展类的简单实现方法
2017/05/23 PHP
prototype.js的Ajax对象
2006/09/23 Javascript
splice slice区别
2006/10/09 Javascript
理清apply(),call()的区别和关系
2011/08/14 Javascript
关于ExtJS4.1:快捷键支持的问题
2013/04/24 Javascript
Java遍历集合方法分析(实现原理、算法性能、适用场合)
2016/04/25 Javascript
angularjs实现分页和搜索功能
2018/01/03 Javascript
jQuery实现判断上传图片类型和大小的方法示例
2018/04/11 jQuery
vue iview实现动态路由和权限验证功能
2018/04/17 Javascript
浅谈vue项目可以从哪些方面进行优化
2018/05/05 Javascript
elementUI 动态生成几行几列的方法示例
2019/07/11 Javascript
如何在现代JavaScript中编写异步任务
2021/01/31 Javascript
[06:13]DOTA2进化论(修改版)
2013/10/08 DOTA
Python使用迭代器打印螺旋矩阵的思路及代码示例
2016/07/02 Python
Python脚本实时处理log文件的方法
2016/11/21 Python
轻松理解Python 中的 descriptor
2017/09/15 Python
python中的不可变数据类型与可变数据类型详解
2018/09/16 Python
Python自定义一个类实现字典dict功能的方法
2019/01/19 Python
Python中常用的8种字符串操作方法
2019/05/06 Python
Django发送邮件功能实例详解
2019/09/02 Python
Python CSS选择器爬取京东网商品信息过程解析
2020/06/01 Python
基于Python下载网络图片方法汇总代码实例
2020/06/24 Python
浅析图片上传及canvas压缩的流程
2020/06/10 HTML / CSS
程序员经常用到的UNIX命令
2015/04/13 面试题
出纳岗位职责模板
2013/11/27 职场文书
2014年教研活动总结范文
2014/04/26 职场文书
怀念母亲教学反思
2014/04/28 职场文书
新颖的化妆品活动方案
2014/08/21 职场文书
党员四风剖析材料
2014/08/27 职场文书
幽默导游词开场白
2015/05/29 职场文书
2016元旦主持人开场白
2015/12/03 职场文书
分享几个JavaScript运算符的使用技巧
2021/04/24 Javascript
CKAD认证中部署k8s并配置Calico插件
2022/03/31 Servers
windows server2016安装oracle 11g的图文教程
2022/07/15 Servers