JavaScript之onXXXX事件和addEventListener的区别

时间:2022-09-04 21:07:08

JavaScript之onXXXX事件和addEventListener的区别

1.首先介绍两者的用法:
1.1onXXXX的用法:以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):
因为这样写函数会立即执行,不会等待点击触发,特别注意一下
 
1.2addEventListener的用法:
形式:addEventListener(event,funtionName,useCapture)
参数:
event:事件的类型如 “click”
funtionName:方法名
useCapture(可选):布尔值,指定事件是否在捕获或冒泡阶段执行。
    • true - 事件句柄在捕获阶段执行
    • false- false- 默认。事件句柄在冒泡阶段执行
写法:
第一种:
obj.addEventListener("click",function(){
//do something
}));
第二种,没参数可以直接写函数名
obj.addEventListener("click",fn,fasle));
funciton fn(){
//do something..
}
第三种:函数有参数时需要使用匿名函数来传递参数
obj.addEventListener("click",function(){fn()parm},false);
 
 
 
2.两者的区别
2.1onxxxx事件会被后面的onxxxx相同的事件覆盖
以onclick为例:
//注册第一个点击事件
obj.onclick(function(){
alert("hello world");
});
//注册第二个点击事件
obj.onclick(function(){
alert("hello world too");
});
最终会只有弹框输出:
hello world too
 
2.2addEventListener 则不会覆盖。
//注册第一个点击事件
obj.addEventListener("click",function(){
alert("hello world");
}));
//注册第二个点击事件
obj.addEventListener("click",function(){
alert("hello world too");
}));
这样会连续输出:
hello world
hello world too
 
3.addEventListener注意事项:
特别说明addEventListener不被IE9以下兼容,IE9以下用使用addEvent();
obj.addEvent(event,funtionName);
参数:
event:事件类型(需要写成“onclick”前面加on,这个与addEventListener不同)
funtionName:方法名(要参数是也是需要使用匿名函数来传参)
 
4.奉上事件集合:
1.鼠标事件:
  • click(单击)
  • dbclick(双击)
  • mousedown(鼠标按下)
  • mouseout(鼠标移走)
  • mouseover(鼠标移入)
  • mouseup(鼠标弹起)
  • mousemove(鼠标移动)
2.键盘事件:
  • keydown(键按下)
  • keypress(按键)
  • keyup(键起来)
3.HTML事件:
  • load(加载页面)
  • unload(卸载)
  • change(改变)
  • scroll(滚动)
  • focus(获得焦点)
  • blur(失去焦点)
5.总结:
onXXX与addEventListener都是为dom元素添加事件监听,使其在事件发生后执行相应的代码,操作。有了它们我们实现了页面与用户交互。
 

作者:Ry-yuan(元)

本文是个人总结得出,若有错误请指出。
 

