JS-事件心得
写在前面的话:就我目前的水平来看,这两种方法不能一起使用,用on添加的事件removeEventListener()没办法删除,反之一样
注册事件的两种方式:
on+事件名称
addEventListener()事件监听器
- 假设事件源是获取到的button节点的btn,为btn注册一个点击事件: btn.addEventListener("click",fn); //第一个参数是事件名称,没有on,第二个是执行的函数体
- 这种方法可以为一个节点注册多个事件 如上边的btn:
btn.addEventListener("click",fn1);
btn.addEventListener("click",fn2); - 在IE9前,用attachEvent()这个方法
- 因为在DOM2之后出来,所以需要考虑到兼容性的问题
<body>
<input type="button" value="一个神奇的按键">
<script>
var inp = document.getElementsByTagName('input')[0]; //事件的兼容性写法
EventListener = {
addEvent : function (ele,fn,str) {
if (ele.addEventListener) {
ele.addEventListener(str,fn);
}else if (ele.attachEvent) { //兼容IE678
ele.attachEvent("on" + str,fn);
}else { //DOM0时代,但当前的这种写法只是示例,不够完善
ele["on" + str] = fn;
}
},
removeEvent : function (ele,fn,str) {
if (ele.removeEventListener) {
ele.removeEventListener(str,fn);
}else if (ele.detachEvent) {
ele.detachEvent("on" + str, fn);
}else {
ele["on" + str] = fn;
}
}
}
function fn() {
alert(1);
} var inp = document.getElementsByTagName('input')[0];
EventListener.addEvent(inp,fn,"click");//添加事件
EventListener.removeEvent(inp,fn,"click");//移除事件
</script>
JS-事件心得的更多相关文章
- 微信小程序js学习心得体会
微信小程序js学习心得体会 页面控制的bindtap和catchtap 用法,区别 <button id='123' data-userDate='100' bindtap='tabMessag ...
- dynamic-css 动态 CSS 库，使得你可以借助 MVVM 模式动态生成和更新 css，从 js 事件和 css 选择器的苦海中脱离出来
dynamic-css 使得你可以借助 MVVM 模式动态生成和更新 css,从而将本插件到来之前,打散.嵌套在 js 中的修改样式的代码剥离出来.比如你要做元素跟随鼠标移动,或者根据滚动条位置的变化 ...
- 什么是JS事件冒泡？
什么是JS事件冒泡?: 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理 程序或者事件返回true,那么 ...
- js事件技巧方法整合
window.resizeTo(800,600); //js设置浏览器窗口尺寸 window.open (function(){ resizeTo(640,480);//设置浏览器窗口尺寸 moveT ...
- js事件浅析
js中关于DOM的操作很多,因此js事件机制也就尤为重要. 事件绑定形式: 一. 内联形式 耦合度高,不利于维护 <button onclick="alert('你点击了这个按钮'); ...
- js 事件大全
Js事件大全一般事件 事件 浏览器支持 描述onClick IE3|N2|O3 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击onDblClick IE4|N4|O 鼠标双击事件onMouseDo ...
- 原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别
一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaS ...
- JS事件
JS事件: 声明:为了事件对象event跨浏览器兼容: var oEvent==ev||event; 所以在下面用到 event 的地方都用 oEvent 代替 1)doucument的 ...
- 原生js事件和jquery事件的执行顺序问题
场景:近日,写前端页面时候,在针对输入框input操作时,用到了jquery的插件,插件中使用了jquery的focus()和blur()方法.但是同时,又需要在插件之外再针对输入框的获取焦点和失去焦 ...
- 特殊js事件
1:点击enter事件 $(document).keypress(function(e) { // 回车键事件 if(e.which == 13) { submitForm(); } }); 2:JQ ...
随机推荐
- 开发一个FTP软件
一.开发一个多并发的FTP server 需求: .允许同时支持多用户在线 .用户认证 .用户空间配额 .权限限制 .可上传下载.上传下载过程中显示进度条 .用户可远程切换目录.查看服务端文件列表等 ...
- C# WInForm中 窗体的this.width和this.height的属性值不能大于显示器的最大分辨率
最近在做一个小项目的时候,发现在 1680x1050 分辨率显示器上写的代码,将窗体的宽度和高度 设置成了 1600×900,在高于1600×900的分辨率上缩放显示很正常, 而后转移到 分辨率低于 ...
- eclipse git 创建新分支 合并分支 删除分支
创建分支: 合并分支: 删除分支:
- 机器学习之overfiting
有错欢迎指正,别让小弟继续错下去. 我们在使用机器学习过程中,经常会overfiting,overfiting的产生原因是noise.训练样本大的话,还好,不用考虑这个 问题.但是,当数据量小的时候, ...
- Linux下怎么创建和进入带有空格的文件夹
有时候需要创建带有空格的文件夹,虽然这不是一个好的习惯,但是偶尔会遇到.用的最多的是很多时候需要进入带有空格的文件夹,如"a b"是一个文件夹名. 创建:mkdir "a ...
- c# list批量添加 对象 到数据库的sql
public void AddList(List<ProModule.Model.pro_manifest_item> list) { Hashtable SQLStringList = ...
- MySQL实现中文拼音排序
MySQL下新建一个表,默认采用utf8字符集,中文不能直接按照拼音进行排序. 例如以下语句: SELECT * FROM `tb_fixedassets` order by C_FANAME 得到的 ...
- ISE软件报错
ISE弹出如下报错并关闭程序或在编译时出现PATH类报错 一,解决办法 本人自己试了一下 E:\ISE\14.7\ISE_DS\settings64.bat E:\ISE\14.7\ISE_DS\I ...
- JMeter学习（十一）WebSerivice测试计划（转载）
转载自 http://www.cnblogs.com/yangxia-test WebSerivice测试计划的取样器有两种方式:HTTP请求.SOAP/XML-RPC Request. 1. 测试计 ...
- day25 面向对象之多态和鸭子类型
1.封装方法 如何封装:给方法名称前面加上双下划线 # ATM 的取款功能 # 1.插入银行卡 2.输入密码 3.选择取款金额 4.取款 class ATM: def __insert_card(se ...