易被忽视的js事件问题总结

2024-09-27 08:45:03

一、跨平台事件

什么叫跨平台事件？即在不同的浏览器上执行同一事件，所使用的方法不同。

什么是EventUtil对象？有什么作用？即将所有与事件相关的函数，融合在一起的一个容器，方便管理事件对象，它没有属性。主要处理DOM事件和IE事件的磨合，使其尽可能的相似。

下面我们来看一下DOM和IE之间的对象属性和方法做个对比（这里只指出两者之间不同的属性和方法），主要有以下五大点：
DOM属性和方法 IE属性和方法
charcode              keycode
preventDefault     returnValue=false
relatedTarget        fromobj|toobj
stopPropation      cancelBuble=true
target                    srcobj

我们用一个小demo看一下，能够很好的解决事件跨平台的兼容问题：

<html>
<head>
  <title>eventUtil</title>
  <script eventType="text/javascript">
    var eventUtil = {
      //监听事件
      addListener: function(obj, eventType, fn) {
        if (obj.addEventListener) {
          obj.addEventListener(eventType, fn, false);
        } else if (obj.attachEvent) {
          obj.attachEvent('on' + eventType, fn);
        } else {
          obj['on' + eventType] = fn;
        }
      },
      //返回event对象
      getEvent: function(event) {
        return event || window.event;
        //return event ? event : window.event;
      },
      //返回目标事件对象
      getTarget: function(event) {
        return event.target || event.srcobj;
      }，
      preventDefault: function(event) {
        if (event.preventDefault) {
          event.preventDefault();
        } else {
          event.returnValue = false;
        }
      },
      removeListener: function(obj, eventType, fn) {
        if (obj.removeEventListener) {
          obj.removeEventListener(eventType, fn, false);
        } else if (obj.deattachEvent) {
          obj.detachEvent(eventType, fn);
        } else {
          obj['on' + eventType] = null;
        }
      },

      stopPropagation: function(event) {
        if (event.stopPropagation) {
          event.stopPropagation();
        } else {
          event.cancelBubble = true;
        }
      }
    };
  </script>
</head>
<body>
  <input eventType="button" value="click me" id="btn" />
  <p>event</p>
  <a>Hello word!</a>
  <script eventType="text/javascript">
  function addBtnListen(event)
  {
    var event = eventUtil.getEvent(event);
    var target = eventUtil.getTarget(event);
    alert("my name is kock");
    alert(event.eventType);
    alert(target);
    eventUtil.stopPropagation(event);

  }
  function getBodyListen(event)
  {
      alert("click body");
  }
  function getLinkListen(event)
  {
       alert("prevent default event");
       var event = eventUtil.getEvent(event);
       eventUtil.preventDefault(event);
  }
  window.onload=function()
  {
      var btn = document.getobjById("btn");
      var link = document.getobjsByTagName("a")[0];
      eventUtil.addListener(btn, "click", addBtnListen);
      eventUtil.addListener(document.body, "click", getBodyListen);
      eventUtil.addListener(link, "click",getLinkListen);
  }
</script>
</body>
</html>

上面的方法能够解决事件跨平台问题，接下来，我们看下charCode的属性。

首先给eventUtil定义一个新方法，formatEvent,接受一个参数，即Event对象。

eventUtil.formatEvent=function(event)
{
  if(isIE&&isWin)---检测浏览器的问题

  {
   event.charCode=(event.type=="keypress")?event.keycode:0;
   event.eventphase=2;--表示冒泡阶段，IE仅支持冒泡阶段
  }
  return event;
}

二、关于冒泡中的target和currentTarget

target在事件流的目标阶段；currentTarget在事件流的捕获，目标及冒泡阶段。只有当事件流处在目标阶段的时候，两个的指向才是一样的，而当处于捕获和冒泡阶段的时候，target指向被单击的对象而currentTarget指向当前事件的父级。

<div id="outer" style="background:#099">
      <p>我是目标div</p>  ----点击这部分，输出：e.target.tagName : P || e.currentTarget.tagName : DIV
      <p id="inner" style="background:#9C0">我是目标p</p> ----点击这部分，输出：e.target.tagName : P || e.currentTarget.tagName : DIV

      <br> ----点击这部分，输出：e.target.tagName : DIV || e.currentTarget.tagName : DIV

</div>

