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标签的默认事件是跳转,这里我们告诉浏览器取消 ...
随机推荐
- OpenStack依然大行其道，可是否能等来属于自己的时代
版权声明:不论什么转载需全文转载并保留来源(微信公众号techculture)和该声明,并同一时候转载文后的二维码.否则视作侵权. OpenStack在云计算领域依然火热,甚至能够说势不可挡.这可能是 ...
- BZOJ 2242 [SDOI2011]计算器 BSGS+高速幂+EXGCD
题意:id=2242">链接 方法: BSGS+高速幂+EXGCD 解析: BSGS- 题解同上.. 代码: #include <cmath> #include <c ...
- 配置mac机svn服务器
这几天一直纠结如何配置mac机svn服务器,在网上查了很多资料,无奈本人底子太差,菜鸟级别,理解能力有限,照网上的总是配置不好,最后无奈问了刘超老师,终于配置成功.现在写一下具体配置过程,菜鸟级别可以 ...
- centos 项目上线shell脚本
最近在弄项目上线,然后写了个上线,备份,回滚的shell脚本 上线可根据自己公司项目做相关操作,备份回滚可修改目录则可实现 主管要求用shell写,那就用shell写吧 本想Python写更好的 哈哈 ...
- Pycharm 的安装
一. Windows 安装 汉化 破解补丁激活 下载 `https://pan.baidu.com/s/1qjI9uHaw0x374rwu6H8djA` 并将 JetbrainsCrack-2.8-r ...
- UDP广播
客户端UDP发送消息至服务器端服务器IP:192.168.1.114服务器端口:2014 客户端 Socket socket = new Socket(AddressFamily.InterNetwo ...
- Scrapy框架使用代理
使用代理抓取https://www.baidu.com/s?wd=ip # -*- coding: utf-8 -*- ''' 一.在settings.py中开启中间件 DOWNLOADER_MIDD ...
- 休假结束，Linus重回内核开发岗位
在休假反省一个多月之后,Linus Torvalds 又回来了.10 月 22 日爱丁堡举行的欧洲开源峰会上,Linus Torvalds 将与内核维护者们碰头,这是他重新接管Linux内核开发的第一 ...
- PHP 相关配置
1. php-fpm的pool 编辑"php-fpm"配置文件"php-fpm.con" vim /usr/local/php/etc/php-fpm.conf ...
- [ES2017] Iterate over properties of an object with ES2017 Object.entries()
The Object.entries() function is an addition to the ECMAscript scpec in Es2017. This allows us to it ...