自定义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事件均没有触发。
相关:
相关推荐
本文将深入探讨如何使用JavaScript(js)编写兼容360、Firefox、Chrome、Opera、傲游、搜狗和世界之窗等主流浏览器的弹窗代码,以及为何不支持Safari和IE8及以下版本的浏览器。 首先,我们了解JavaScript弹窗的基本...
这里我们探讨的是Firefox、Chrome和Safari浏览器中内置的两个便捷的调试函数:$ 和 $$。 首先,$ 函数在这些浏览器中等同于 `document.getElementById`。这是一个非常实用的功能,因为`getElementById`是JavaScript...
- **Firefox**、**Chrome**、**Opera**、**Safari**:这些现代浏览器通常具有良好的DOM支持,因此代码在这些浏览器中的表现会更好。 #### 总结 本文介绍了如何通过JavaScript实现层跟随滚动条移动的技术方案,包括...
比如,Internet Explorer较早地引入了数据岛功能,但其他浏览器如Chrome、Safari和Opera可能需要依赖额外的库或技术,如jQuery的`.data()`方法或Web Components的模板特性来实现类似的功能。这些浏览器可能不直接...
例如,IE10及以下版本不支持事件捕获,而其他现代浏览器如IE11、Chrome、Firefox和Safari则同时支持捕获和冒泡。 JavaScript提供了`addEventListener`方法来添加事件监听器。该方法接受三个参数:事件名、处理函数...
然而,在DOM2级事件规范中,目标元素在捕获阶段不会接收到事件,但在某些浏览器中,如Safari、Chrome、Firefox和Opera 9.5及以上版本,目标元素在捕获阶段也会触发事件处理程序。 4. 阻止事件冒泡: 在某些情况下...
- 提供的代码主要针对IE、Firefox和Chrome,但对其他浏览器如Safari、Opera或其他基于Chromium的浏览器可能需要额外的适配。 总之,为了实现跨浏览器的“设为首页”和“加入收藏”功能,开发者需要编写特定于...
首先,`addEventListener` 是 W3C 标准推荐的事件处理方式,适用于所有支持 W3C DOM Level 2 的浏览器,如 Chrome、Firefox、Safari 和 Opera。这个方法接收两个参数:一个是事件名,另一个是事件处理函数。例如,...
它确保在IE8及更高版本,以及其他现代浏览器如Chrome、Firefox、Safari和Opera中都能正常工作。 2. **易用性**:这款插件的集成和使用相当简单。只需要在页面中引入jQuery和DCalendar的JS文件,然后通过简单的...
- **Firefox 3.6/Chrome 7/Safari 5**: - `mousedown` 和 `mouseup` 事件中获取中键值为 **1** - `click` 事件也能获取中键值,同样为 **1** - **Opera 10**: - 无法获取中键值,因为Opera不触发与中键相关的...
支持全部主流浏览器,包括IE、Firefox、Safari、Chrome和Opera,使得这种技术具有广泛的适用性。 首先,我们需要理解jQuery的基本语法。jQuery的核心在于选择器,它允许我们高效地定位到页面上的特定元素。例如,`$...
- **Firefox**:Firefox及其他遵循W3C标准的浏览器,如Chrome、Safari和Opera,使用`addEventListener`方法来添加事件监听器。相应的代码为`element.addEventListener('click', foo, false)`。 2. **事件冒泡与...
在非IE浏览器中,如Firefox、Safari 和 Opera,它们遵循DOM标准,因此也支持这两种事件流。 事件触发的顺序在不同的浏览器中有所不同。在IE中,使用`addEventListener`动态添加事件时,遵循“先进先出”原则,即先...
"js实现浏览器全屏兼容谷歌火狐等"这个主题就涉及到如何使用JavaScript来实现在不同浏览器上实现全屏功能,并确保与主流浏览器如Google Chrome和Mozilla Firefox等的兼容性。这里我们将详细讲解这一技术实现的原理和...
这个事件主要在Internet Explorer浏览器中被广泛使用,因为它是IE特有的,而在其他遵循W3C标准的浏览器(如Firefox、Chrome、Safari和Opera)中,推荐使用`addEventListener`或`attachEvent`来监听属性变化,通常...
现代浏览器如IE9、Chrome、Firefox、Opera和Safari都支持这些方法。IE8及之前的版本有自己特有的模拟方式。 #### 创建事件对象 在DOM2级规范中,`document.createEvent()`方法可以用来创建一个新的事件对象。这个...
MooTools致力于跨浏览器兼容性,确保在主流的浏览器(如IE6+、Firefox、Chrome、Safari和Opera)上都能正常工作。它通过抽象化浏览器差异,使得开发者无需关心底层的实现细节,更专注于应用逻辑。 八、压缩与非压缩...
- **Firefox 和 Chrome**:可以使用`window.bookmark()`方法,但这种方法在某些浏览器中可能无效。 - **IE 和 Safari**:这些浏览器没有提供直接的API,但我们可以通过创建一个新的URL并调用`window.location....
其他浏览器如IE6/7/8/9、Safari、Chrome和Opera则表现正常,只触发一次事件。 为了解决这个问题,有几种常见的策略: 1. **避免重复绑定**:确保只有一种方式为`<body>`添加点击事件。如果已经在HTML中设置了`...
相较于其他功能丰富的浏览器(例如Opera或Safari),Firefox在保持简洁界面的同时,提供了强大的可扩展性。 在当今互联网时代,一个标准的网络浏览器通常需要具备以下特点: - **精细设计的标签控件**:使得用户...