//看下第二个变列：
<div id="outer" style="background:#099">
      <div>我是目标div</div>  ----点击这部分，输出：e.target.tagName : DIV || e.currentTarget.tagName : DIV
      <p id="inner" style="background:#9C0">我是目标p</p> ----点击这部分，输出：e.target.tagName : P || e.currentTarget.tagName : DIV

      <br> ----点击这部分，输出：e.target.tagName : DIV || e.currentTarget.tagName : DIV

</div>

function getObj(id)
{
  return document.getElementById(id);
}
function addEvent(obj, event, fn)
{
  if(window.attachEvent)
  {
   obj.attachEvent("on" + event, fn);
  }
  else if(window.addEventListener)
  {
   obj.addEventListener(event, fn, false);
  }
}
function test(e)
{
  alert("e.target.tagName : " + e.target.tagName + "\n e.currentTarget.tagName : " + e.currentTarget.tagName);
 }
   var outer = getObj("outer");
   var inner = getObj("inner");
   //addEvent(inner, "click", test);
   addEvent(outer, "click", test);

三、IE和DOM区别
                         DOM                                IE
获取目标       event.target                     event.srcElement
获取字符代码 event.charCode              event.keyCode
阻止默认行为 event.prevetDefault()      event.returnvalue=false
冒泡               event.stopPropagation() event.cancelBubble=true

关于阻止默认行为，比如，当用户右击鼠标时，如果你不想菜单弹出，则可以使用阻止默认行为：

document.body.oncontextmenu=function(event)
{
  if(isIE)
  {
     var oEvent=window.event;
     oEvent.returnValue=false; //也可以直接是return false；阻止默认行为
  }
  else
  {
    oEvent.preventDefault();
  }
}

四、鼠标事件

<p>use your mouse to click and double click the red square</p>
<div style="width:100px;height:100px;background:red"
    onmouseover="handleEvent(event)"
    onmouseout="handleEvent(event)"
    onmousedown="handleEvent(event)"
    onmouseup="handleEvent(event)"
    onclick="handleEvent(event)"
    ondblclick="handleEvent(event)" id="div1"
   >
</div>
<p><textarea id="txt1" rows="5" cols="45"></textarea></p>
<!--检测键盘事件-->
<p><input type="text" id="textbox"
      onkeydown="handle(event)"
      onkeypress="handle(event)"
      onkeyup="handle(event)"
     ></p>
<p><textarea id="txt2" rows="10" cols="45"></textarea></p>

js文件如下：

function handleEvent(event)
{
  var oText=document.getElementById('txt1');
  oText.value+= "\n"+event.type;
  oText.value+= "\n target is "+(event.srcElement||event.target).id;
  oText.value+="\n at ("+event.clientX+","+event.clientY+")in the client";
  oText.value+="\n at ("+event.screenX+","+event.screenY+")in the client";
  oText.value+="\n button down is"+event.button;
  var arrKeys=[];
  oText.value+="\n relatedTarget is"+event.relatedTarget.tagName;
  //event.relatedTarget.tagName可以判断鼠标的来源和出处
}
function handle(event)
{
  var oText2=document.getElementById('txt2');
  oText2.value+="\n"+event.type;
  var arrKeys=[];
 if(event.shiftKey){arrKeys.push("Shift");}
 if(event.ctrlKey){arrKeys.push("Ctrl");}
 if(event.altKey){arrKeys.push("Alt");}
  oText2.value+="\n keydown is "+arrKeys;
}

以上就是本文的全部内容，希望对大家的学习有所帮助。

JavaScript事件代理和委托详解

在javasript中,代理.委托经常出现. 那么它究竟在什么样的情况下使用?它的原理又是什么? 这里介绍一下javascript delegate的用法和原理,以及Dojo,jQuery等框架中delegate的接口. JavaScript事件代理事件代理在JS世界中一个非常有用也很有趣的功能.当我们需要对很多元素添加事件的时候,可以通过将事件添加到它们的父节点而将事件委托给父节点来触发处理函数. 这主要得益于浏览器的事件冒泡机制,下面我们具体举个例子来解释如何使用这个特性. 这个例子主要取
javascript事件委托的用法及其好处简析

