`
deng131
  • 浏览: 673775 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

事件event 和 window.event区别

阅读更多
在IE/Opera中,evgl.srcElement?evgl.srcElement:evgl.target
是window.event,而在Firefox中,是event
而事件的对象,在IE中是 window.event.srcElement,在Firefox中是event.target,而在Opera中则两者都支持。
我们还是用例子来说明。
//***********************************
<HTML>
<HEAD>
<TITLE> event的跨浏览器测试 </TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
//Firefox 中在写关于event的函数的时候,必须把event对象作为参数传递给函数,这样才能使用event对象
function doTestEvent( evt )
{
  //如果是IE/Opera,我们就用 srcElement 来获取触发事件的对象
  // 如果是Firefox,我们就用 target 来获取触发事件的对象
  var src = evt.srcElement ? evt.srcElement : evt.target;
  alert( src.value );
}
//-->
</script>
</head>
<body>

<form name="frmtest">
<input type="button" value="event 测试" onclick="doTestEvent(event);" name="bttest">
</form>

</body>
</html>
//***********************************

这里顺便说一下判断鼠标按键的问题。
在 IE 里面
左键是 window.event.button = 1
右键是 window.event.button = 2
中键是 window.event.button = 4
没有按键动作的时候 window.event.button = 0

在 Firefox 里面
左键是 event.button = 0
右键是 event.button = 2
中键是 event.button = 1
没有按键动作的时候 event.button = 0

在 Opera 7.23/7.54 里面
鼠标左键是 window.event.button = 1
没有按键动作的时候 window.event.button = 1
右键和中键无法获取

而在 Opera 7.60/8.0 里面
鼠标左键是 window.event.button = 0
没有按键动作的时候 window.event.button = 0
右键和中键无法获取

下面我们写一个能在 IE4.01+/Firefox 0.9+/Opera 7.23+ 环境中均能运行正常的小程序,功能是用鼠标拖动层。
//***********************************
<HTML>
<HEAD>
<TITLE> 可用鼠标拖动的层 </TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
var moving = false;
var initX  = 0;
var initY  = 0;

//*******************
// 获取触发事件的对象
//*******************
function findSrc(evt)
{
  return( evt.target ? evt.target : evt.srcElement );
}

function start(evt)
{
    //按下鼠标左键才允许移动
    //evt.button == 1 IE/Opera 7.23/7.54
    //evt.button == 0 Firefox/Opera 7.6+
    if ( evt.button == 1 || evt.button == 0)
     {
        moving = true;
        initX  = evt.offsetX ? evt.offsetX : evt.layerX;
        initY  = evt.offsetY ? evt.offsetY : evt.layerY;
        findSrc( evt ).style.cursor = "move";
        window.status = "开始(button=" + evt.button + ")";
     } else {
        stop( evt );
     }
}

function stop( evt )
{
    moving = false;
    findSrc( evt ).style.cursor = "";
    window.status = "结束(button=" + evt.button + ")";
}

function move(evt)
{
    //按下鼠标左键才允许移动
    //evt.button == 1 IE/Opera 7.23/7.54
    //evt.button == 0 Firefox/Opera 7.6+
    if (moving && ( evt.button == 1 || evt.button == 0 ))
     {
        var intx = document.body.scrollLeft + evt.clientX; //获取当前鼠标位置的X坐标
        var inty = document.body.scrollTop + evt.clientY; //获取当前鼠标位置的Y坐标

        var div = findSrc( evt );
        div.style.top = inty - initY;
        div.style.left = intx - initX;
        window.status = "X=" + intx + " Y=" + inty + " button=" + evt.button;
     } else {
        window.status = "已停止(button=" + evt.button + ")";
     }
}
//-->
</SCRIPT>
</HEAD>

<BODY>
<div id="mdiv"
     style="position: absolute; width:300px; height: 200px; background-color: #FFFFE1;"
     onmousedown="start( event );"
     onmouseup="stop( event );"
     onmouseout="stop( event );"
     onmousemove="move( event );"></div> </BODY> HTML>

分享到:
评论

相关推荐

    火狐浏览器不支持window.event的解决办法

    火狐浏览器不支持window.event的解决办法,解决不同浏览器针对window.event的差异

    [JS]详尽解析window.event对象

    除了上述属性,`window.event`对象还包含其他属性,如`shiftKey`(检查Shift键状态)、`srcElement`(触发事件的元素,IE中等同于`target`)和`type`(事件类型),以及一些与鼠标和键盘交互相关的属性,如`offsetX`...

    window.event 对象详解

    在JavaScript编程语言中,`window.event`对象是一个特殊对象,它与...尽管现代浏览器推荐使用`addEventListener`和事件处理函数参数来代替全局`window.event`,但在处理兼容性问题时,理解`window.event`仍然是必要的。

    window.event.keycode值大全

    ### Window.event.keycode值大全详解 #### 概述 在JavaScript中,`window.event.keycode`属性被用于获取用户按下键的键盘码。这在处理键盘事件时非常有用,可以帮助开发者识别并响应特定的按键操作。本文将详细...

    火狐下window.event回车改Tab解决方案

    例如,在Internet Explorer(IE)浏览器中,可以直接通过`window.event`来获取当前触发事件的信息;而在其他非IE浏览器(如Firefox)中,则需要通过其他方式来获取事件对象。这导致了在编写跨浏览器兼容性良好的代码...

    高手window.event对象详解

    ### 高手window.event对象详解 #### 一、概述 `window.event` 是一个非常重要的JavaScript内置对象,它...虽然现代浏览器已经广泛支持了更先进的事件处理机制,但在某些情况下了解和使用`window.event`仍然非常重要。

    js弹窗并返回值(window.open方式)

    通过合理的事件监听和通信机制,我们可以在弹出窗口中执行操作并获取返回值,增强了Web应用的交互性和用户体验。在实际开发中,根据具体需求,可以选择合适的通信策略来实现弹窗与原窗口的双向数据交换。

    onunload事件判断浏览器是刷新还是关闭窗口

    我们可以使用 onunload 事件和 event.clientX、event.clientY 属性或 window.event.screenX、window.event.clientY 属性来判断浏览器是刷新还是关闭窗口,这样我们可以执行相应的操作,提高用户体验。 在实际应用中...

    window.event.srcElement 得到事件源对象

    event对象指当前触发的事件对象, window.event.srcElement是指触发事件的对象。比如你设定[removed] = myfunc;这时所有页面点击的事件都交给myfunc处理,在myfunc函数里可以写vSrc = window.event.srcElement,知道

    window.open父子窗口传值问题

    window.addEventListener("message", function(event) { if (event.origin !== "http://yourdomain.com") return; // 检查来源 console.log("Received data:", event.data); }, false); ``` 4. **利用存储API*...

    网页右键ie不支持event.preventDefault和event.returnValue (需要加window)

    本文将详细讲解在IE浏览器中如何阻止右键点击的默认行为以及`event.preventDefault()`和`event.returnValue`的区别。 `event.preventDefault()`是W3C标准中的一个事件处理方法,它的主要作用是阻止一个事件的默认...

    javascript中window.event事件用法详解

    window.event对象是JavaScript中一个特殊的对象,它代表当前发生的事件的状态,包括触发事件的元素、鼠标位置和按键状态等信息。window.event对象仅在事件处理函数运行期间有效,因此它是事件处理函数的局部变量。每...

    替代window.event.srcElement效果的可兼容性的函数

    在JavaScript编程中,特别是在处理事件时...它能够在各种浏览器环境下提供事件对象,使得开发者可以一致地处理事件和访问事件目标元素。在实际开发中,这样的兼容性函数对于创建健壮、跨平台的JavaScript代码至关重要。

    js事件源window.event.srcElement兼容性写法(详解)

    总结来说,JavaScript的事件源处理涉及到浏览器兼容性问题,开发者需要理解`window.event.srcElement`(IE特有)和`event.target`(W3C标准)的区别,并使用适当的兼容性解决方案来确保代码在不同浏览器下都能正常...

    js window.open iframe dialog

    在JavaScript的世界里,`window.open`、`iframe`和`dialog`是三个非常重要的概念,它们在网页交互和页面通信中扮演着关键角色。这里我们将深入探讨这些知识点,并结合实例来帮助你理解它们的用法。 1. `window.open...

    window.showModalDialog的基本用法

    `window.showModalDialog` 和 `window.showModelessDialog` 提供了灵活的方式来创建弹出对话框,适用于需要与用户进行交互的应用场景。需要注意的是,这两个函数仅在 IE 浏览器中可用,并且由于现代浏览器的限制,...

    Javascript中的window.event.keyCode使用介绍

    在现代网页开发中,JavaScript 是一种在浏览器端广泛使用的脚本...在实践中,理解并熟悉window.event.keyCode以及其他相关的事件对象属性(如event.key、event.code等)将帮助开发者更好地控制和响应用户的键盘操作。

    window.event.keyCode兼容IE和Firefox实现js代码

    input type=”text” onkeydown=”keyNumAll... evt : ((window.event) ? window.event : “”); var key = evt.keyCode?evt.keyCode:evt.which;//兼容IE和Firefox获得keyBoardEvent对象的键值 console.info(key);/

Global site tag (gtag.js) - Google Analytics