之前看完了js和jq的冒泡捕获和事件对象event,这里看看同时使用js和jq后我最容易混淆的监听器的绑定。

(1) js的监听器绑定解绑

绑定监听器有两种方式:

a.on-事件type,比如onclick,onfocus

  这种方式可以直接使用在html界面中:

    

  1. <button onclick=’alert(‘点击成功!’)’>点击</button>

  也可以在js中使用:

    

  1. btn.onclick=function(){};
  2.  
  3. btn.setAttribute('onclick', 'doSomething()');

  其实这个绑定方法有点像属性,所以可以用setAttribute设置,而且只有一个值,所以它只能绑定一个事件,后面设的值会覆盖前面的值。

如果进行解绑,直接用空值覆盖,如果想要阻止事件的继续触发可以用onclick=“return false”阻止

b.target.addEventListener()

  最标准的的绑定监听器的方式,可以绑定多个监听器。也可以使用removeEventListener进行解绑。

  传入的是事件句柄,也就是不包含园括号的函数名。这样也会导致一个问题,就是这个函数你没有办法传参。Jq已经实现了传参的封装,而如果你想要在js中传参,使用模块级变量,数据记录在dom的data中等等,只能自己想办法。

c.target.attachEvent()

  和addEventListener()相似,不过是ie特有的,不符合W3C标,ie不支持addEventListener,对应的解绑方法是detachEvent()。不过 ie8以上已经不支持attachEvent(),反而支持addEventListent()了。至少我测试的时候的确是不支持attachListener(),而支持addEventListener()了。

