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标签的默认事件是跳转,这里我们告诉浏览器取消 ...
随机推荐
- 怎样使Dialog像Activity一样随心所欲的使用？
怎样使Dialog像Activity一样随心所欲的使用? android中的Dialog像是寄生在Activity中.在弹出Dialog时.因受到系统风格定义,导致Dialog怎么也不能如意,那么今天 ...
- vue29-vue2.0组件通信_recv
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- zzulioj--1815--easy problem(暴力加技巧)
1815: easy problem Time Limit: 1 Sec Memory Limit: 128 MB Submit: 98 Solved: 48 SubmitStatusWeb Bo ...
- nyoj--20--吝啬的国度(搜索dfs)
吝啬的国度 时间限制:1000 ms | 内存限制:65535 KB 难度:3 描述 在一个吝啬的国度里有N个城市,这N个城市间只有N-1条路把这个N个城市连接起来.现在,Tom在第S号城市,他有 ...
- ES6学习笔记（七）对象的新增方法
1.Object.is() ES5 比较两个值是否相等,只有两个运算符:相等运算符(==)和严格相等运算符(===).它们都有缺点,前者会自动转换数据类型,后者的NaN不等于自身,以及+0等于-0.J ...
- Centos7部署phpMyAdmin系统
phpMyAdmin是一个使用PHP语言编写,用来管理MYSQL数据库的Web应用系统 一:安装phpMyadmin 下载phpMyadmin最新版本4.8 wget https://files.ph ...
- 今日SGU 5.16
SGU 119 题意:给你N.A0.B0,然后问所有X.Y,若A0X+B0Y能被N整除,则AX+BY也能被N整除,求所有的A.B.(0<=A.B<N) 收获:枚举 因为a0x+b0y=k1 ...
- idea中实现类快速重写service方法 快捷键
1.在实现类中 CTRL+O 快捷键,会弹出所有方法 2.选择service中的方法,会自动重写
- 【Codeforces Round #425 (Div. 2) A】Sasha and Sticks
[Link]: [Description] [Solution] 傻逼题; 获取n/k; 对n/k的奇偶性讨论一下就好 [NumberOf WA] 0 [Reviw] [Code] #include ...
- OpenCASCADE 参数曲面面积
OpenCASCADE 参数曲面面积 eryar@163.com Abstract. 本文介绍了参数曲面的第一基本公式,并应用曲面的第一基本公式,结合OpenCASCADE中计算多重积分的类,对任意参 ...