javascript事件处理程序
2015-06-27 13:32
711 查看
javascript 事件处理程序
1、普通事件处理程序
<input type="button" value="click me" onclick="showMessage()" />
function showMessage(){ alert("clicked"); }
2、DOMO 级事件处理程序
<span style="white-space:pre"> </span>//老方法 var btn=document.getElementById("myBtn"); //dom扩展方法 支持主流浏览器,类似jquery语法 var btn=document.querySelector("#myBtn"); btn.onclick=function(){ alert("clicked!"); };
3、DOM2 级事件处理程序
主要介绍这个,上面两个大家应该都很熟悉了。DOM2事件处理程序定义了两个方法,用于添加和删除事件处理程序操作:addEventListener() 和 removeEventListener()所有DOM节点都包含这两个方法,他们有3个参数 :要处理的事件名、函数 、布尔值(true捕获阶段执行,false冒泡阶段执行),一般填false
例子:
var btn=document.getElementById("myBtn"); btn.addEventListener("click",function(){ alert("clicked!"); },false);
//传入removeEventListener 的参数必须和addEventListener 一样 btn.removeEventListener("click",function(){ //这里不会执行 没有用-- alert("clicked!"); },false);
IE实现了两个类似的方法:attachEvent()和detachEvent() ,接受两个参数。没有八个bool值
例子 :
var btn=document.getElementById("myBtn"); btn.attachEvent("onclick",function(){ alert("clicked"); });
btn.detachEvent("onclick",function(){ alert("clicked"); });
所以 我们这边也写了个跨浏览器的事件处理程序:
//跨浏览器 事件处理程序 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; } }, removeHandler:function(element,type,handler){ if(element.removeEventListener){ //除IE 其他 element.removeEventListener(type,handler,false); }else if(element.detachEvent){ //IE element.detachEvent("on"+type,handler); }else{ element["on"+type]=handler; } } }
相关文章推荐
- JavaScript之indeOf与lastIndexOf
- 用bottle框架返回html、css、js页面
- js添加删除附件
- 解析JSON
- javascript call 详细解释
- js实现省市选择二级联动
- wexinjs 调用
- js操作下拉标签select
- 【看了一篇解释javascript中的上下文对象的,比较深刻】深入理解Javascript之执行上下文(Execution Context)
- 网页引用外部js脚本文件时必须是(转)
- jsonp实现原理详细介绍
- javascript 判断是否为字符串对象
- JavaScript 运行机制详解:再谈Event Loop
- js上传图片,进行预览
- 视差滚动插件Stellar.js
- JS Date.Format
- JS 获取 本周、本月、本季度、本年、上月、上周、上季度、去年
- 如何实现序列化为json
- Javascript、PHP交互的实现
- js基础1-深入理解javascript之this