zoukankan      html  css  js  c++  java
  • javascript中事件概述

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

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

     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     //获取鼠标滚轮增量值,当为120时表示向前滚动,当为-120时表示向后滚动
    52     getWheelDelta:function(event){
    53         if(event.wheelDelta){//兼容除firefox外的其他浏览器,event.wheelDelta为120时表示向前,当为-120时表示向后
    54             //return (client.engine.opera&&client.engine.opera<9.5?-event.wheelDelta:event.wheelDelta);
    55             return (window.opera&&window.opera.version()<9.5?-event.wheelDelta:event.wheelDelta);
    56         }else{//兼容firefox浏览器,在firefox中event.detail值为3表示向后滚动,为-3表示向前
    57             return -event.detail*40;
    58         }
    59     }
    60 }

    未完,待续。。。

  • 相关阅读:
    rest framework 认证 权限 频率
    rest framework 视图,路由
    rest framework 序列化
    10.3 Vue 路由系统
    10.4 Vue 父子传值
    10.2 Vue 环境安装
    10.1 ES6 的新增特性以及简单语法
    Django 跨域请求处理
    20190827 On Java8 第十四章 流式编程
    20190825 On Java8 第十三章 函数式编程
  • 原文地址:https://www.cnblogs.com/wuqun/p/3744060.html
Copyright © 2011-2022 走看看