JS事件(二)事件对象

html事件处理程序中,变量event中保存着事件对象

<button onclick="alert(ev.type)" id="btn">click</button>

1、DOM中的事件对象

无论是DOM0还是DOM2,事件处理程序中都会传入一个event对象

var btn=document.getElementById("btn");
    btn.onclick=function(){
        alert(1);
    }
    btn.addEventListener("click",function(ev){
        alert(ev.type);
},false);

所有的事件都会有下表列出的成员:

在事件处理程序内部,对象this始终等于currentTarget的值,而target是事件实际目标

stopPropagation用于立即停止事件在DOM层中的传播:

var btn=document.getElementById("btn");
btn.onclick=function(event){
    alert("btn");
    event.stopPropagation();
}
document.body.onclick=function(event){
    alert("body");//不会执行
}

2、IE中的事件对象

访问IE中的event对象的方式取决于指定事件处理程序的方法

2.1、DOM0级:

IE8-浏览器不识别传入的event对象,需要在事件处理函数内部声明

var btn=document.getElementById("btn");
btn.onclick=function(event){
    alert(window.event.type);
}

IE9+浏览器以及其他高级浏览器则是两种方式都支持

2.2、attachEvent:

支持传入event参数

所有的事件都会有下表列出的成员:

this不一定指向目标元素,也可能指向全局(attachEvent),故用event.srcElement比较保险

兼容浏览器的事件处理对象:

var EventUtil={
        addHandler:function(element,type,handler){
            if(element.addEventListener){
                element.addEventListener(type,handler,false);
            }
            else if(element.attachEvent){
                element.attachEvent(‘on‘+type,handler);
            }
            else{
                element[‘on‘+type]=handler;
            }
        },

        removeHandler:function(element,type,handler){
            if(element.removeEventListener){
                element.removeEventListener(type,handler,false);
            }
            else if(element.detachEvent){
                element.detachEvent(‘on‘+type,handler);
            }
            else{
                element[‘on‘+type]=null;
            }
        },

        getEvent:function(event){
            return event ? event : window.event;
        },

        getTarget:function(event){
            return event.target || event.srcElement;
        },

        preventDefault:function(event){
            if(event.preventDefault){
                event.preventDefault();
            }
            else{
                event.returnValue=false;
            }
        },

        stopPropagation:function(event){
            if(event.stopPropagation){
                event.stopPropagation();
            }
            else{
                event.cancelBubble=true;
            }
        }

    }                                    
时间: 2024-11-09 01:01:18

JS事件(二)事件对象的相关文章

HTML 事件(二) 事件的注册与注销

本篇主要介绍HTML元素事件的注册.注销的方式. 其他事件文章 1. HTML 事件(一) 事件的介绍 2. HTML 事件(二) 事件的注册与注销 3. HTML 事件(三) 事件流[未发布] 4. HTML 事件(四) 模拟事件操作[未发布] 目录 1. 注册事件:介绍通过元素的事件属性.addEventListener()以及attachEvent()方法进行事件的注册. 2. 注销事件:介绍通过removeEventListener().detachEvent()以及事件属性赋值为nul

HTML 事件(三) 事件流与事件委托

本篇主要介绍HTML DOM中的事件流和事件委托. 其他事件文章 1. HTML 事件(一) 事件的介绍 2. HTML 事件(二) 事件的注册与注销 3. HTML 事件(三) 事件流与事件委托 4. HTML 事件(四) 模拟事件操作[未发布] 目录 1. 事件流 1.1 何为事件流 1.2 事件流的三个阶段 1.3 addEventListener()注册事件流的阶段 1.4 阻止事件流的传播 2. 事件委托 2.1 何为事件委托 2.2 ul.li场景示例 2.3 JQuery的事件委托

HTML 事件(一) 事件的介绍

