- 浏览: 389464 次
- 性别:
- 来自: 上海
文章分类
- 全部博客 (309)
- xaml C# wpf (0)
- scala java inner clas (1)
- Tools UML Eclipse UML2 (1)
- Timer .NET Framework (1)
- perl (6)
- python function paramter (1)
- Python Docstring (1)
- Python how to compare types (1)
- Python (8)
- java (5)
- C# (76)
- C# WPF (0)
- p4 (0)
- WPF (46)
- .net (6)
- xaml (1)
- javascript (40)
- windows (10)
- scala (4)
- winform (1)
- c++ (48)
- tools (12)
- cmd (1)
- os (0)
- CI (0)
- shell (0)
- C (2)
- haskell (49)
- functional (1)
- tool (1)
- gnu (1)
- linux (1)
- kaskell (0)
- svn (0)
- wcf (3)
- android (1)
最新评论
In the previous post - javascript - trick to handlers management we dicussed the handlers management and the important functions such as addEvent, removeEvent and the last triggerEvent which provides a cross-browser implementation of event management.
Let's see again the code of triggerEvent.
function triggerEvent(elem, event) { var handler = getData(elem).handler, parent = elem.parentNode || elem.ownerDocument; if (typeof event === 'string') { event = { type: event, target: elem }; } if (handler) { handler.call(elem, event); } // Bubble the event up the tree to the document, // Unless it's been explicitly stopped if (parent && !event.isPropagationStopped()) { // NOTE in Chrome, e.g. for event 'udpate' which are passed in as a string, then it does not have the isPropagationStopped properties. triggerEvent(parent, event); // We're at the top document so trigger the default action } else if (!parent && !event.isDefaultPrevented()) { var targetData = getData(event.target), targetHandler = targetData.handler; // so if there is handler to the defalt handler , we execute it if (event.target[event.type]) { // I Suppose that it is the event.type rather than just the type // Temporarily disable the bound handler, // don't want to execute it twice if (targetHandler) { targetData.handler = function () { }; } // Trigger the native event (click, focus, blur) event.target[event.type](); // I suppose that it is the event.type rather than the type // restore the handler if (targetHandler) { targetData.handler = targetHandler; } } } }
Normally events occurs whe a user triggers them (such as clicking or moving the mouse). however, they are many cases where it's appropriate to simulate a native event occurring....
With all the work of integrating cross-browser events. Thus far, supporting custom events ends up being relatively simple. Custom event are a way of simulating the experience (to the end user) of a real event without having to use the browser's underlying event structure. custom events can be an effective means of indirectly communicating actions to elements in a one-to-many way.
Below shows an example of a custom events across a number of elements.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <!-- @name : customeventsdemo.js @comment: custom events are a way of simulating the experience (to the end user) of a real event without having to use the browser's underlying event structure with the code that we've written for addEvent, removeEvent , and triggerEvent - nothing else has to change in order to support custom events. Functionally there is no difference between an event that does exist and will be fired by the browser and an event that does not exit and will only fire when triggered manually. You can see an example of triggering a custom event in below --> <title></title> <script type="text/javascript" src="addremoveevents.js"></script> <script type="text/javascript"> addEvent(window, "load", function () { var li = document.getElementsByTagName("li"); for (var i = 0; i < li.length; i++) { addEvent(li[i], "update", function () { // update event is not some events that exists in the browser for the li element this.innerHTML = parseInt(this.innerHTML) + 1; }); } var input = document.getElementsByTagName("input")[0]; addEvent(input, "click", function () { var li = document.getElementsByTagName("li"); for (var i = 0; i < li.length; i++) { triggerEvent(li[i], "update"); // with the trigger event you can fire the event manualy, though you may not fire thevent automatically when you click some element } }); }); </script> </head> <body> <input type="button" value="Add 1" /> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </body> </html>
you may notice the comment that I inserted like this:
// NOTE in Chrome, e.g. for event 'udpate' which are passed in as a string, then it does not have the isPropagationStopped properties.
this is to say that it is supported to pass a string to signify the event.
triggerEvent(li[i], "update");
in the above code, you see that you are passing the string 'update' as the event, you can pass the real event object (or a fixed event object), by the event object, you can expect that the isPropagationStopped return true or false.
发表评论
-
javascript - trick to cross browser DOM ready event
2012-08-24 08:23 901the "ready" event ... -
javascript - trick to simulate mouseenter and mouseleave
2012-08-23 08:31 2228Previously we discussed javasc ... -
javascript - trick to simulate the change event
2012-08-22 08:51 1611In the previous discussion a ... -
javascript - trick to simulate bubbling submit event
2012-08-22 08:03 883In the previous discussion abou ... -
javascript - trick to implement bubbling submit event
2012-08-23 07:55 670Following up to the javascrip ... -
javascript - trick to detect bubbling supportability
2012-08-20 22:22 932Event delegation is oe of the b ... -
javascript - trick to handlers management
2012-08-20 08:19 995We have discussed "javascr ... -
javascript - trick to centralized store
2012-08-20 07:52 785For a number of reasons it's ... -
javascript - trick to fix the event object
2012-08-20 07:47 849Many browsers, especially In ... -
javascript - tricks to deal with colors
2012-08-15 08:34 742There are a couple of ways to r ... -
javascript - trick to manipulate the opacity
2012-08-15 08:26 744All other browsre may have supp ... -
javascript - trick to test visibility of an element
2012-08-15 08:15 497though there is a visible prope ... -
javascript - trick to get and set height and width
2012-08-15 08:05 519when looking at properties t ... -
javascript - trick to set/get attributes that expects px values
2012-08-16 11:00 494When setting a number into a ... -
javascript - trick to get and set CSS style
2012-08-16 11:00 718while it will not be so much tr ... -
javascript - trick to normalize href for IE
2012-08-16 10:59 507IE is again the only browser th ... -
javascript - trick IE form and its expando attribute
2012-08-16 10:59 1008there is a known issue that if ... -
javascript expando and attributes
2012-08-14 08:15 1010expando is something like this ... -
javascript - trick to getText and setText
2012-08-14 07:40 1105it is not as simple as you thin ... -
javascript - trick/guideline to remove DOM element
2012-08-14 07:00 1156remove an element is not as sim ...
相关推荐
JavaScript-Core-and-Practice
Learning-Object-Oriented-Programming-Explore-and-crack-the-OOP-code-in-Python-JavaScript-and-C-.pdf
Data-Visualization-with-Python-and-JavaScript-Scrape-Clean-Explore-Transform-Your-Data.pdf
Javascript中的事件--Event对象
org.mozilla.javascript-1.7.2.jar资源包
dhtml_utopia__modern-web-design-using-javascript-and-dom_by_stuart-langridge
安装npm install compat-trigger-event原料药触发器(el,名称,选项) 在el上触发name事件。 可以传入选项以自定义事件。 HTMLEvents支持以下选项: bubblescancelable MouseEvents支持以下选项: ...
jquery-ui-1.9.2.custom.min.js源码文件,文件需要国外下载,因为下载过了,有需要可以直接拿去用,加快开发进度,不要为了下载文件而党务过多的时间。
JavaScript事件监听器实验室学习目标使用addEventListener()在DOM节点上创建事件侦听器介绍在本实验中,我们将学习如何使用addEventListener()教导节点“监听”事件。如果您还没有,请将该实验室分叉并将其克隆到您...
@ optimizely / sdk-plugin-pending-events 一个不受支持的实验性 :warning: 用于优化完全堆栈( ,Web浏览器环境)的将待处理(未完成)事件的队列保留到localStorage ,并在初始化时重试未处理的事件。 动机 跟踪...
jQuery UI 是建立在 jQuery JavaScript 库上的一组用户界面交互、特效、小部件及主题。无论您是创建高度交互的 Web 应用程序还是仅仅向窗体控件添加一个日期选择器,jQuery UI 都是一个完美的选择。
npm install react-scroll-trigger 通过 yarn add react-scroll-trigger 如何使用 import ScrollTrigger from 'react-scroll-trigger' ; ... onEnterViewport ( ) { this . setState ( { visible : true , } ) ...
npm i -S react-overlay-trigger import React from 'react' import OverlayTrigger from 'react-overlay-trigger' const Overlay = ( { style , ... rest } ) => < span> { children } < / span > const ...
浏览器DOM中JavaScript和事件基本原理实践
jquery-ui-1.8.22.custom控件.zip
通过处理事件来使用JavaScript移动事物学习目标练习页面上的移动元素演示如何响应浏览器事件移动元素演示如何有条件地更新元素在页面上的位置介绍回想一下您玩过的第一个视频游戏。 考虑一下该游戏的机制。 当您倾斜...
Data Visualization with Python and JavaScript 2017-03-17: Second Release
CustomEvent构造函数Polyfill 为IE9 +填充CustomEvent构造函数。 ES6模块化。 用法: import CustomEventPolyfill from './path/to/custom-event-polyfill.js';
javascript-and-algorithm-rojects freecodecamp的javascript-and-algorithm-rojects
JavaScript-UI和DOM Telerik Academy 2015-2016 JavaScript-UI和DOM项目