js中event事件处理
1. HTML事件
直接添加到HTML结构中
function show() {
alert('hello');
}
<body>
<button id="btn" onclick="show()">按钮</button>
</body>
2. DOM0级事件
把一个函数赋值给一个事件处理程序
a. 移除事件：event.onclick = null
b. dom 0级事件只允许绑定一个事件处理函数
<button id="btn">按钮</button>
var btn = document.getElementById('btn');
btn.onclick = function() {
alert('hello');
}
btn.onclick = function() {
alert('ok'); //覆盖上面的函数，只会显示"ok"
}
3. DOM2级事件
dom2级事件允许给元素绑定多个事件处理函数
a. 添加事件
addEventListener("事件名"，事件处理函数，"布尔值")；
true：事件捕获
false：事件冒泡
b. 移除事件
removeEventListener("事件名"，事件处理函数)
案例1：DOM2级事件
btn.addEventListener('click', function() {
alert('show');
// arguments.callee 指向当前函数
btn.removeEventListener('click', arguments.callee);
});
案例2： 给同一个事件绑定多个处理函数
<button id="btn">按钮</button>
var btn = document.getElementById('btn');
//function()是匿名函数形式
btn.addEventListener('click', function() {
alert('ok');
});
function show() {
alert('show');
}
//结果"ok","show"--两个事件都会处理，show引用函数名
btn.addEventListener('click', show);
案例3：一次性事件
<button id="btn">按钮</button>
<script>
var btn = document.querySelector('#btn');
function show() {
alert('show');
//当执行一次事件后，移除事件
btn.removeEventListener('click', show);
}
btn.addEventListener("click",show);
</script>
一次性事件用this和callee方法
<button id="btn">按钮</button>
<script>
var btn = document.querySelector('#btn');
btn.addEventListener("click",
function() {
alert('show');
//当执行一次事件后，移除事件
this.removeEventListener('click', arguments.callee);
}
);
</script>
4. IE事件处理程序（ie8及以下版本）
a. attachEvent("事件名"，事件处理函数)
b. detachEvent("事件名"，事件处理函数)
事件处理函数兼容处理写法
function addEvent(elm, type, callback) {
if (elm.addEventListener) {
elm.addEventListener(type, callback); //DOM事件
} else if (elm.attachEvent) {
elm.attachEvent('on' + type, callback);//ie事件，事件需要带on
} else {
elm[on + "type"] = callback; //HTML事件
}
}
window.onload = function() {
var btn = document.getElementById('btn');
addEvent(btn, 'click', function() {
alert(123);
});
}
html代码：
<body>
<button id="btn">按钮</button>
</body>
js中event事件处理的更多相关文章
- js中关于事件处理函数名后面是否带括号的问题
今天总结一个关于事件处理程序的小细节.首先回顾一下事件处理的一些概念. JS中的事件处理(事件绑定)就是让某种或某些事件触发某些活动.有两种常见的形式,分别是DOM Level 0 和DOM Leve ...
- JS中event.keyCode用法及keyCode对…
js中event.keyCode用法及keyCode对照表 标签: javascriptJavaScriptJavascriptjavaScript 2012-12-11 15:11 HTML Jav ...
- js中event的target和currentTarget
js 中的event是个很有用的对象,不同的浏览器,处理方式可能不一样. 我们现在只考虑标准的浏览器的情况 event是表示时间触发的产生的对象,以click事件为例. 由于冒泡的存在,event对象 ...
- js中event的target和currentTarget的区别
js中的event对象包含很多有用的信息 target:触发事件的元素. currentTarget:事件绑定的元素. 两者在没有冒泡的情况下,是一样的值,但在用了事件委托的情况下,就不一样了,例如: ...
- js中event.target,this
event.target这是注册事件时的对象,或者它的子元素.通常用于比较 event.target 和 this 来确定事件是不是由于冒泡而触发的.经常用于事件冒泡时处理事件委托. 1.this和e ...
- js中绑定事件处理函数，使用event以及传递额外数据
IE8中使用attachEvent绑定事件处理函数时,不能直接向event 对象添加数据属性.可以用属性复制的方法,包装新的event对象. 1. 属性复制var ObjectExtend = fun ...
- js中event.keyCode用法及keyCode对照表
HTML 用户名:<input type="text" id="UserAccount" onKeyPress="JumpByEnter(Use ...
- js中event.target和event.srcElement的区别
看了很多资料绝对结果就是 firefox 下的 event.target = IE 下的 event.srcElement jquery中的event.target属性的作用是获取到出发事件的元素.j ...
- js中event.preventDefault()和 event.stopPropagation( ) 方法详解
event.preventDefault() 1.首先event.preventDefault()是通知浏览器不要执行与事件关联的默认动作,例如: 这里a标签的默认事件是跳转,这里我们告诉浏览器取消 ...
随机推荐
- sc命令以及InstallUtil安装service
1.安装 https://stackoverflow.com/questions/8164859/install-a-windows-service-using-a-windows-command-p ...
- 360动态加载的Android插件框架
github地址:https://github.com/Qihoo360/DroidPlugin DroidPlugin 是360手机助手在Android系统上实现了一种新的插件机制:它可以在无需安装 ...
- thinkphp5内置标签
thinkphp5内置标签 知道内置标签怎么用,查手册的时候好查 却功能的时候在里面找着来用 内置标签一览 内置标签 变量输出使用普通标签就足够了,但是要完成其他的控制.循环和判断功能,就需要借助模板 ...
- orm 通用方法——DeleteModel 主键删除
定义代码: /** * 描述:删除对象 * 作者:Tianqi * 日期:2014-09-17 * param:model 对象实例,包含主键 * return:int 受影响行数 * return: ...
- Nginx 代理以及HTTPS (二)
一.HTTPS解析 https 加密 私钥 公钥 http 的握手 是确认网络是连通的. https 的握手 是一个加密的过程 加密图 二. 使用Nginx 部署HTTPS 服务 1.证书生成命令(h ...
- 分享一下js正则中惰性与贪婪
首先引入一个介绍比较详细的网站 http://www.cnblogs.com/yuaima/p/5258513.html http://www.jb51.net/article/31491.htm 接 ...
- CSS3新的UI方案
文本新增样式 一.opacity:指定了一个元素的透明度 0~1 二.新增颜色模式rgba:很好的解决了背景透明,字体颜色不透明的需求. 三.文字阴影:text-shadow用来为文字添加阴影,而且可 ...
- js笔记3
1字符串 replace("","")替换,前面为要替换什么,后面为替换的内容只能替换一个 2DOM 时间三要素 事件源 谁身上发生的行为 事件 单机 双击 事 ...
- df---显示磁盘分区使用空间
df命令用于显示磁盘分区上的可使用的磁盘空间.默认显示单位为KB.可以利用该命令来获取硬盘被占用了多少空间,目前还剩下多少空间等信息. 语法 df(选项)(参数) 选项 -a或--all:包含全部的文 ...
- 51nod 最大子段和问题
给出一个整数数组a(正负数都有),如何找出一个连续子数组(可以一个都不取,那么结果为0),使得其中的和最大? 用f[i]表示以i为结尾的最大字段和,也就是说i一定要取, 那么f[i] = max(a[ ...