JavaScript之onXXXX事件和addEventListener的区别的更多相关文章

  1. javascript中标准事件流addEventListener介绍

    addEventListener-开始 前面零散地写了些关于 addEventListener 的内容,觉得比较散,有些地方可能也说得不够清楚明白,所以决定以连载的形式从头到尾再写一篇. addEve ...

  2. JavaScript事件onblur与onfocus区别

    一.onblur 1.1 说明 onblur属性在元素失去焦点时触发,onblur常用于表单验证代码(例如用户离开表单字段). 1.2 示例 <input type="text&quo ...

  3. 了解javascript中的事件(二)

    本文目录如下: 零.寒暄 一.事件的分类 二.事件代理 2.1 问题引出 2.2 什么是事件代理 2.3 完整示例 二.事件代理 三.事件代理思想的用处 四.总结 零.寒暄 这篇博客本该出现在两个月以 ...

  4. javascript&colon;理解DOM事件

    首先,此文不讨论繁琐细节,但是考虑到读者的心灵感受,本着以积极向上的心态,在此还是会列举示例说明. ​标题为理解DOM事件,那么在此拿一个简单的点击事件为例,希望大家看到这个例子后能触类旁通. DOM ...

  5. 学习javascript中的事件——事件处理程序

    事件就是用户或浏览器自身执行的某种动作.诸如 click.load 和 mouseover ,都是事件的名字.而响应某个事件的函数就叫做事件处理程序(或事件侦听器).事件处理程序的名字以“on”开头, ...

  6. JavaScript&lpar;1&rpar;---绑定事件、解除绑定事件

    JavaScript(1)---绑定事件.解除绑定事件 一.事件概述 1.事件的几个概念 · 事件 指的是文档或者浏览器窗口中发生的一些特定交互瞬间.我们可以通过侦听器(或者处理程序)来预定事件,以便 ...

  7. JavaScript中的事件委托机制跟深浅拷贝

    今天聊下JavaScript中的事件委托跟深浅拷贝 事件委托 首先呢,介绍一下事件绑定 //方法一:通过onclick <button onclick="clickEvent()&qu ...

  8. Javascript中的事件对象和事件类型

    接上次看JS的事件冒泡和捕获,所以顺带就把事件相关的知识都看完好了 而且想到一个好的学习方法,第一天自己看,第二天把前一天学习的东西写下来,一方面可以当复习,一方面当重新整理并且分享 事件对象 事件处 ...

  9. javascript event(事件对象)详解

    javascript event(事件对象)详解   1. 事件对象     1. 事件对象 Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 什 ...

随机推荐

  1. Unity3D游戏引擎最详尽基础教程

    第一节 加入重力 我们先打开Unity3d,新建一个场景(Scene),新建的时候应该会有对话框要求你加入哪些Asset Package,记得选择Physics Material,因为后面我们一定要用 ...

  2. oracle sql

    show user desc 'table' SELECT DISTINCT SELECT * FROM emp WHERE comm is NOT NULL; SELECT * FROM emp W ...

  3. ECMAScript 6中的数组操作方法

    本文介绍ECMAScript 6即将带给我们新的数组操作方法,以及在怎样在现有浏览器应用这些新的数组特性. Note: 我将使用交替使用构造器(constructor)和类(class)两个术语. 类 ...

  4. ubuntu更新源,简单两步搞定

    1.启动器中打开Ubuntu软件中心 2.鼠标顶部面板点击编辑选择软件源(163.sohu) 搞定!

  5. CASE工具

    1.Rational Rose和PowerDesigner建模工具 作为世界最著名的两大CASE工具,Rational Rose和PowerDesigner的名声可谓如雷贯耳.Rose是当时全球最大的 ...

  6. Android系统源码导入到eclipse

    1.把eclipse工程配置文件复制到android源码根目录下      cp development/ide/eclipse/.classpath ./  2. 在android源码根目录下新建文 ...

  7. php多进程编程详解

    php多进程编程 前言 php单进程存在的问题: 多核处理器未充分利用,而单处理器通常需要等待其他操作完成之后才能再继续工作. 任何现代操作系统都可在幕后执行多任务,这意味着在很短时间内,计算机可以调 ...

  8. xpath的数据和节点类型以及XPath中节点匹配的基本方法

    XPath数据类型  XPath可分为四种数据类型:  节点集(node-set)  节点集是通过路径匹配返回的符合条件的一组节点的集合.其它类型的数据不能转换为节点集.  布尔值(boolean)  ...

  9. SQL Server 查询优化器运行方式

    一.结合实际,谈索引使用的误区 理论的目的是应用.虽然我们刚才列出了何时应使用聚集索引或非聚集索引,但在实践中以上规则却很容易被忽视或不能根据实际情况进行综合分析.下面我们将根据在实践中遇到的实际问题 ...

  10. Java单例模式&amp&semi;static成员变量 区别

    当需要共享的变量很多时,使用static变量占用内存的时间过长,在类的整个生命周期. 而对象只是存在于对象的整个生命周期.   //饿汉式 class Single//类一加载,对象就已经存在了. { ...