js中最容易被忽视的事件问题大总结


Posted in Javascript onMay 15, 2016

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

什么是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;
}

以上这篇js中最容易被忽视的事件问题大总结就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
记录几个javascript有关的小细节
Apr 02 Javascript
JavaScript 实现??打印?理
Apr 28 Javascript
基于jQuery的固定表格头部的代码(IE6,7,8测试通过)
May 18 Javascript
javascript闭包的理解和实例
Aug 12 Javascript
js图片轮播效果实现代码
Apr 18 Javascript
JQuery 获取Dom元素的实例讲解
Jul 08 jQuery
JavaScript实现数值自动增加动画
Dec 28 Javascript
使用webpack搭建react开发环境的方法
May 15 Javascript
Vue+webpack项目配置便于维护的目录结构教程详解
Oct 14 Javascript
JavaScript Canvas编写炫彩的网页时钟
Oct 16 Javascript
jQuery 添加元素和删除元素的方法
Jul 15 jQuery
分享一个vue实现的记事本功能案例
Apr 11 Vue.js
jquery点击改变class并toggle的实现代码
May 15 #Javascript
js停止冒泡和阻止浏览器默认行为的简单方法
May 15 #Javascript
浅析js绑定事件的常用方法
May 15 #Javascript
js添加事件的通用方法推荐
May 15 #Javascript
js阻止默认浏览器行为与冒泡行为的实现代码
May 15 #Javascript
JQuery validate插件Remote用法大全
May 15 #Javascript
js阻止浏览器默认行为触发的通用方法(推荐)
May 15 #Javascript
You might like
ADODB的数据库封包程序库
2006/12/31 PHP
解析用PHP读写音频文件信息的详解(支持WMA和MP3)
2013/05/10 PHP
jQuery 锚点跳转滚动条平滑滚动一句话代码
2010/04/30 Javascript
Jquery多选下拉列表插件jquery multiselect功能介绍及使用
2013/05/24 Javascript
js中return false(阻止)的用法
2013/08/14 Javascript
JQuery中$(document)是什么意思有什么作用
2014/07/21 Javascript
node.js中的fs.readlink方法使用说明
2014/12/17 Javascript
JS+HTML5手机开发之滚动和惯性缓动实现方法分析
2016/06/12 Javascript
js仿百度切换皮肤功能(html+css)
2016/07/10 Javascript
javascript 闭包详解及简单实例应用
2016/12/31 Javascript
json的结构与遍历方法实例分析
2017/04/25 Javascript
javascript 开发之百度地图使用到的js函数整理
2017/05/19 Javascript
Vue.js中的extend绑定节点并显示的方法
2019/06/20 Javascript
vue history 模式打包部署在域名的二级目录的配置指南
2019/07/02 Javascript
Vue常用API、高级API的相关总结
2021/02/02 Vue.js
Python 使用requests模块发送GET和POST请求的实现代码
2016/09/21 Python
使用Python写CUDA程序的方法
2017/03/27 Python
Django中使用celery完成异步任务的示例代码
2018/01/23 Python
Python cookbook(数据结构与算法)从序列中移除重复项且保持元素间顺序不变的方法
2018/03/13 Python
Python enumerate函数遍历数据对象组合过程解析
2019/12/11 Python
pytorch实现从本地加载 .pth 格式模型
2020/02/14 Python
Pytorch 高效使用GPU的操作
2020/06/27 Python
解决keras,val_categorical_accuracy:,0.0000e+00问题
2020/07/02 Python
基于CSS3实现的漂亮Menu菜单效果代码
2015/09/10 HTML / CSS
使用phonegap播放音频的实现方法
2017/03/31 HTML / CSS
BCBG官网:BCBGMAXAZRIA
2017/12/29 全球购物
开普敦通行证:Cape Town Pass
2019/07/18 全球购物
Hotels.com泰国:酒店预订网站
2019/11/20 全球购物
简历的自我评价
2014/02/03 职场文书
《穷人》教学反思
2014/04/08 职场文书
网络技术专业求职信
2014/05/02 职场文书
经费申请报告范文
2015/05/18 职场文书
2015国庆节66周年标语
2015/07/30 职场文书
Python爬虫爬取全球疫情数据并存储到mysql数据库的步骤
2021/03/29 Python
Mysql超详细讲解死锁问题的理解
2022/04/01 MySQL
Win11 21h2可以升级22h2吗?看看你的电脑符不符合要求
2022/07/07 数码科技