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的事件处理程序的更多相关文章

  1. JS:事件处理程序

    在JQuery中有个toggle事件,可以绑定两个或多个函数,可以轮流相应click事件,这两天学习到原来javascript中有两个方法(也可以说是四个)同样可以实现这个功能. #box{ marg ...

  2. js添加事件处理程序

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. Javascript高级编程学习笔记(58)—— 事件(2)事件处理程序

    事件处理程序 事件处理程序即响应某个事件的函数 事件处理程序以 “on” 开头 如“onclick”,“onload” HTML事件处理程序 某个元素支持的每种事件都可以使用一个与响应的事件处理程序同 ...

  4. 事件处理程序中 this 的指向

    js 高程 事件处理程序 章节原话(斜体表示): 13.2.1 HTML事件处理程序 在这个函数内部,this 值等于事件的目标元素,例如: <!-- 输出 "Click Me&quo ...

  5. FF,chrome与IE的事件处理程序

    今天学习了js的事件处理程序,IE与FF,chrome,safari,opera的处理事件方法不同,FF,chrome,safari,opera支持addEventLisener,而addEventL ...

  6. javascript将DOM事件处理程序封装为event.js 出现的低级错误记录

    将 DOM 0级事件处理程序和DOM2级事件处理程序 IE事件处理程序封装为eventUtil对象,达到跨浏览器的效果.代码如下: var eventUtil = { // 添加事件句柄 addEve ...

  7. js跨浏览器事件对象、事件处理程序

    项目中有时候会不用jquery这么好用的框架,需要自己封装一些事件对象和事件处理程序,像封装AJAX那样:这里面考虑最多的还是浏览器的兼容问题,原生js封装如下:var EventUtil={ //节 ...

  8. JS事件处理程序

    JS事件处理程序:HTML事件处理程序.DOM0级事件处理程序.DOM2级事件处理程序.IE事件处理程序.跨浏览器的事件处理程序. HTML事件处理程序 <script type="t ...

  9. 【前端】跨浏览器事件处理程序EventUtil.js个人注释及详解

    <javascript高级程序设计>跨浏览器事件处理程序EventUtil.js个人注释 EventUtil.js // 跨浏览器事件处理程序封装 var EventUtil = { // ...

随机推荐

  1. JavaEE基础(二十三)/递归

    1.File类递归练习(统计该文件夹大小) 需求:1,从键盘接收一个文件夹路径,统计该文件夹大小 2.File类递归练习(删除该文件夹) 需求:2,从键盘接收一个文件夹路径,删除该文件夹 3.File ...

  2. listview实现点击条目上的箭头展开隐藏菜单。

    效果如下图,当点击listview中的小三角时,显示出下面布局,再点隐藏, 点击其他条目的三角时,上一个展开的条目隐藏的同时展开当前条目. 思路是在item布局中放入展开菜单的布局,并设置状态为隐藏, ...

  3. python: html

    1. 三把利剑(html css js) css(颜色 位置) js (动) 2. 标签的分类:块级标签和行内标签 块级标签(div h p) 行内标签(span) 3. 标签存在的意义:为了方便操作 ...

  4. Crashing Robots 分类: POJ 2015-06-29 11:44 10人阅读 评论(0) 收藏

    Crashing Robots Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 8340   Accepted: 3607 D ...

  5. Servlet基础简单总结(上)

    Servlet基础一些简单总结(上): 1.Java Servlet是运行在Web服务器上的Java程序2.Java平台给Servlet开发者提供了强大的API/面向对象编程平台无关/强类型/垃圾回收 ...

  6. LoadRunner使用之变量关联

    性能测试LR小结之参数关联(LoadRunner11.0) 关联对于LR是经常需要用到的,本章使用简单登录来介绍关联功能. 1.       Q:何为关联? 所谓的关联就是把脚本中某些写死的代码(ha ...

  7. linux下查看电脑配置

    1. 查看cpu ~$ cat /proc/cpuinfo 2. 查看内存占用 ~$ cat /proc/meminfo 3. 硬盘分区 $ cat /proc/partitions 4. ubunt ...

  8. 编写一个JAVA小程序取得IP地址

    在TCP/IP 互联网时,经常会需要查询自己主机的IP地址和www服务器的IP地址.虽然,我们可以使用IPCONFIG 和PING 进行IP地址查询,但是如果在应用程序或APPLET中使用此命令会破坏 ...

  9. c#复习阶段

    在控制台程序中使用结构体.集合,完成下列要求项目要求:一.连续输入5个学生的信息,每个学生都有以下4个内容:1.序号 - 根据输入的顺序自动生成,不需要手动填写,如输入第一个学生的序号是1,第二个是2 ...

  10. LNMP(linux+nginx+mysql+php)服务器环境配置

    一.简介 Nginx是俄罗斯人编写的十分轻量级的HTTP服务器,Nginx,它的发音为 “engine X”, 是一个高性能的HTTP和反向代理服务器,同时也是一个IMAP/POP3/SMTP 代理服 ...