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标签的默认事件是跳转,这里我们告诉浏览器取消 ...
随机推荐
- nodeJs学习路线
转载自:http://blog.fens.me/nodejs-roadmap/ 前言 用Nodejs已经1年有余,陆陆续续写了48篇关于Nodejs的博客文章,用过的包有上百个. 和全部人一样,我也从 ...
- iOS开发系列之四 - UITextView 使用方法小结
// 初始化输入框并设置位置和大小 UITextView *textView = [[UITextView alloc] initWithFrame:CGRectMake(10, 10, 300, 1 ...
- Android Support Library 23.2用法简析
写在前面的几句话 前几天谷歌发布了android-support-library-23.2支持库,这一次23.2版本增加了一些新的支持库以及新的功能.接下来这篇文章,就是对这些新功能部分做简单的用法介 ...
- LSTM入门学习——本质上就是比RNN的隐藏层公式稍微复杂了一点点而已
LSTM入门学习 摘自:http://blog.csdn.net/hjimce/article/details/51234311 下面先给出LSTM的网络结构图: 看到网络结构图好像很复杂的样子,其实 ...
- 快速架设OpenStack云基础平台
通常在linux下手工安装openstack比较麻烦,StackOps是一个可以快速安装的Openstack解决方案,首先我们下载StackOps的iso文件(stackops-0.5-b1312-d ...
- 用三层交换建立企业VLAN
650) this.width=650;" onclick='window.open("http://blog.51cto.com/viewpic.php?refimg=" ...
- SQL语句查询数据库所有表和所有字段的详细信息（包括表描述和字段描述）
select (case then ddd.value else '' end ) as "表名(中文)" --如果表名相同就返回空 , (case then d.name els ...
- SQLServer 查询最近一天，三天，一周，一月，一季度数据的方法
三天 select * from T_news where datediff(day,addtime,getdate())<= 2 and datediff(day,addtime,getdat ...
- LINUX中,find结合grep正则表达式,快速查找代码文件。
###目的###LINUX中,find结合grep正则表达式快速查找代码. 例如经常有需求:查找当前目录下所有.h文件中,"public开头,中间任意字符,以VideoFrameReceiv ...
- 如何批量telnet查看否开放指定端口
由于机房搬迁,需要重新telnet看看网络是否联通 [weblogic@pays03pre_BankVerify /]$ telnet 172.29.1.159 22Trying 172.29.1.1 ...