码迷,mamicode.com
首页 > 编程语言 > 详细

javascript中事件概述

时间:2014-05-22 16:23:41      阅读:393      评论:0      收藏:0      [点我收藏+]

标签:style   class   blog   c   code   java   

事件就是用户或浏览器自身执行的某种动作。诸如click、load、和mouseover,都是事件的名字。而响应某个事件的函数就叫做事件处理程序(或事件侦听器)。事件处理程序的名字以"on"开头,因此click事件的事件处理程序就是onclick,load事件的事件处理程序就是onload。

以下是跨浏览器的javascript中事件的相关方法

bubuko.com,布布扣
 1 //跨浏览器的方法
 2 var EventUtil={
 3     /*
 4     与addHandler()对应的方法是removeHandler(),他们的职责分别是添加和移除事件处理程序;
 5     这两个方法首先都会检测传入的元素中是否存在DOM2级方法(所有DOM节点,IE9+、firefox、safari、chrome、opera都支持),如果存在则使用该方法:传入事件类型、事件处理程序函数和第三个参数false(表示冒泡阶段);
 6     如果存在的是IE的方法,则采用第二种方案(IE及opera支持);
 7     最后一种方案就是使用DOM0级方法(虽然现在浏览器支持,但应该都不会执行这里的代码,前面两种方案基本够了,且前面两种方案支持在一个元素上添加多个事件处理程序,而最一种方案只能添加一个事件处理程序)
 8     */
 9     addHandler:function(element,type,handler){
10         if(element.addEventListener){
11             element.addEventListener(type,handler,false);
12         }else if(element.attachEvent){
13             element.attachEvent("on"+type,handler);
14         }else{
15             element["on"+type]=handler;
16         }
17     },
18     removeHandler:function(element,type,handler){
19         if(element.removeEventListener){
20             element.removeEventListener(type,handler,false);
21         }else if(element.detachEvent){
22             element.detachEvent("on"+type,handler);
23         }else{
24             element["on"+type]=null;
25         }
26     },
27     //获取事件对象
28     getEvent:function(event){
29         return event?event:window.event;
30     },
31     //获取事件的目标
32     getTarget:function(event){
33         return event.target||event.srcElement;
34     },
35     //取消事件默认行为
36     preventDefault:function(event){
37         if(event.preventDefault){
38             event.preventDefault();
39         }else{
40             event.returnValue=false;
41         }
42     },
43     //阻止事件冒泡
44     stopPropagation:function(event){
45         if(event.stopPropagation){
46             event.stopPropagation();
47         }else{
48             event.cancelBubble=true;
49         }
50     }
51 }
bubuko.com,布布扣

未完,待续。。。

javascript中事件概述,布布扣,bubuko.com

javascript中事件概述

标签:style   class   blog   c   code   java   

原文地址:http://www.cnblogs.com/wuqun/p/3744060.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!