解析Json及addEventListener原理用法的区别
一.首先介绍两者的用法:
创新互联服务项目包括方山网站建设、方山网站制作、方山网页制作以及方山网络营销策划等。多年来,我们专注于互联网行业,利用自身积累的技术优势、行业经验、深度合作伙伴关系等,向广大中小型企业、政府机构等提供互联网行业的解决方案,方山网站推广取得了明显的社会效益与经济效益。目前,我们服务的客户以成都为中心已经辐射到方山省份的部分城市,未来相信会继续扩大服务区域并继续获得客户的支持与信任!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视频教程
文章题目:解析Json及addEventListener原理用法的区别
本文来源:http://scyanting.com/article/cjeoog.html