js的事件处理程序
js事件处理程序一般有三种:
1、HTML事件处理程序
<body>
<input type="button" value="点击" onclick="mes()" />
<!--js-->
<script>
function mes(){
document.write("hello world!");
}
</script>
</body>
这种事件方式一般不推荐,变更事件麻烦。
2、DOM0级处理程序
<body>
<input type="button" value="点击" id="btn"/>
<!--js-->
<script>
var btn = document.getElementById("btn");
btn.onclick = function(){
document.write("hello world!");
}
</script>
</body>
这里可以 = 一个匿名函数,也可以是已声明函数。
DOM0级处理程序的清空:element.onclick = null;
3、DOM2级处理程序
DOM2级处理程序定义了事件添加和事件删除两个方法。分别是:addEventListener()和removeEventListner()。
这两个方法都有三个参数:处理事件名(如:点击事件 click),事件处理的函数(可以是匿名函数也可以是已声明函数,这里一般用已声明函数,方便remove),布尔值(这里的值是调用事件的方式,true为事件捕获,false为事件冒泡,一般设置为事件冒泡)
添加事件:
<body>
<input type="button" value="点击" id="btn"/>
<!--js-->
<script>
var btn = document.getElementById("btn");
btn.addEventListener('click',function(){
document.write("hello world!");
},false);
</script>
</body>
删除事件:
<body>
<input type="button" value="点击" id="btn"/>
<!--js-->
<script>
var btn = document.getElementById("btn");
btn.addEventListener('click',mes,false);
</script>
</body>
js的事件处理程序的更多相关文章
- JS:事件处理程序
在JQuery中有个toggle事件,可以绑定两个或多个函数,可以轮流相应click事件,这两天学习到原来javascript中有两个方法(也可以说是四个)同样可以实现这个功能. #box{ marg ...
- js添加事件处理程序
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Javascript高级编程学习笔记(58)—— 事件(2)事件处理程序
事件处理程序 事件处理程序即响应某个事件的函数 事件处理程序以 “on” 开头 如“onclick”,“onload” HTML事件处理程序 某个元素支持的每种事件都可以使用一个与响应的事件处理程序同 ...
- 事件处理程序中 this 的指向
js 高程 事件处理程序 章节原话(斜体表示): 13.2.1 HTML事件处理程序 在这个函数内部,this 值等于事件的目标元素,例如: <!-- 输出 "Click Me&quo ...
- FF,chrome与IE的事件处理程序
今天学习了js的事件处理程序,IE与FF,chrome,safari,opera的处理事件方法不同,FF,chrome,safari,opera支持addEventLisener,而addEventL ...
- javascript将DOM事件处理程序封装为event.js 出现的低级错误记录
将 DOM 0级事件处理程序和DOM2级事件处理程序 IE事件处理程序封装为eventUtil对象,达到跨浏览器的效果.代码如下: var eventUtil = { // 添加事件句柄 addEve ...
- js跨浏览器事件对象、事件处理程序
项目中有时候会不用jquery这么好用的框架,需要自己封装一些事件对象和事件处理程序,像封装AJAX那样:这里面考虑最多的还是浏览器的兼容问题,原生js封装如下:var EventUtil={ //节 ...
- JS事件处理程序
JS事件处理程序:HTML事件处理程序.DOM0级事件处理程序.DOM2级事件处理程序.IE事件处理程序.跨浏览器的事件处理程序. HTML事件处理程序 <script type="t ...
- 【前端】跨浏览器事件处理程序EventUtil.js个人注释及详解
<javascript高级程序设计>跨浏览器事件处理程序EventUtil.js个人注释 EventUtil.js // 跨浏览器事件处理程序封装 var EventUtil = { // ...
随机推荐
- 1、java基础回顾与加强
一. 基础回顾 1 集合 1.1 集合的类型与各自的特性 ---|Collection: 单列集合 ---|List: 有存储顺序, 可重复 ---|ArrayList: 数组实现, ...
- JavaEE基础(二十三)/递归
1.File类递归练习(统计该文件夹大小) 需求:1,从键盘接收一个文件夹路径,统计该文件夹大小 2.File类递归练习(删除该文件夹) 需求:2,从键盘接收一个文件夹路径,删除该文件夹 3.File ...
- BLOB:大数据,大对象,在数据库中用来存储超长文本的数据,例如图片等
将一张图片存储在mysql中,并读取出来(BLOB数据:插入BLOB类型的数据必须使用PreparedStatement,因为插入BLOB类型的数据无法使用字符串拼写): -------------- ...
- poj2429 GCD & LCM Inverse
用miller_rabin 和 pollard_rho对大数因式分解,再用dfs寻找答案即可. http://poj.org/problem?id=2429 #include <cstdio&g ...
- discuz安装与学习资料
discuz的安装地址:http://www.discuz.net/thread-3457145-1-1.html 一些学习资料:http://www.discuz.net/forum-10-1.ht ...
- Linux crond定时任务
第1章 Crond是什么? Crond是linux系统用来定期执行命令或指定程序任务的一种服务或软件.一般情况下,我们安装完Centos5/6linux操作系统之后,默认便会启动Crond任务调度服务 ...
- php 修改、增加xml结点属性的实现代码
php修改xml结点属性,增加xml结点属性的代码,有需要的朋友可以参考下 php 修改 增加xml结点属性的代码,供大家学习参考.php修改xml结点属性,增加xml结点属性的代码,有需要的朋友,参 ...
- fildder学习
http://www.cnblogs.com/strick/p/4570006.html#first
- 【Thread】多线程的异常处理?
线程中处理异常是个头疼的问题,在异步的代码中,如何将异常捕获. 捕获异常后,将异常反馈给开发者,或用户.一般来说,反馈给开发者,多数方式在是日志中打印异常日志:而反馈给用户,多数是在界面上友好提示(比 ...
- easyUI学习网站
http://www.runoob.com/jeasyui/plugins-form-timespinner.html http://www.jeasyui.net/plugins/178.html ...