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. c malloc分配内存

    php中的内存分配有用类似emalloc这样的函数,emalloc实际上是C语言中的malloc的一层封装,php启动后,会向OS申请一块内存,可以理解为内存池,以后的php分配内存都是在这块内存池中 ...

  2. Java的GC

    垃圾收集 在探究Jvm的过程中,有两个点特别需要关注,一是:内存的使用,分配策略,而这一点是在前一篇博客已经介绍过了. 二是:内存的回收.也就是这一篇博客所要探究的关键点. 内存回收需要关注的几个点: ...

  3. 屏蔽百度及其广告的部分Host

    127.0.0.44 www.baidu.com127.0.0.44 cpro.baidu.com127.0.0.44 hm.baidu.com127.0.0.44 bdimg.share.baidu ...

  4. Spring 事务传播行为实验

    一.Propagation : key属性确定代理应该给哪个方法增加事务行为.这样的属性最重要的部份是传播行为.有以下选项可供使用: PROPAGATION_REQUIRED--支持当前事务,如果当前 ...

  5. (转)支持Multi Range Read索引优化

    支持Multi Range Read索引优化 原文:http://book.51cto.com/art/201701/529465.htm http://book.51cto.com/art/2016 ...

  6. python——利用selenium模仿键盘输入跳转

    这是我以前遇到的一个网站:人卫临床助手,这个网站比较奇怪,不能点击右键查看源码,但是大家可以使用ctrl+U,打开开发者选项,点击network,然后点击第2页和第3页: 可以看到上面的URL是一模一 ...

  7. hadoop2.x 安装配置

    hadoop2.x在系统架构上与hadoop1.x有很大的变化 原文地址: http://www.ibm.com/developerworks/cn/opensource/os-cn-hadoop-y ...

  8. 【链表】Reorder List

    题目: Given a singly linked list L: L0→L1→…→Ln-1→Ln,reorder it to: L0→Ln→L1→Ln-1→L2→Ln-2→… You must do ...

  9. Kubernetes+Flannel 环境中部署HBase集群

    2015-12-14注:加入新节点不更改运行节点参数需求已满足,将在后续文章中陆续总结. 注:目前方案不满足加入新节点(master节点或regionserver节点)而不更改已运行节点的参数的需求, ...

  10. Go语言学习笔记八: 数组

    Go语言学习笔记八: 数组 数组地球人都知道.所以只说说Go语言的特殊(奇葩)写法. 我一直在想一个人参与了两种语言的设计,但是最后两种语言的语法差异这么大.这是自己否定自己么,为什么不与之前统一一下 ...