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 相关文章推荐
番茄的表单验证类代码修改版
Jul 18 Javascript
页面中js执行顺序
Nov 09 Javascript
一个很简单的jquery+xml+ajax的无刷新树结构(无css,后台是c#)
Jun 02 Javascript
jQuery学习笔记之jQuery的DOM操作
Dec 22 Javascript
基于JavaScript实现通用tab选项卡(通用性强)
Jan 07 Javascript
iframe中使用jquery进行查找的方法【案例分析】
Jun 17 Javascript
jQuery on()方法绑定动态元素的点击事件无响应的解决办法
Jul 07 Javascript
JS控制静态页面之间传递参数获取参数并应用的简单实例
Aug 10 Javascript
js 转json格式的字符串为对象或数组(前后台)的方法
Nov 02 Javascript
Express下采用bcryptjs进行密码加密的方法
Feb 07 Javascript
vue2.0实现列表数据增加和删除
Jun 17 Javascript
JS数组索引检测中的数据类型问题详解
Jan 11 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
PHILIPS L4X25T电路分析和打理
2021/03/02 无线电
php strtotime 函数UNIX时间戳
2009/01/14 PHP
twig模板常用语句实例小结
2016/02/04 PHP
Yii2框架实现注册和登录教程
2016/09/30 PHP
ext form 表单提交数据的方法小结
2008/08/08 Javascript
JS支持带x身份证号码验证函数
2008/08/10 Javascript
Firefox中使用outerHTML的2种解决方法
2014/06/07 Javascript
json字符串之间的相互转换示例代码
2014/08/21 Javascript
jQuery调取jSon数据并展示的方法
2015/01/29 Javascript
JavaScritp添加url参数并将参数加入到url中及更改url参数的方法
2015/10/26 Javascript
JS+CSS实现DIV层的展开、收缩效果
2016/01/28 Javascript
利用jQuery实现CheckBox全选/全不选/反选的简单代码
2016/05/31 Javascript
html+js+highcharts绘制圆饼图表的简单实例
2016/08/04 Javascript
jQuery实现的选择商品飞入文本框动画效果完整实例
2016/08/10 Javascript
原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)
2016/10/29 Javascript
JQuery查找子元素find()和遍历集合each的方法总结
2017/03/07 Javascript
ES6下React组件的写法示例代码
2017/05/04 Javascript
Javascript中绑定click事件的四种方式介绍
2018/10/26 Javascript
js数组去重的方法总结
2019/01/18 Javascript
谈谈JavaScript中的函数
2020/09/08 Javascript
一篇超完整的Vue新手入门指导教程
2020/11/18 Vue.js
JS如何监听div的resize事件详解
2020/12/03 Javascript
浅谈Pandas中map, applymap and apply的区别
2018/04/10 Python
python得到windows自启动列表的方法
2018/10/14 Python
深入理解Django自定义信号(signals)
2018/10/15 Python
使用python 写一个静态服务(实战)
2019/06/28 Python
Pytorch模型转onnx模型实例
2020/01/15 Python
Python中的面向接口编程示例详解
2021/01/17 Python
制药工程专业个人求职自荐信
2014/01/25 职场文书
运动会通讯稿100字
2014/01/31 职场文书
暑期社会实践先进个人主要事迹
2014/05/22 职场文书
企业文化理念标语
2014/06/10 职场文书
2015年度酒店客房部工作总结
2015/05/25 职场文书
母亲节感言
2015/08/03 职场文书
CSS 实现多彩、智能的阴影效果
2021/05/12 HTML / CSS
python实现双向链表原理
2022/05/25 Python