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 = { // ...
随机推荐
- JavaEE基础(二十一)/IO流
1.IO流(字符流FileReader) 1.字符流是什么 字符流是可以直接读写字符的IO流 字符流读取字符, 就要先读取到字节数据, 然后转为字符. 如果要写出字符, 需要把字符转为字节再写出. 2 ...
- Json常见问题
1.创建包含 JSON 语法的 JavaScript 字符串: var txt = '{ "employees" : [' + '{ "firstName":& ...
- WMsg参数常量值
//WMsg参数常量值: //创建一个窗口 const int WM_CREATE = 0x01; //当一个窗口被破坏时发送 const int WM_DESTROY = 0x02; //移动一个窗 ...
- Greenplum的全量备份之gpcrondump
gpcrondump是对gp_dump的一个包装,可以直接调用或者从crontab中调用.这个命令还允许备份除了数据库和数据之外的对象,比如数据库角色和服务器配置等. gpcrondump 常用到的参 ...
- ACM题目————二叉树最大宽度和高度
http://codevs.cn/problem/1501/ 题目描述 Description 给出一个二叉树,输出它的最大宽度和高度. 输入描述 Input Description 第一行一个整 ...
- wamp安装完更改关联浏览器
"wampmanager.conf"文件修改的是关于中到官网的链接打开方式. "wampmanager.ini"修改的是左键菜单的打开方式. 修改完无效的话重启 ...
- centos系统下设置固定IP+dns
笔者用的linux系统是centos版本的,在次之前linux是空白,今天我在物理机用XSHELL连接虚拟机中的centos时候出现连接失败的情况,我的第一反应就是IP是不是变了?打开虚拟机之后在终端 ...
- Linux内核中的GPIO系统之(3):pin controller driver代码分析
一.前言 对于一个嵌入式软件工程师,我们的软件模块经常和硬件打交道,pin control subsystem也不例外,被它驱动的硬件叫做pin controller(一般ARM soc的datash ...
- 【leetcode❤python】 257. Binary Tree Paths
深度优先搜索 # Definition for a binary tree node.# class TreeNode:# def __init__(self, x):# se ...
- BZOJ 3241: [Noi2013]书法家
题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=3241 题意: 思路:把每个字母分成三部分,两个字母之间还有空的列,所以我一共设了11个状态 ...