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 相关文章推荐
关于 文本框默认值 的操作js代码
Jan 12 Javascript
自己编写的类似JS的trim方法
Oct 09 Javascript
javascript获取select的当前值示例代码(兼容IE/Firefox/Opera/Chrome)
Dec 17 Javascript
js中函数声明与函数表达式
Jun 03 Javascript
使用jQuery mobile库检测url绝对地址和相对地址的方法
Dec 04 Javascript
原生js实现轮播图
Feb 27 Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
Mar 06 Javascript
JS实现求数组起始项到终止项之和的方法【基于数组扩展函数】
Jun 13 Javascript
深入浅出 Vue 系列 -- 数据劫持实现原理
Apr 23 Javascript
Preload基础使用方法详解
Feb 03 Javascript
如何编写一个 Webpack Loader的实现
Oct 18 Javascript
Vue使用Ref跨层级获取组件的步骤
Jan 25 Vue.js
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获取Google AJAX Search API 数据的代码
2010/03/12 PHP
php中mysql操作buffer用法详解
2015/03/19 PHP
PHP的Yii框架中YiiBase入口类的扩展写法示例
2016/03/17 PHP
在Thinkphp中使用ajax实现无刷新分页的方法
2016/10/25 PHP
TP - 比RBAC更好的权限认证方式(Auth类认证)
2021/03/09 PHP
js 多浏览器分别判断代码
2010/04/01 Javascript
jquery获得同源iframe内body下标签的值的方法
2014/09/25 Javascript
PhotoShop给图片自动添加边框及EXIF信息的JS脚本
2015/02/15 Javascript
asp知识整理笔记3(问答模式)
2015/09/27 Javascript
jQuery插件实现静态HTML验证码校验
2015/11/06 Javascript
实例讲解JavaScript的Backbone.js框架中的View视图
2016/05/05 Javascript
原生JS实现网络彩票投注效果
2016/09/25 Javascript
JavaScript基础心法 深浅拷贝(浅拷贝和深拷贝)
2018/03/05 Javascript
Vue路由管理器Vue-router的使用方法详解
2020/02/05 Javascript
Python学习笔记(二)基础语法
2014/06/06 Python
python3.4用循环往mysql5.7中写数据并输出的实现方法
2017/06/20 Python
flask-restful使用总结
2018/12/04 Python
pyqt5 使用label控件实时显示时间的实例
2019/06/14 Python
python爬虫之爬取百度音乐的实现方法
2019/08/24 Python
如何对python的字典进行排序
2020/06/19 Python
Pandas替换及部分替换(replace)实现流程详解
2020/10/12 Python
html5小技巧之通过document.head获取head元素
2014/06/04 HTML / CSS
澳大利亚排名第一的狂热牛仔品牌:ONETEASPOON
2018/11/20 全球购物
大学生2014全国两会学习心得体会
2014/03/10 职场文书
个人函授自我鉴定
2014/03/25 职场文书
财产公证书
2014/04/10 职场文书
《蚕姑娘》教学反思
2014/04/15 职场文书
实习报告评语
2014/04/26 职场文书
爱岗敬业演讲稿
2014/05/05 职场文书
项目负责人任命书
2014/06/04 职场文书
学习张丽丽心得体会
2014/09/03 职场文书
2014年办公室文员工作总结
2014/11/12 职场文书
2015社区六五普法工作总结
2015/04/21 职场文书
2019公司管理制度
2019/04/19 职场文书
MYSQL(电话号码,身份证)数据脱敏的实现
2021/05/28 MySQL
Netty结合Protobuf进行编解码的方法
2021/06/26 Java/Android