本篇主要介绍HTML中的事件知识:事件相关术语.DOM事件规范.事件对象. 其他事件文章 1. HTML 事件(一) 事件的介绍 2. HTML 事件(二) 事件的注册与注销[未发布] 3. HTML 事件(三) 事件流[未发布] 4. HTML 事件(四) 模拟事件操作[未发布] 目录 1. 事件相关术语:介绍事件相关的术语:如:事件类型.事件名称.事件目标等等. 2. DOM事件规范:介绍W3C目前定义的三种DOM事件规范:0.2.3级. 3. 事件类型:介绍了HTML目前的事件类型:如:U

js中的事件,内置对象,正则表达式

[JS中的事件分类] 1.鼠标事件: click/dbclick/mouseover/mouseout/mousemove/mousedown/mouseup 2.键盘事件: keydown: 键盘按下去触发 keypress: 键盘按下并松开的瞬间触发 keyup: 键盘抬起时触发 [注意事项:(了解)] ① 执行顺序: keydown--keypress--keyup ② 长按时,会循环不断的执行keydown-keypress ③ 有keydown事件,不一定有keyup事件(事件触发过程

从零开始的JS生活(二)——BOM、DOM与JS中的事件

上回书说道,JS中变量.运算符.分支结构.循环和嵌套循环等内容.本回就由本K给大伙唠唠JS中的BOM.DOM和事件. 一."花心大萝卜"--BOM 1.震惊,FFF团为何对BOM举起了火把--BOM简介 BOM(Browser Object Model) 是指浏览器对象模型,在JS中BOM是个不折不扣的花心大萝卜,因为它有很多个对象,其中代表浏览器窗口的Window对象是BOM的"正室".也就是最重要的,其他对象都是正室的下手.或者叫侧室也不足为过. 2.细数BOM

JS基础--函数与BOM、DOM操作、JS中的事件以及内置对象

   前   言 絮叨絮叨 这里是JS基础知识集中讲解的第三篇,也是最后一篇,三篇JS的基础,大多是知识的罗列,并没有涉及更难得东西,干货满满!看完这一篇后,相信许多正在像我一样正处于初级阶段的同学,经过初步的学习,会对这一门语言有了一定深入的了解,也会感受到这一门语言的强大之处.希望各位同学通过一定的学习,会得到等大的收获. 因为是最后一篇所以内容可能有点多,希望各位同学能够慢慢看,细细看,让我们一起学习,一起进步,一起感受JS的魅力. 一函数 函数的声明及调用 1.函数的声明格式: func

js 函数 常用事件 document事件 window对象

js入口函数 window.onload=function(){ } 函数 定义 有一定功能代码体的集合.函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块. 基本格式  function functionname(){执行代码 } 分类 基础函数 <script type="text/javascript"> function aa(){ alert("这是我的第一个函数"); } aa(); </script> 参数函数: fan

js中的事件 bom对象 dom对象.

3.事件 什么是事件?为什么使用事件? 我们学习事件首先了解一些概念 事件源 事件 监听器 事件源:事件的源头(也就是这个事件是由某某触发的,那么我们就管其叫事件源) 监听器:监听事件发生的组件.那么监听器要想监听事件是否发生,必须注册监听(绑定监听) js中常用的事件 1.onclick 鼠标点击某个对象 我们在开发中一般会对按钮,文本框或radio checkbox等进行onclick操作. 2.onblur 失去焦点 3.onfocus 获去焦点 4.onchange 改变域的内容 针对于

JS事件处理和事件对象

1.HTML事件处理 直接添加到html结构中处理程序属性 <body> <button onclick="demo()">按钮</button> <script> function demo(){ alert("html事件处理"); } </script> </body> 这种html事件处理有很大坏处是修改一处函数名称必须同时修改两处(onclick事件内容也要修改) 2.DOMO级事件处

js事件处理、事件对象

事件类型分类: 1 添加在html结构中的事件 <div id="div1" onclick="alert('append click event in html')"> </div> 点击div1之后弹出 append click event in html:其实在html结构中添加的事件也属于dom0级事件. 2 dom0级事件处理 <div id="div1"> </div> <scri