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/ ...
随机推荐
- Jsp学习总结(1)——JSP九大内置对象和四种属性范围解读
一.四种属性范围 1.1.在JSP中提供了四种属性保存范围 page:在一个页面内保存属性,跳转之后无效 request:在一次服务请求范围内,服务器跳转后依然有效 session:-在一次会话范围内 ...
- java中TCP传输协议
class TcpClient { public static void main(String[] args) throws Exception { //创建client的socket服务,指定目的 ...
- C#最简单的登录Web服务
因为演示程序,所以有下面问题: 1.password是明码传输. 本文在 C#建立最简单的web服务,无需IIS 的基础上完毕. 详细步骤: 一.RequestProcessor添加变量mLogi ...
- KendoUi中KendoDropDownList控件的使用——三级级联模块的实现
1. 应用需求 在权限系统开发中除了以上数据表关系的设计之外.比較麻烦的地方是级联模块在页面的展示,因为设计中最多是控制到三级,因此三级级联模块的展示.编辑等页面操作是须要解决的问题,这里採用Kend ...
- 比MD5 和HMAC还要安全的加密 - MD5 加时间戳
//1.给一个字符串进行MD5加密 NSString *passKey = @"myapp"; passKey = [passKey md5String]; //2.对第一步中得到 ...
- vue 打包成 apk 文件(修改路径)
第一个坑:文件引用路径 现在项目我们什么都没动,是初始化之后直接打包的状态,打开dist/index.htmnl文件整个网页都是一片空白的. 爬坑: 打开 config文件夹/index.js文件 a ...
- Js将类数组转化为数组
说起伪数组,大家可能会想到arguments, 这个我们函数参数的一个类数组,是类数组的代表. 1.拥有length属性,可以使用下标来访问元素,这两点和数组相同. 2.不能使用数组的方法,他们不能使 ...
- mybatis的XML返回值类型报错
昨天项目里一直报错说是一个文件里的返回值java.util.hashmap不对,然后去定位这个文件发现并没有问题,后来在全局搜索的帮助下查找了返回值类型为resultMap的文件里看到写的代码里有: ...
- [置顶]
Docker学习总结(5)——超实用Docker入门学习教程
Docker是什么 Docker是一种容器技术,它可以将应用和环境等进行打包,形成一个独立的,类似于iOS的APP形式的"应用",这个应用可以直接被分发到任意一个支持Docker的 ...
- 怎样使用 OneAPM 监控微软 Azure Cloud Service ?
不知不觉微软 Azure 已经进入中国市场近两年的时间.那么 Azure 平台的性能到底怎样?资源载入的延迟.虚拟机的稳定性等问题是否切实满足客户期许.这些都是大家对微软 Azure 这个国外的云服务 ...