本文为大家简单介绍了javascript事件委托的用法及其好处,供大家参考,具体内容如下事件委托:利用冒泡的原理,把事件加到父级上,触发执行效果, 好处:提高性能,新添加的元素还会有之前的事件. event对象:事件源,不管在哪个事件中,只要你操作的那个元素就是事件源获取事件源: IE:window.event.srcElement 标准下:event.target target.nodeName来判断是哪个标签代码应用如下: <!DOCTYPE html PUBLIC "-//W
浅析js绑定事件的常用方法

浅析js绑定事件的常用方法 <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http:
js中最容易被忽视的事件问题大总结

什么叫跨平台事件?即在不同的浏览器上执行同一事件,所使用的方法不同. 什么是EventUtil对象?有什么作用?即将所有与事件相关的函数,融合在一起的一个容器,方便管理事件对象,它没有属性.主要处理DOM事件和IE事件的磨合,使其尽可能的相似. 下面我们来看一下DOM和IE之间的对象属性和方法做个对比(这里只指出两者之间不同的属性和方法),主要有以下五大点: DOM属性和方法 IE属性和方法 charcode keycode preventDefault returnValue=false re
js添加事件的通用方法推荐

js添加事件的通用方法推荐 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p id="p1">测试添加事件:firefox使用addEventListener,ie使用attachEvent<br> 点击此p标签,绑定了2个弹
js添加绑定事件的方法

先介绍js添加事件通用方法,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p id="p1">测试添加事件:firefox使用addEventListener,ie使用attachEvent<br> 点击此p标签
JavaScript绑定事件监听函数的通用方法

事件绑定的3中常用方法:传统绑定.W3C绑定方法.IE绑定方法.但是,在实际开发中对于我们来讲重要的是需要一个通用的.跨浏览器的绑定方法.如果我们在互联网上搜索一下会发现许多方法,以下是比较知名的几种方法: 在开始学期下面几种方法之前,应当讨论一下,一个好的addEvent()方法应当达到哪些要求: a.支持同一元素的同一事件句柄可以绑定多个监听函数: b.如果在同一元素的同一事件句柄上多次注册同一函数,那么第一次注册后的所有注册都被忽略: c.函数体内的this指向的应当是正在处理事件的节点(
谈一谈JS消息机制和事件机制的理解

消息/事件机制是几乎所有开发语言都有的机制,并不是deviceone的独创,在某些语言称之为消息(Event),有些地方称之为(Message). 其实原理是类似的,只不过有些实现的方式要复杂一点.我们deviceone统一就叫消息. 消息基础概念还有一些初学者不太熟悉这个机制,我们先简单介绍一些基础概念,如果熟悉的人可以跳过这个部分. 一个/条消息可以理解为是一个数据结构,包含以下几个基本部分: 1.消息源:就是消息的来源,发出这个消息的对象 2.消息名:就是消息的唯一标示 3.消息数据:消
JavaScript事件处理的方式(三种)

最近这段时间因为每天要修改网站,为网站做特效,所以看了很多的js接触事件,自己只会使用一小部分,有时用的时候也比较混乱,现在系统的整理了一下,特此分享到我们平台供大家参考下! 一.什么是JavaScript事件? 事件(Event)是JavaScript应用跳动的心脏,也是把所有东西粘在一起的胶水,当我们与浏览器中Web页面进行某些类型的交互时,事件就发生了. 事件可能是用户在某些内容上的点击.鼠标经过某个特定元素或按下键盘上的某些按键,事件还可能是Web浏览器中发生的事情,比如说某个Web页面
详解JavaScript中的自定义事件编写

我们可以自定义事件来实现更灵活的开发,事件用好了可以是一件很强大的工具,基于事件的开发有很多优势(后面介绍). 与自定义事件的函数有 Event.CustomEvent 和 dispatchEvent. 直接自定义事件,使用 Event 构造函数: var event = new Event('build'); // Listen for the event. elem.addEventListener('build', function (e) { ... }, false); // Disp
JS创建事件的三种方法(实例代码)

1.普通的定义方式 <input type="button" name="Button" value="确定" onclick="Sfont=prompt('请在文本框中输入红色','红色',' 提示框 '); if(Sfont=='红色'){ form1.style.fontFamily='黑体'; form1.style.color='red'; }" /> 这是最常见的一种定义方式,直接将JS事件定义在需要的

易被忽视的js事件问题总结

相关推荐

随机推荐