`
zhouyrt
  • 浏览: 1159184 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

IE9/Firefox/Safari/Chrome/Opera支持模拟触发自定义DOM事件

 
阅读更多

自定义DOM事件是在DOM3中定义的,它不是由DOM原生触发。自定义事件只能通过addEventListener方式添加,其它如内联到html或DOM0方式(el.onXXX=fn)添加的不能触发。如

<!-- 内联事件代码 -->
<div id="d1" onmyevent="alert(this)">DIV1</div>
<script>
    // DOM 0 方式添加
    d1.onmyevent = function(){alert(this)}
</script>

 以下方式可以

<!DOCTYPE html>
<html>
    <head>
        <title>模拟DOM自定义事件</title>
        <meta charset="utf-8">
        <style>
            div {
                background: gold;
                margin: 10px;
            }
        </style>
    </head>
    <body>
        <!-- 内联事件代码 -->
        <div id="d1" onmyevent="alert(this)">DIV1</div>
        <script>
            function $(id) {return document.getElementById(id)}
            function hander(event) {
                alert(event.detail + this.tagName + '')
            }
            var div = $('d1'), customEvent
             
            div.onmyevent = function(){alert('DOM 0')}
            div.addEventListener('myevent', hander, false)
            document.body.addEventListener('myevent', hander, false)
             
            try {
                customEvent = document.createEvent('CustomEvent')
                customEvent.initCustomEvent('myevent', true, false, 'Hello, ')
                div.dispatchEvent(customEvent)
            } catch(e) {
                // 仅IE6/7/8不支持
                alert('Don\'t support DOM CustomEvent')
            }
        </script>
    </body>
</html>

 给页面中div,body添加了一个自定义事件myevent,通过document.createEvent创建一个自定义事件对象,初始化。最后使用dispatchEvent主动派发事件。

 

测试发现IE9/Safari5/Chrome21/Firefox15/Opera12 : 依次弹出了“Hello,DIV”,“Hello,BODY”。说明还冒泡到body上了。

 

注意:内联HTML事件及DOM 0事件均没有触发。

 

相关:

主动派发事件总结

分享到:
评论

相关推荐

    兼容360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗各个浏览器的弹窗js代码

    本文将深入探讨如何使用JavaScript(js)编写兼容360、Firefox、Chrome、Opera、傲游、搜狗和世界之窗等主流浏览器的弹窗代码,以及为何不支持Safari和IE8及以下版本的浏览器。 首先,我们了解JavaScript弹窗的基本...

    Firefox/Chrome/Safari的中可直接使用$/$$函数进行调试

    这里我们探讨的是Firefox、Chrome和Safari浏览器中内置的两个便捷的调试函数:$ 和 $$。 首先,$ 函数在这些浏览器中等同于 `document.getElementById`。这是一个非常实用的功能,因为`getElementById`是JavaScript...

    层随滚动条移动

    - **Firefox**、**Chrome**、**Opera**、**Safari**:这些现代浏览器通常具有良好的DOM支持,因此代码在这些浏览器中的表现会更好。 #### 总结 本文介绍了如何通过JavaScript实现层跟随滚动条移动的技术方案,包括...

    Mozilla Firefox 支持数据岛(第二版)

    比如,Internet Explorer较早地引入了数据岛功能,但其他浏览器如Chrome、Safari和Opera可能需要依赖额外的库或技术,如jQuery的`.data()`方法或Web Components的模板特性来实现类似的功能。这些浏览器可能不直接...

    【JavaScript源代码】JavaScript中事件冒泡机制示例详析.docx

    例如,IE10及以下版本不支持事件捕获,而其他现代浏览器如IE11、Chrome、Firefox和Safari则同时支持捕获和冒泡。 JavaScript提供了`addEventListener`方法来添加事件监听器。该方法接受三个参数:事件名、处理函数...

    深入理解JS DOM事件机制

    然而,在DOM2级事件规范中,目标元素在捕获阶段不会接收到事件,但在某些浏览器中,如Safari、Chrome、Firefox和Opera 9.5及以上版本,目标元素在捕获阶段也会触发事件处理程序。 4. 阻止事件冒泡: 在某些情况下...

    设为首页加入收藏兼容360/火狐/谷歌/IE等主流浏览器的代码

    - 提供的代码主要针对IE、Firefox和Chrome,但对其他浏览器如Safari、Opera或其他基于Chromium的浏览器可能需要额外的适配。 总之,为了实现跨浏览器的“设为首页”和“加入收藏”功能,开发者需要编写特定于...

    前端学习笔记,做一个简单的网站-请自定义一个注册事件的兼容函数,要求兼容三种注册事件方法,学习代码

    首先,`addEventListener` 是 W3C 标准推荐的事件处理方式,适用于所有支持 W3C DOM Level 2 的浏览器,如 Chrome、Firefox、Safari 和 Opera。这个方法接收两个参数:一个是事件名,另一个是事件处理函数。例如,...

    兼容IE8的简单jQuery日期选择器插件

    它确保在IE8及更高版本,以及其他现代浏览器如Chrome、Firefox、Safari和Opera中都能正常工作。 2. **易用性**:这款插件的集成和使用相当简单。只需要在页面中引入jQuery和DCalendar的JS文件,然后通过简单的...

    js中各浏览器中鼠标按键值的差异.docx

    - **Firefox 3.6/Chrome 7/Safari 5**: - `mousedown` 和 `mouseup` 事件中获取中键值为 **1** - `click` 事件也能获取中键值,同样为 **1** - **Opera 10**: - 无法获取中键值,因为Opera不触发与中键相关的...

    jquery实现可编辑表格

    支持全部主流浏览器,包括IE、Firefox、Safari、Chrome和Opera,使得这种技术具有广泛的适用性。 首先,我们需要理解jQuery的基本语法。jQuery的核心在于选择器,它允许我们高效地定位到页面上的特定元素。例如,`$...

    调用js时ie6和ie7,ff的区别

    - **Firefox**:Firefox及其他遵循W3C标准的浏览器,如Chrome、Safari和Opera,使用`addEventListener`方法来添加事件监听器。相应的代码为`element.addEventListener('click', foo, false)`。 2. **事件冒泡与...

    javascript下对于事件、事件流、事件触发的顺序随便说说

    在非IE浏览器中,如Firefox、Safari 和 Opera,它们遵循DOM标准,因此也支持这两种事件流。 事件触发的顺序在不同的浏览器中有所不同。在IE中,使用`addEventListener`动态添加事件时,遵循“先进先出”原则,即先...

    js实现浏览器全屏兼容谷歌火狐等

    "js实现浏览器全屏兼容谷歌火狐等"这个主题就涉及到如何使用JavaScript来实现在不同浏览器上实现全屏功能,并确保与主流浏览器如Google Chrome和Mozilla Firefox等的兼容性。这里我们将详细讲解这一技术实现的原理和...

    JavaScript的onpropertychange事件

    这个事件主要在Internet Explorer浏览器中被广泛使用,因为它是IE特有的,而在其他遵循W3C标准的浏览器(如Firefox、Chrome、Safari和Opera)中,推荐使用`addEventListener`或`attachEvent`来监听属性变化,通常...

    浅谈Javascript事件模拟

    现代浏览器如IE9、Chrome、Firefox、Opera和Safari都支持这些方法。IE8及之前的版本有自己特有的模拟方式。 #### 创建事件对象 在DOM2级规范中,`document.createEvent()`方法可以用来创建一个新的事件对象。这个...

    mootools 1.3 core 核心js库

    MooTools致力于跨浏览器兼容性,确保在主流的浏览器(如IE6+、Firefox、Chrome、Safari和Opera)上都能正常工作。它通过抽象化浏览器差异,使得开发者无需关心底层的实现细节,更专注于应用逻辑。 八、压缩与非压缩...

    网站加入收藏夹代码

    - **Firefox 和 Chrome**:可以使用`window.bookmark()`方法,但这种方法在某些浏览器中可能无效。 - **IE 和 Safari**:这些浏览器没有提供直接的API,但我们可以通过创建一个新的URL并调用`window.location....

    为body标签和document.body都添加点击事件后仅Firefox弹出了两次

    其他浏览器如IE6/7/8/9、Safari、Chrome和Opera则表现正常,只触发一次事件。 为了解决这个问题,有几种常见的策略: 1. **避免重复绑定**:确保只有一种方式为`&lt;body&gt;`添加点击事件。如果已经在HTML中设置了`...

    Firefox附加组件开发者指南

    相较于其他功能丰富的浏览器(例如Opera或Safari),Firefox在保持简洁界面的同时,提供了强大的可扩展性。 在当今互联网时代,一个标准的网络浏览器通常需要具备以下特点: - **精细设计的标签控件**:使得用户...

Global site tag (gtag.js) - Google Analytics