Javascript和jquery事件--事件监听器
之前看完了js和jq的冒泡捕获和事件对象event,这里看看同时使用js和jq后我最容易混淆的监听器的绑定。
(1) js的监听器绑定解绑
绑定监听器有两种方式:
a.on-事件type,比如onclick,onfocus
这种方式可以直接使用在html界面中:
- <button onclick=’alert(‘点击成功!’)’>点击</button>
也可以在js中使用:
- btn.onclick=function(){};
- 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):
- /**
- * @description 事件绑定,兼容各浏览器
- * @param target 事件触发对象
- * @param type 事件
- * @param func 事件处理函数
- */
- function addEvent(target, type, func) {
- if (target.addEventListener) //非ie 和ie9
- target.addEventListener(type, func, false);
- else if (target.attachEvent) //ie6到ie8
- target.attachEvent("on" + type, func);
- else target["on" + type] = func; //ie5
- };
- /**
- * @description 事件移除,兼容各浏览器
- * @param target 事件触发对象
- * @param type 事件
- * @param func 事件处理函数
- */
- function removeEvent(target, type, func){
- if (target.removeEventListener)
- target.removeEventListener(type, func, false);
- else if (target.detachEvent)
- target.detachEvent("on" + type, func);
- else target["on" + type] = null;
- };
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应该就是专门为这个函数设计的吧?
- $('#myol').delegate('li','click',getHtml);
如上语句,点击每个li会触发getHtml显示li里的文字,但是输出的currentTarget是ol,target是点击的li,
3、 js监听器的触发
target.dispatchEvent(event);
该方法在当前节点上触发指定事件,从而触发监听函数的执行。该方法返回一个布尔值,只要有一个监听函数调用了Event.preventDefault(),则返回值为false,否则为true。
- var event = new Event('click');
- add.dispatchEvent(event);
或者
- var evt = document.createEvent( 'HTMLEvents' );
- evt.initEvent('click', true, true);
- 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事件--事件监听器的更多相关文章
- 【JavaScript】jQuery绑定事件
jquery中直接绑定事件:只能用在程序中一开始就存在的html代码 目标元素.click(function(){ }) jquery中间接绑定事件: 如果目标元素是js生成的,则需要间接绑定事件,用 ...
- 【Python全栈-JavaScript】jQuery事件
jQuery事件 一.页面载入 当DOM载入就绪可以查询及操纵时绑定一个要执行的函数. 这是事件模块中最重要的一个函数,因为它可以极大地提高web应用程序的响应速度. 简单地说,这个方法纯粹是对向 w ...
- JavaScript与jQuery关于鼠标点击事件
即实现鼠标点击其中一个菜单发生样式的改变,当点击下一个菜单时,当前菜单样式改变,其他菜单均变为之前样式. 用JavaScript,jQuery都可以实现,只是后者是封装的JavaScript库,具有s ...
- 原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别
一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaS ...
- python 全栈开发,Day55(jQuery的位置信息,JS的事件流的概念(重点),事件对象,jQuery的事件绑定和解绑,事件委托(事件代理))
一.jQuery的位置信息 jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集 ...
- JQuery实践--事件
通过HTML网页所呈现的界面是异步的和事件驱动的.步骤: 建立用户界面 等待又去的事情发生 做出相应的反应 重复 浏览器所实现的事件模型 DOM第0级事件模型 事件处理程序是通过吧函数实例的引用指派到 ...
- Jquery的事件操作和文档操作
对于熟悉前端开发的小伙伴,相信对于Jquery一定不陌生,相对于JavaScript的繁琐,Jquery更加的简洁,当然简洁不意味着简单,我们可以使用Jquery完成我们想要实现全部功能,这里为小白们 ...
- 从零开始学习jQuery (五) 事件与事件对象
本系列文章导航 从零开始学习jQuery (五) 事件与事件对象 一.摘要 事件是脚本编程的灵魂. 所以本章内容也是jQuery学习的重点. 本文将对jQuery中的事件处理以及事件对象进行详细的讲解 ...
- jquery的事件命名空间详解
jquery现在的事件API:on,off,trigger支持带命名空间的事件,当事件有了命名空间,就可以有效地管理同一事件的不同监听器,在定义组件的时候,能够避免同一元素应用到不同组件时,同一事件类 ...
- jquery css事件编程 尺寸设置
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- springboot 前后端分离开发解决跨域访问
最近新学习了Java EE开发框架springboot,我在使用springboot前后台分离开发的过程中遇到了跨域求问题.在网上寻找答案的过程中发现网上的解决方案大多比较零散,我在这里整理一个解决方 ...
- CentOS 7上安装gitlab-runner
1.yum install gitlab-runner -y 2.Registering Runners a.Run the following command: gitlab-runner regi ...
- Cocos2d-x--iOS平台lua加密成luac资源方法和Jsc文件<MAC平台开发试用--windows平台暂未研究>
首先要说.近期真的是太忙了.好久没写博客了,今天正好有空,就写一下近期在写游戏中的一些发现: 话说,基于Cocos2dx 引擎 + 脚本写游戏,至今的感触就是能够进行增量更新和即时编译 ...
- 安装个wampserver 环境 执行php
php代码执行要有相关环境. 在这里推荐一个环境工具.wampserver :内置了下面工具: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5 ...
- OJ刷题---猜算式
题目要求: 输入代码: #include<iostream> using namespace std; void Calc(); int main() { Calc(); return 0 ...
- Raid阵列之简单介绍
1.raid分类 软raid:用软件模拟raid芯片 硬raid:集成的后来添加的 2.raid基本简介 (1)raid是由廉价磁盘冗余阵列发展成为独立磁盘冗余阵列 (2)linux是借助MD(Mui ...
- 【hdu 3987】Harry Potter and the Forbidden Forest
[Link]:http://acm.hdu.edu.cn/showproblem.php?pid=3987 [Description] 给出一张有n个点的图,有的边又向,有的边无向,现在要你破坏一些路 ...
- Java数据传递实验
本文来自http://blog.csdn.net/liuxian13183/ ,引用必须注明出处! 在开发过程中,我们经常会遇到对象传递的问题,有时仅仅传递数据,有时却要实现数据同步:这时,就要分清两 ...
- UVa 11743 - Credit Check
题目:推断卡号是否合法,给你4组4位的数字.偶数位的2倍的位和加上奇数位的和,推断尾数是否为0. 分析:简单题,模拟. 直接依照提议推断就可以. 说明:460题,加油! #include <io ...
- Android获取当前连接的wifi名称
首先AndroidMainfest.xml文件里加入权限: <uses-permission android:name="android.permission.ACCESS_NETWO ...