Js之on和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元素添加事件监听,使其在事件发生后执行相应的代码,操作。有了它们我们实现了页面与用户交互。
 

作者:Ry-yuan

本文是个人总结得出。
转载请标明出处,本文地址:http://www.cnblogs.com/Ry-yuan/p/6865632.html
 

JavsScript--on与addEventListener的使用与两者的不同的更多相关文章

  1. Dom addEventlistener与id 绑定事件的区别(续)

    addEventListener 第三个参数为 useCapture. 以一个例子说明. <div id="div1" style="background: blu ...

  2. dom addeventlistener与id 绑定事件的区别

    文档中有写. //addEventListener() 方法用于向指定元素添加事件句柄. //提示: 使用 removeEventListener() 方法来移除 addEventListener() ...

  3. 兼容8事件绑定与解绑addEventListener、removeEventListener和ie的attachEvent、detachEvent

    兼容8事件绑定与解绑addEventListener.removeEventListener和ie的attachEvent.detachEvent   ;(function(){ // 事件绑定 bi ...

  4. addEventListener详解

    为什么需要addEventListener? 先来看一个片段: html代码 <div id="box">追梦子</div> 用on的代码 window.o ...

  5. Javascript中addEventListener和attachEvent的区别

    在利用javascript为DOM Element添加事件处理程序时,如果要想下兼容IE6,7时,就不得不考虑addEventListener与attachEvent的异同. 1.首先说下addEve ...

  6. JavsScript+dom

    JavsScript+dom DOM(兼容性) 用于操作文档树 1.帮助我们找到标签 直接查找 间接查找 getElementById getElementsByTageName 2.标签操作 内容: ...

  7. addEventListener和attachEvent的区别

    addEventListener共有3个参数,如下所示:element.addEventListener(type,listener,useCapture); 参数 参数说明 element 要绑定事 ...

  8. addEventListener 的另类写法

    addEventListener 参数如下 addEventListener(type, listener[, useCapture]); type,事件名称 listener,事件处理器 useCa ...

  9. [No00006A]Js的addEventListener()及attachEvent()区别分析【js中的事件监听】

    1.添加时间监听: Chrom中: addEventListener的使用方式: target.addEventListener(type, listener, useCapture); target ...

  10. js中addEventListener中第3个参数

    addEventListener中的第三个参 数是useCapture, 一个bool类型.当为false时为冒泡获取(由里向外),true为capture方式(由外向里). <div id=& ...

随机推荐

  1. python3模块: json & pickle

    概念: 序列化(Serialization): 将对象的状态信息转换为可以存储或可以通过网络传输的过程,传输的格式可以是JSON,XML等.反序列化就是从存储区域(JSON,XML)读取反序列化对象的 ...

  2. OS之进程管理---孤儿进程和僵尸进程

    僵尸进程 当一个进程终止时,操作系统会释放其资源,不过它位于进程表中的条目还是在的,直到它的父进程调用wait():这是因为进程表中包含了进程的退出状态.当进程已经终止,但是其父进尚未调用wait() ...

  3. RabbitMQ和Kafka对比以及场景使用说明

    我目前的项目最后使用的是RabbitMQ,这里依然是结合网上大神们的优秀博客,对kafka和rabbitmq进行简单的比对.最后附上参考博客. 1.架构模型 rabbitmq RabbitMQ遵循AM ...

  4. 使用SMTP发送邮件

    先定义一个邮件实体: public class EntityMail { /// <summary> /// 发件人 /// </summary> public string ...

  5. Tomcat 访问manager app报403 解决方案(虚拟机可以正常使用,外面访问报错)

    虚拟机中Tomcat启动后,可以访问项目(虚拟机里面和外面都可以).虚拟机中能够正常进入manager app进行热部署工作,但是在外面能访问tomcat首页,点击manager app报403错误. ...

  6. 《垃圾回收的算法与实现》——GC标记-清除算法

    基本算法 标记-清除算法由 ==标记阶段== 和 ==清除阶段== 构成. 标记即将所有活动的对象打上标记. 清除即将那些没有标记的对象进行回收. 标记与清除 遍历GC root引用,递归标记(设置对 ...

  7. 微服务Kong(十)——负载均衡参考

    KONG为请求多个后端服务提供了多种负载均衡方案:一种是简单的基于DNS,另一种是更加动态的环形均衡器,他在不需要DNS服务器的情况下也允许服务注册. 一.基于DNS的负载均衡 当使用基于DNS的负载 ...

  8. Centos 安装python3

    安装python3 大多数云平台没有安装zlib和openssl的devel包,需要提前安装   下载python源码 cd /home/cheat wget https://www.python.o ...

  9. Linux-(kill,wc,killall,ln,cal,date)

    kill命令 1.命令格式: kill [参数] [进程号] 2.命令功能: 发送指定的信号到相应进程.不指定型号将发送SIGTERM(15)终止指定进程.如果仍无法终止该程序可用“-KILL” 参数 ...

  10. jQuery为图片添加链接(创建新的元素来包裹选中的元素)

    主要用到 wrap()函数 http://www.w3school.com.cn/jquery/manipulation_wrap.asp 这个函数是创建新的的元素去包裹所执行这个方法的元素 如下例子 ...