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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JS在IE和FF下attachEvent,addEventListener学习笔记

    对象名.addEventListener("事件名(不带ON)",函数名,true/false);(FF下) 对象名.attachEvent("事件名",函数名);(IE下) 说明: 事件名称,要注意的是"onclick"要改为"click","onblur"要改为"blur",也就是说事件名不要带"on". 函数名,记住不要跟括号最后一个参数是个布尔值,表示该事件的

  • fastjson到底做错了什么?为什么会被频繁爆出漏洞?(推荐)

    GitHub 15.8k Star 的Java工程师成神之路,不来了解一下吗! GitHub 15.8k Star 的Java工程师成神之路,真的不来了解一下吗! GitHub 15.8k Star 的Java工程师成神之路,真的真的不来了解一下吗! fastjson大家一定都不陌生,这是阿里巴巴的开源一个JSON解析库,通常被用于将Java Bean和JSON 字符串之间进行转换. 前段时间,fastjson被爆出过多次存在漏洞,很多文章报道了这件事儿,并且给出了升级建议. 但是作为一个开发者

  • Javascript 的addEventListener()及attachEvent()区别分析

    Mozilla中: addEventListener的使用方式: target.addEventListener(type, listener, useCapture); target: 文档节点.document.window 或 XMLHttpRequest. type: 字符串,事件名称,不含"on",比如"click"."mouseover"."keydown"等. listener :实现了 EventListene

  • Springmvc处理ajax请求并返回json数据

    ①在springmvc方法上添加@ResponseBody注解,springmvc会将数据转换成json并返回: @ResponseBody //指定返回json数据,不跳转页面 @RequestMapping("/list") public List<User> list(User user){ System.out.println("获取到异步请求数据:"+user); //todo 根据条件做数据库查询,返回结果集合 ArrayList<Us

  • javascript attachEvent和addEventListener使用方法

    attachEvent方法 按钮onclick addEventListener方法 按钮click 两者使用的原理:可对执行的优先级不一样,下面实例讲解如下: attachEvent方法,为某一事件附加其它的处理事件.(不支持Mozilla系列) addEventListener方法 用于 Mozilla系列 举例: Java代码 复制代码 代码如下: document.getElementById("btn").onclick = method1; document.getElem

  • window.addEventListener来解决让一个js事件执行多个函数

    可能你也碰到过这种情况,就是在js的代码中用了window.onload后,可能会影响到body中的onload事件.你可以全写在body中,也可以全放到window.onload中,但是这样并不是很方便,有时我们需要两个同时用到.这时就要用window.attachEvent和window.addEventListener来解决一下. 下面是一个解决方法.至于attachEvent和addEventListener的用法,可以自己Google或百度一下. 复制代码 代码如下: if (docu

  • JavaScript使用addEventListener添加事件监听用法实例

    本文实例讲述了JavaScript使用addEventListener添加事件监听用法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html lang="en"> <head> <title>This text is the title of the document</title> <script> function showalert(){ alert('you clicked

  • js中addEventListener()与removeEventListener()用法案例分析

    本文实例讲述了js中addEventListener()与removeEventListener()用法.分享给大家供大家参考,具体如下: 所有的DOM节点中都包含addEventListener()与removeEventListener()这两种方法,用于追加事件和删除追加. 接受参数:要处理的事件名.作为事件处理程序的函数和一个布尔值. (3个) 最后这个布尔值参数是true,表示在捕获阶段调用事件处理程序:如果是false,表示在冒泡阶段调用事件处理程序.默认为false; 事件传递有两

  • 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.. } 不能够这样写:

  • php中sprintf与printf函数用法区别解析

    下面是一个示例:四舍五入保留小数点后两位 复制代码 代码如下: <?php$num1 = 21;echo sprintf("%0.2f",$num1)."<br />"; //输出 21.00$num2 = 16.3287;echo sprintf("%0.2f",$num2)."<br />"; //输出 16.33$num3 = 32.12329;echo sprintf("%0.2

  • js中for in的用法示例解析

    for(var i=0;i<len;i++)这样的用法一般都可以用for in 来替代. 例如: 复制代码 代码如下: var a = ["a","b","c"]; for(var el in a){ alert(a[el]); } 这个就是穷举出a中的所有元素,当然上面这个例子是可以用 复制代码 代码如下: for(var i=0,len=a.length;i<len;i++){ alert(a[i]); } 这种方式进行循环列出的

  • JS访问对象两种方式区别解析

    可以使用下面两种方式访问对象的属性和方法 1.对象名.属性名 对象名.方法名() 2.对象名["属性名"] 对象名"方法名" var obj = { name : "小明", age : 18, say : function(){ console.log("我是"+this.name+"我"+this.age+"岁"); } }; console.log(obj.name); conso

  • JavaScript常用截取字符串的三种方式用法区别实例解析

    stringObject.substring(start,stop) 用于提取字符串中介于两个指定下标之间的字符. start必需.一个非负的整数,规定要提取的子串的第一个字符在 stringObject 中的位置. stop可选.一个非负的整数,比要提取的子串的最后一个字符在 stringObject 中的位置多 1.如果省略该参数,那么返回的子串会一直到字符串的结尾. start从0开始 到stop(不包含stop)结束 不接受负的参数. stringObject.substr(start,

  • js设计模式之单例模式原理与用法详解

    js设计模式之单例模式原理与用法详解

    本文实例讲述了js设计模式之单例模式原理与用.分享给大家供大家参考,具体如下: 关于设计模式,我的理解是它是业务代码的提前解决方案.意思就是说在没有真正的业务之前,设计模式就存在了,这个是显然的.设计模式是人长期从事业务总结的具有普通适用性的解决方案. 就个人来讲,写了太多的命令式编程代码,所谓命令式代码就是业务需要怎样就写怎么样的功能,比如添加一个点击事件,比如进行一个验证等扥.写就写了很少站在设计模式的角度或者前人的角度去改善代码. 不给自己找客观原因,最近开始关注设计模式,尝试从设计模式的

  • vue.js数据响应式原理解析

    vue.js数据响应式原理解析

    目录 Object.defineProperty() 定义 defineReactive 函数 递归侦测对象的全部属性 流程分析 observe 函数 Observer 类 完善 defineReactive 函数 One More Thing Object.defineProperty() 得力于 Object.defineProperty() 的特性,vue 的数据变化有别于 react 和小程序,是非侵入式的.详细介绍可以看 MDN 文档,这里特别说明几点: get / set 属性是函数

  • RxJava中map和flatMap的用法区别源码解析

    RxJava中map和flatMap的用法区别源码解析

    目录 前言: 作用 使用方法: map flatMap 源码分析 map flatMap 结语 前言: RxJava中提供了大量的操作符,这大大提高了了我们的开发效率.其中最基本的两个变换操作符就是map和flatMap.而其他变换操作符的原理基本与map类似. map和flatMap都是接受一个函数作为参数(Func1)并返回一个被观察者Observable Func1的< I,O >I,O模版分别为输入和输出值的类型,实现Func1的call方法对I类型进行处理后返回O类型数据,只是fla

  • JS高阶函数原理与用法实例分析

    本文实例讲述了JS高阶函数原理与用法.分享给大家供大家参考,具体如下: 如果您正在学习JavaScript,那么您必须遇到高阶函数这个术语.这听起来复杂,其实不然. 使JavaScript适合函数式编程的原因是它接受高阶函数. 高阶函数在JavaScript中广泛使用.如果你已经用JavaScript编程了一段时间,你可能已经使用它们甚至不知道. 要完全理解这个概念,首先必须了解函数式编程是什么一等函数(first-Class Function)以及的概念. 函数式编程 在大多数简单的术语中,函

  • 15分钟深入了解JS继承分类、原理与用法

    本文全面讲述了JS继承分类.原理与用法.分享给大家供大家参考,具体如下: 许多 OO 语言都支持两种继承方式:接口继承和实现继承.接口继承只继承方法签名,而实现继承则继承实际的方法.由于 ECMAScript 中的函数没有签名,所以在 JS 中无法实现接口继承.ECMAScript 只支持实现继承,而且其实现继承主要是依靠原型链来实现的.所以,下面所要说的原型链继承.借用构造函数继承.组合继承.原型式继承.寄生式继承和寄生组合式继承都属于实现继承. 最后的最后,我会解释 ES6 中的 exten

随机推荐