javascript事件处理程序

javascript 事件处理程序

1、普通事件处理程序

<input  type="button" value="click me" οnclick="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.οnclick=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){//IEelement.detachEvent("on"+type,handler);}else{element["on"+type]=handler;}}}

转载于:https://www.cnblogs.com/gavanwanggw/p/6882930.html

javascript事件处理程序相关推荐

读《Javascript高级程序设计》中的javascript事件处理程序（事件侦听器）心得
今天读了<Javascript高级程序设计>中的javascript事件处理程序(事件侦听器)部分的内容,总结一些自己的心得: 事件就是用户或者浏览器自身执行的某种动作.例如click . ...
JavaScript事件处理程序的3种方式
最近这段时间因为每天要修改网站,为网站做特效,所以看了很多的js接触事件,自己只会使用一小部分,有时用的时候也比较混乱,现在系统的整理了一下,首先跟大家在马海祥博客上跟大家分享的是JavaScript ...
javaScript事件（二）事件处理程序
一.事件二.事件流以上内容见:javaScript事件(一)事件流三.事件处理程序前面提到,事件是用户或浏览器自身执行的某种动作,如click,load和mouseover都是事件的名字.响应 ...
ASP.NET Google Maps Javascript API V3 实战基础篇一获取和设置事件处理程序中的属性...
ASP.NET Google Maps Javascript API V3 实战基础篇一获取和设置事件处理程序中的属性 <%@ Page Language="C#" Auto ...
javascript --- DOM0级、DOM2级、跨浏览器的事件处理程序
DOM0级事件处理程序: // 使用DOM0级方法指定的事件处理程序被认为是元素的方法 // 这个时候的事件处理程序是在元素的作用域中运行: <div id = "myBtn" ...
JavaScript --- 跨浏览器的事件处理程序
var EventUtil = {addHandler: function(element, type, handler) { // 添加事件处理程序if (element.addEventListe ...
JavaScript和HTML事件处理程序属性中的this的含义
HTML里事件处理程序属性中的this: HTML文档里事件处理程序属性中的this表示触发此事件的元素.例如: <iframe id="iframe" src=" ...
JavaScript学习（二十六）—事件处理程序的添加与删除
JavaScript学习(二十六)-事件处理程序的添加与删除一.什么是事件? 所谓事件就是指用户或页面自身的某些行为,如点击鼠标,敲击键盘都是属于事件. 二.事件处理程序当事件被触发时会引起某些程 ...
JavaScript 中的事件流和事件处理程序（读书笔记思维导图）
JavaScript 程序采用了异步事件驱动编程模型.在这种程序设计风格下,当文档.浏览器.元素或与之相关的对象发生某些有趣的事情时,Web 浏览器就会产生事件(event). JavaScript ...