javascript - trigger event and custom events -

joe.bq.wang

浏览: 399690 次
性别:
来自: 上海

最近访客更多访客>>

musicull

hillsoul

virtual_garden

mengke111

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

javascript - trigger event and custom events

博客分类：

javascript

javascript

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 detect bubbling su ... | javascript - trick to handlers managemen ...

2012-08-20 21:58
浏览 2077
评论(0)
分类:编程语言
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

javascript - trigger event and custom events

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

javascript - trigger event and custom events

评论

发表评论

相关推荐

javascript - trick to cross browser DOM ready event

javascript - trick to simulate mouseenter and mouseleave

javascript - trick to simulate the change event

javascript - trick to simulate bubbling submit event

javascript - trick to implement bubbling submit event

javascript - trick to detect bubbling supportability

javascript - trick to handlers management

javascript - trick to centralized store

javascript - trick to fix the event object

javascript - tricks to deal with colors

javascript - trick to manipulate the opacity

javascript - trick to test visibility of an element

javascript - trick to get and set height and width

javascript - trick to set/get attributes that expects px values

javascript - trick to get and set CSS style

javascript - trick to normalize href for IE

javascript - trick IE form and its expando attribute

javascript expando and attributes

javascript - trick to getText and setText

javascript - trick/guideline to remove DOM element

最近访客更多访客>>