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 ...
随机推荐
- Unity3D之Lightmap详解
作者:李志健 Unity 完全集成了光照贴图,可以通过编辑器创建完整的光照贴图,你完全不用担心,所有材质会自动获得光照贴图.光照贴图的意思是,所有灯光的特性将被直接映射到Beast lightmapp ...
- Centos7.x Docker桥接网络
基于Centos7.x构建Docker桥接网络, 配置bridge桥接网络可以直接设置网卡配置文件: 自定义桥接网络设置如下: 关掉docker0 ifconfig docker0 down 删除do ...
- OCR技术浅探（转）
网址:https://spaces.ac.cn/archives/3785 OCR技术浅探 作为OCR系统的第一步,特征提取是希望找出图像中候选的文字区域特征,以便我们在第二步进行文字定位和第三步进行 ...
- hdu1799-循环多少次？-（组合恒等式）
循环多少次? Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Subm ...
- maven自动部署Tomcat错误排除
转自:https://blog.csdn.net/wuha0/article/details/18658113 在Maven与Tomcat配合部署过程中,最常见的错误有三种,折腾了半天,终于找到三种错 ...
- 03_java基础（七）之面向对象
16.封装查询结果对象 封装简单粗暴的理解就是:假设你在超市买苹果,买一个你可以一个手拿走,买两个你可以用两只手拿走,但是如果买了20个勒,咋办勒,那就用一个袋子装起来!这就 封装思想. 1.封装一个 ...
- Transparency Sort Mode
[Transparency Sort Mode] Transparency Sort Mode, which allows you to control how Sprites are sorted ...
- Python调用sqlAlchemy
import logging from sqlalchemy import Column, String, create_engine from sqlalchemy.ext.declarative ...
- Spring整合EHCache框架
在Spring中使用缓存可以有效地避免不断地获取相同数据,重复地访问数据库,导致程序性能恶化. 在Spring中已经定义了缓存的CacheManager和Cache接口,只需要实例化便可使用. Spr ...
- sql语句中的不等于 <>
建议最好使用 <> 表示不等于 原因:!=在sql2000不表示不等于