HTML事件处理程序
事件处理程序中的代码执行时,有权访问全局作用域中任何代码。
//为按钮btn_event添加了两个个事件处理程序,而且该事件会在冒泡阶段触发(最后一个参数是false)。
var btn_event = document.getElementById("btn_event");
var handler = function () {
alert(this.id);
};
var handler2 = function () {
alert("hello longdb");
};
btn_event.addEventListener("click", handler, false);
btn_event.addEventListener("click", handler2, false); //移出第二个事件处理程序。
btn_event.removeEventListener("click", handler2, false);//第二个参数传入handler2函数才有效。
IE事件处理程序:
//移出第二个事件处理程序。
btn_event.removeEventListener("click", handler2, false);//第二个参数传入handler2函数才有效。 // IE事件处理程序。IE实现了与DOM中类似的两个方法:
//执行顺序与DOM的addEventListener相反。
btn_event.attachEvent("onclick", handler);
btn_event.attachEvent("onclick", handler2); //移出第一个事件处理程序。
btn_event.detachEvent("onclick",handler);
垮浏览器事件处理程序:
//垮浏览器的事件处理程序。
var EventUtil = {
addHandler: function (element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false);
}
else if (element.attachEvent) {
element.attachEvent("on" + type, handler);
}
else {
element["on" + type] = handler;
}
},
removeEventListener: function (element, type, handler) {
if (element.removeEventListener) {
element.removeEventListener(type, handler, false);
}
else if (element.detachEvent) {
element.detachEvent("on" + type, handler);
}
else {
element["on" + type] = null;
}
}
,
getEvent: function (event){
return event ? event : window.event;
}
,
getTarget: function (event){
return event.target || event.srcElement;
}
,
preventDefault: function (event) {
if (event.preventDefault) {
return event.preventDefault;
}
else {
return event.returnValue = false;
}
}
}; //这样利用上面的对象。
EventUtil.addHandler(btn_event, "click", handler);
EventUtil.addHandler(btn_event, "click", handler2);
EventUtil.removeEventListener(btn_event, "click", handler2);//移出handler2事件处理程序。
HTML事件处理程序的更多相关文章
- KnockoutJS 3.X API 第七章 其他技术(5) 使用其他事件处理程序
在大多数情况下,数据绑定属性提供了一种干净和简洁的方式来绑定到视图模型. 然而,事件处理是一个常常会导致详细数据绑定属性的领域,因为匿名函数通常是传递参数的推荐技术. 例如: <a href=& ...
- 深入理解DOM事件机制系列第二篇——事件处理程序
× 目录 [1]HTML [2]DOM0级 [3]DOM2级[4]IE[5]总结 前面的话 事件处理程序又叫事件侦听器,实际上就是事件的绑定函数.事件发生时会执行函数中相应代码.事件处理程序有HTML ...
- JavaScript事件对象与事件处理程序
在学习之前建议请看一下事件流.事件冒泡.事件捕获 一.事件对象 事件对象:在DOM触发事件时,会产生一个事件对象event,这个事件对象包含着所有与事件相关的信息.既然event是事件对象,那么它必然 ...
- JS事件-事件处理程序-笔记总结ing...
html事件处理程序:缺点-行为与结构耦合<input type="button" onclick = "diaoyong();"> dom0级事件 ...
- JavaScript事件处理程序
JavaScript中的事件处理程序主要分为3种: HTML事件处理程序: <script type="text/javascript"> // HTML事件处理程序 ...
- JS:事件处理程序
在JQuery中有个toggle事件,可以绑定两个或多个函数,可以轮流相应click事件,这两天学习到原来javascript中有两个方法(也可以说是四个)同样可以实现这个功能. #box{ marg ...
- js 事件处理程序 事件对象
事件:用户或浏览器自身执行的动作: 事件处理程序:响应某个事件的函数: 事件流:从页面中接收事件的顺序. 1.DOM事件流 "DOM2级事件"规定的事件流包括三个阶段:事件捕获阶段 ...
- javaScript事件(二)事件处理程序
一.事件 二.事件流 以上内容见:javaScript事件(一)事件流 三.事件处理程序 前面提到,事件是用户或浏览器自身执行的某种动作,如click,load和mouseover都是事件的名字.响应 ...
- JavaScript:关于事件处理程序何时可以直接访问元素的属性
指定在元素的的事件处理程序中指定 <input type="button" value="click me" onclick="alert(th ...
- 探究JavaScript中的五种事件处理程序
探究JavaScript中的五种事件处理程序 我们知道JavaScript与HTML之间的交互是通过事件实现的.事件最早是在IE3和Netscape Navigator 2中出现的,当时是作为分担服务 ...
随机推荐
- cache 订单队列 - TP5
使用cache实现一个简单粗糙的订单推送队列 Linux 定时任务 * * * * * /usr/bin/curl http://tc.m.com/test.php /** * User: [一秋 ...
- Vue-表单输入绑定
>>>>>>> html <div id="app" > <!-- 输入框绑定 --> <input v-m ...
- Spring服务定制
问题总述 我们都知道如果使用Spring来进行bean管理的时候.如果同一个接口的实现类存在两个,直接使用@Autowired注解来实现bean注入,会在启动的时候报异常.我们通常的做法是使用@R ...
- shell脚本之for循环
shell脚本之for循环 author :headsen chen 2017-10-18 09:50:41 个人原创,转载请注明.否则依法追究法律责任 1,cat forloop ...
- TLA+和并发系统正确性验证
TLA+介绍 TLA+(WIKI,官网)是一门领域特定语言,主要用于数理逻辑计算和并发系统的正确性验证.TLA+中的TLA代表的是"行为时序逻辑(Temporal Logic of Acti ...
- pxe自动化批量安装系统(Centos7)
PXE:preboot execute environment 环境实现:主服务器ip:10.0.10.1 1 tfpt trivial简单文件共享服务,基于udp协议工作: 加载系统安装程序: 69 ...
- ER图
E-R图也称实体-联系图(Entity Relationship Diagram), 提供了表示实体类型.属性和联系的方法,用来描述现实世界的概念模型. 它是描述现实世界概念结构模型的有效方法.是表示 ...
- Python进阶_类与实例
上一节将到面对对象必须先抽象模型,之后直接利用模型.这一节我们来具体理解一下这句话的意思. 面对对象最重要的概念就是类(class)和实例(instance),必须牢记类是抽象的模板,比如studen ...
- 希尔排序(shell‘ sort)
希尔排序是1959 年由D.L.Shell 提出来的,相对直接排序有较大的改进.希尔排序又叫缩小增量排序 基本思想: 先将整个待排序的记录序列分割成为若干子序列分别进行直接插入排序,待整个序列中的记录 ...
- Asp.Net Core 2.0 项目实战(9) 日志记录,基于Nlog或Microsoft.Extensions.Logging的实现及调用实例
本文目录 1. Net下日志记录 2. NLog的使用 2.1 添加nuget引用NLog.Web.AspNetCore 2.2 配置文件设置 2.3 依赖配置及调用 ...