`

js event 理解与使用

 
阅读更多

event对象

IE 中可以直接使用 event 对象,而 FF 中则不可以,解决方法之一如下:

var theEvent = window.event || arguments.callee.caller.arguments[0];

第二种是将 event 作为参数来传递:

document.onclick=function xxx(e){var theEvent = window.event || e;}

 

srcElement 和 target

在 IE 中 srcElement 表示产生事件的源,比如是哪个按钮触发的 onclick 事件,FF 中则是 target。

var theEvent = window.event || arguments.callee.caller.arguments[0];

var theObj=theEvent.target || theEvent.srcElement;

例子:

document.onclick = function(e){

           var theEvent = window.event || e;

           var theObj=theEvent.target || theEvent.srcElement;

}

function clickAction(){

       var theEvent = window.event || arguments.callee.caller.arguments[0];

       var theObj=theEvent.target || theEvent.srcElement;

       // do something;

}

 

event.keyCode 和event.which

FF不支持window.event.keyCode,代替着是event.which

列子:

//在网页上面屏蔽tab键的代码

document.onkeydown = function (e){

            var theEvent = window.event || e;

            var code = theEvent.keyCode || theEvent.which;

            if(code == 9){

              return false;

            }

}

 

 

JavaScript 阻止冒泡

 

//阻止冒泡事件   
 function stopBubble(e) {   
     if (e && e.stopPropagation) {//非IE   
         e.stopPropagation();   
     }   
     else {//IE   
         window.event.cancelBubble = true;   
     }   
 } 

 

一个页面有两个click 事件,一个是div.onclick,另一个就是document.onclick,那么问题就出现了,在调用 div.onclick的时候,由于冒泡事件的存在,会自动的调用document.onclick,由于冒泡的顺序是从里向外的

(div->body->document->html)所以div.onclick事件就会被覆盖掉,也就不会执行了,解决的方案其实也是很简单的哦,就是在执行div.onclick的时候阻止冒泡事件就好了,那怎么阻止呢,就调用上面的函数就ok了!哈哈! 
ps:在介绍一下阻止浏览器默认行为的方法,大同小异,这里就不再赘述了。

 

Js代码  
function stopDefault(e) {   
     //阻止默认浏览器动作(W3C)   
     if (e && e.preventDefault)   
         e.preventDefault();   
     //IE中阻止函数器默认动作的方式   
     else  
         window.event.returnValue = false;   
     return false;   
 }  

 

分享到:
评论

相关推荐

    Javascript中, event 的 target 与 currentTarget 的区别

    在JavaScript的世界里,事件处理是Web开发中不可或缺的一部分。当我们谈论`event`对象时,`target`和`currentTarget`是两个非常关键的属性,它们在处理事件流时扮演着重要角色。理解这两个属性的区别对于编写高效且...

    Event 对象的使用方法

    Event对象经常与JavaScript函数结合,用于响应用户的交互行为。 事件句柄,也称为事件处理器,是HTML 4.0引入的新特性,允许我们在HTML标签中定义事件触发的行为。这些行为会在特定的事件发生时执行,例如用户点击...

    A JavaScript Event Bus

    为了深入理解这个Event Bus,你需要查看源代码,尤其是`AjaxEventBus.js`(如果存在),其中应该定义了事件总线的结构和操作。同时,`AjaxEventBus.aspx.cs`(假设存在)会展示C#后端如何响应前端的Ajax请求。通过...

    js-event事件

    在JavaScript中,`Event`对象扮演着极其重要的角色,它不仅代表着一个事件的状态,还提供了处理这些事件的方法与属性,使得开发者能够轻松地实现与用户的交互。通过深入理解`Event`对象,我们可以更好地控制页面的...

    使用JS监听键盘按下事件(keydown event)

    本文将详细介绍如何使用JavaScript来监听键盘按下事件(keydown event),并结合示例代码来说明如何实现。 首先,我们需要了解JavaScript中的键盘事件主要有三个:keydown、keypress和keyup。其中,keydown事件在...

    event.keycode大全(javascript)

    下面是一个简单的示例,展示了如何在JavaScript中使用`event.keyCode`来检测用户按下的是哪个键: ```javascript document.addEventListener('keydown', function(event) { var keyCode = event.keyCode; if ...

    前端项目-event-source-polyfill.zip

    它是一个JavaScript库,模拟了EventSource接口,使得在不支持原生EventSource的浏览器中也能使用SSE功能。 `event-source-polyfill`的工作原理是,它监听`XMLHttpRequest`或`fetch`的完成事件,然后模拟EventSource...

    JS的Event事件对象使用方法

    总的来说,理解和使用Event对象是JavaScript开发中的关键技能,这包括了解如何获取事件对象、访问其属性以及调用相关方法。通过上述的`getEvent`函数,我们可以确保在各种浏览器环境中都能正确地获取到事件对象,...

    jquery.event.drag jquery拖动插件

    1. **引入依赖**:首先,确保引入jQuery库和`jquery.event.drag.js`插件文件。 2. **初始化插件**:对需要拖动的元素应用`.eventDrag()`方法,可以设置选项,如: ```javascript $('.draggable-element')....

    event和srcElement说明,方法,技巧

    ### event和srcElement详解 #### 一、概述 在Web开发中,事件处理是非常重要的一个环节,它使得页面能够响应用户的交互行为。...理解这些基础知识对于编写高质量、兼容性强的JavaScript代码至关重要。

    visualevent.zip

    这款工具的核心价值在于帮助用户可视化地查看页面上的JavaScript事件监听器,使得理解和调试网页交互变得更为直观和简单。 首先,Visual Event插件的主要功能在于实时显示页面元素上的所有事件监听器。当你打开一个...

    javascript Event对象详解

    JavaScript中的Event对象是事件处理的核心部分,它包含了与事件相关的所有信息,如事件类型、触发事件的元素、鼠标和键盘的状态等。以下是对Event对象及其重要属性的详细解释: 1. **altKey**:这个属性用于检查...

    window.event 对象详解

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

    深入理解JavaScript异步

    深入理解这一主题,对于任何JavaScript开发者来说都是至关重要的。在这个教程中,我们将探索JavaScript异步处理的各个方面,包括事件循环、回调函数、Promise、Async/Await以及generator等。 首先,我们来了解异步...

    js-keyboard-event.rar

    在本资源“js-keyboard-event.rar”中,我们很可能找到了关于如何在JavaScript中处理键盘事件的相关教程或代码示例。 键盘事件在JavaScript中分为几个主要类型,包括`keydown`、`keyup`和`keypress`。`keydown`事件...

    vue.js v-on事件使用,vue.js event事件绑定

    Vue.js 是一款非常流行的前端JavaScript框架,用于构建用户界面。在Vue.js中,事件处理是其核心特性之一,使得开发者可以轻松地响应用户交互。`v-on`指令就是Vue.js中用于事件绑定的关键机制,它允许我们将DOM事件与...

    Javascript中的事件--Event对象

    理解`Event`对象及其属性和方法是成为熟练JavaScript开发人员的关键。通过掌握这些基础知识,你可以更有效地处理用户交互,创建响应式和动态的Web应用程序。无论你是初学者还是有经验的开发者,深入了解`Event`对象...

    html5 eventsource

    为了实现跨浏览器的兼容性,开发者通常需要使用polyfills(如EventSource.js)或者考虑使用WebSocket等替代技术。WebSocket提供双向通信,但实现起来比EventSource复杂,需要更多的服务器配置和资源。 实际应用中的...

    javascript Event对象详解及使用示例

    JavaScript中的Event对象是处理事件的核心,它包含了与事件相关的各种信息,如事件源、按键状态、鼠标位置等。Event对象是在事件发生时由浏览器自动创建的,它在事件发生期间有效,之后会被销毁。理解并熟练运用...

    javascript event Keycode

    JavaScript中的事件处理是Web...总的来说,理解并恰当使用`event.keyCode`对于编写响应用户键盘输入的JavaScript代码至关重要。然而,随着技术的发展,开发者应当逐渐转向更现代的API,以获得更稳定和一致的用户体验。

Global site tag (gtag.js) - Google Analytics