下面是一个兼容的代码(引自https://www.cnblogs.com/zhn0823/p/5821505.html):

  1. /**
  2.  
  3. * @description 事件绑定,兼容各浏览器
  4.  
  5. * @param target 事件触发对象
  6.  
  7. * @param type 事件
  8.  
  9. * @param func 事件处理函数
  10.  
  11. */
  12.  
  13. function addEvent(target, type, func) {
  14.  
  15. if (target.addEventListener) //非ie 和ie9
  16.  
  17. target.addEventListener(type, func, false);
  18.  
  19. else if (target.attachEvent) //ie6到ie8
  20.  
  21. target.attachEvent("on" + type, func);
  22.  
  23. else target["on" + type] = func; //ie5
  24.  
  25. };
  26.  
  27. /**
  28.  
  29. * @description 事件移除,兼容各浏览器
  30.  
  31. * @param target 事件触发对象
  32.  
  33. * @param type 事件
  34.  
  35. * @param func 事件处理函数
  36.  
  37. */
  38.  
  39. function removeEvent(target, type, func){
  40.  
  41. if (target.removeEventListener)
  42.  
  43. target.removeEventListener(type, func, false);
  44.  
  45. else if (target.detachEvent)
  46.  
  47. target.detachEvent("on" + type, func);
  48.  
  49. else target["on" + type] = null;
  50.  
  51. };

2、  jq的监听器绑定解绑

jQuery中提供了四种事件监听方式,分别是bind、live、delegate、on,对应的解除监听的函数分别是unbind、die、undelegate、off。而这几个函数的前面可以是一个jq对象集,有几个对象就帮几个对象绑定监听器,如$(‘#myol li’).on()会帮该ol下所有的li绑定监听器。

其他三种方法都是通过触发on实现的,官方推荐的尽量使用on,但是其他方法也有各自的优势。看源码看得我头疼,那就不纠结了,暂时只分析各自的使用优势应该就行了。

<1>on(type,[selector],[data],fn,/*INTERNAL*/ one)

其中,

  type就是事件名称,比如“click”“dbclick”

  [selector]不懂,但是可以不用传

  [data]是可以传的数据、参数,函数里面用event.data来获取

  Fn是绑定的函数句柄

  one是用来区分只触发一次的监听器,当one===1时,只触发一次

on为所有指定元素添加监听器,如果元素用on绑定监听器之后制定的元素有数量的增加,不会为新增加的元素绑定监听器。

<2>bind(type,[data],function(eventObject))

这个方法就几乎与on一模一样了,只是剔除了selector的传入,所存在的缺点也有

<3>live(type, [data], fn)

这个方法就克服了对新增元素无效的问题,它是将监听器绑定在this.context(一般是document)上面,然后根据事件委托机制,根据currenttarget来获取节点进行监听事件。但是看效率来说,没必要的时候还是使用on吧

<4>delegate(selector,type,[data],fn)

 参数多了一个selector,用来指定触发事件的目标元素,监听器将被绑定在调用此方法的元素上。这个也可以克服新增元素无效的问题,因为事件是绑定在父元素身上的。on方法中的selector应该就是专门为这个函数设计的吧?

  

  1. $('#myol').delegate('li','click',getHtml);

  如上语句,点击每个li会触发getHtml显示li里的文字,但是输出的currentTarget是ol,target是点击的li,

3、  js监听器的触发

target.dispatchEvent(event);

该方法在当前节点上触发指定事件,从而触发监听函数的执行。该方法返回一个布尔值,只要有一个监听函数调用了Event.preventDefault(),则返回值为false,否则为true。

  1. var event = new Event('click');
  2.  
  3. add.dispatchEvent(event);

或者

  1. var evt = document.createEvent( 'HTMLEvents' );
  2.  
  3. evt.initEvent('click', true, true);
  4.  
  5. add.dispatchEvent(evt);

旧版ie使用fireEvent(),事实上新版ie已经支持其他浏览器绑定解绑触发监听器的函数了,不想管了。

遗留问题:但是使用dispathchEvent()触发超链接的操作上有问题,谷歌认为:“点击超链接下载文件”是一个“默认响应”,而默认响应不应由脚本触发,所以从M53版本开始禁止所有由脚本触发的默认响应。火狐谷歌都不支持触发超链接、ie支持。具体下面再具体讨论。

Chrome浏览器M53更新后超链接的dispatchEvent(evt)方法无法触发文件下载:

  https://www.cnblogs.com/ljzc002/p/6003214.html

4、  jq监听器的触发

  $(selector).trigger(event,[param1,param2,...])

同时,不支持触发超链接,在ie中也不触发

参考:

1、js

http://www.cnblogs.com/dacuotecuo/p/3510823.html

https://www.cnblogs.com/huangjianwu/p/4536155.html

https://www.cnblogs.com/zhn0823/p/5821505.html

https://blog.csdn.net/namejs/article/details/50885698

https://blog.csdn.net/baihuaxiu123/article/details/53148780

2、jq

https://blog.csdn.net/lookbackward/article/details/78363997

http://www.cnblogs.com/webFrontDev/p/3509775.html

3、js触发

https://blog.csdn.net/magic__man/article/details/51831227

https://www.cnblogs.com/ljzc002/p/6003214.html

Javascript和jquery事件--事件监听器的更多相关文章

  1. 【JavaScript】jQuery绑定事件

    jquery中直接绑定事件:只能用在程序中一开始就存在的html代码 目标元素.click(function(){ }) jquery中间接绑定事件: 如果目标元素是js生成的,则需要间接绑定事件,用 ...

  2. 【Python全栈-JavaScript】jQuery事件

    jQuery事件 一.页面载入 当DOM载入就绪可以查询及操纵时绑定一个要执行的函数. 这是事件模块中最重要的一个函数,因为它可以极大地提高web应用程序的响应速度. 简单地说,这个方法纯粹是对向 w ...

  3. JavaScript与jQuery关于鼠标点击事件

    即实现鼠标点击其中一个菜单发生样式的改变,当点击下一个菜单时,当前菜单样式改变,其他菜单均变为之前样式. 用JavaScript,jQuery都可以实现,只是后者是封装的JavaScript库,具有s ...

  4. 原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别

    一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaS ...

  5. python 全栈开发,Day55(jQuery的位置信息,JS的事件流的概念(重点),事件对象,jQuery的事件绑定和解绑,事件委托(事件代理))

    一.jQuery的位置信息 jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集 ...

  6. JQuery实践--事件

    通过HTML网页所呈现的界面是异步的和事件驱动的.步骤: 建立用户界面 等待又去的事情发生 做出相应的反应 重复 浏览器所实现的事件模型 DOM第0级事件模型 事件处理程序是通过吧函数实例的引用指派到 ...

  7. Jquery的事件操作和文档操作

    对于熟悉前端开发的小伙伴,相信对于Jquery一定不陌生,相对于JavaScript的繁琐,Jquery更加的简洁,当然简洁不意味着简单,我们可以使用Jquery完成我们想要实现全部功能,这里为小白们 ...

  8. 从零开始学习jQuery (五) 事件与事件对象

    本系列文章导航 从零开始学习jQuery (五) 事件与事件对象 一.摘要 事件是脚本编程的灵魂. 所以本章内容也是jQuery学习的重点. 本文将对jQuery中的事件处理以及事件对象进行详细的讲解 ...

  9. jquery的事件命名空间详解

    jquery现在的事件API:on,off,trigger支持带命名空间的事件,当事件有了命名空间,就可以有效地管理同一事件的不同监听器,在定义组件的时候,能够避免同一元素应用到不同组件时,同一事件类 ...

  10. jquery css事件编程 尺寸设置

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. springboot 前后端分离开发解决跨域访问

    最近新学习了Java EE开发框架springboot,我在使用springboot前后台分离开发的过程中遇到了跨域求问题.在网上寻找答案的过程中发现网上的解决方案大多比较零散,我在这里整理一个解决方 ...

  2. CentOS 7上安装gitlab-runner

    1.yum install gitlab-runner -y 2.Registering Runners a.Run the following command: gitlab-runner regi ...

  3. Cocos2d-x--iOS平台lua加密成luac资源方法和Jsc文件&lt;MAC平台开发试用--windows平台暂未研究&gt;

        首先要说.近期真的是太忙了.好久没写博客了,今天正好有空,就写一下近期在写游戏中的一些发现:     话说,基于Cocos2dx 引擎 + 脚本写游戏,至今的感触就是能够进行增量更新和即时编译 ...

  4. 安装个wampserver 环境 执行php

    php代码执行要有相关环境. 在这里推荐一个环境工具.wampserver :内置了下面工具: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5 ...

  5. OJ刷题---猜算式

    题目要求: 输入代码: #include<iostream> using namespace std; void Calc(); int main() { Calc(); return 0 ...

  6. Raid阵列之简单介绍

    1.raid分类 软raid:用软件模拟raid芯片 硬raid:集成的后来添加的 2.raid基本简介 (1)raid是由廉价磁盘冗余阵列发展成为独立磁盘冗余阵列 (2)linux是借助MD(Mui ...

  7. 【hdu 3987】Harry Potter and the Forbidden Forest

    [Link]:http://acm.hdu.edu.cn/showproblem.php?pid=3987 [Description] 给出一张有n个点的图,有的边又向,有的边无向,现在要你破坏一些路 ...

  8. Java数据传递实验

    本文来自http://blog.csdn.net/liuxian13183/ ,引用必须注明出处! 在开发过程中,我们经常会遇到对象传递的问题,有时仅仅传递数据,有时却要实现数据同步:这时,就要分清两 ...

  9. UVa 11743 - Credit Check

    题目:推断卡号是否合法,给你4组4位的数字.偶数位的2倍的位和加上奇数位的和,推断尾数是否为0. 分析:简单题,模拟. 直接依照提议推断就可以. 说明:460题,加油! #include <io ...

  10. Android获取当前连接的wifi名称

    首先AndroidMainfest.xml文件里加入权限: <uses-permission android:name="android.permission.ACCESS_NETWO ...