通过fireEvent触发“更改”事件时未调用jQuery事件答案

【问题标题】：jQuery events not being called when triggering 'change' event via fireEvent通过fireEvent触发“更改”事件时未调用jQuery事件
【发布时间】：2010-09-18 03:00:36
【问题描述】：

IE7-8 出现问题。下面是简单的演示：

<html>
  <head>
    <script type="text/javascript" 
            src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
    <script type="text/javascript">
      // Selenium's trigger from scripts/htmlutils.js
      function triggerEvent(element, eventType, canBubble, controlKeyDown, 
                            altKeyDown, shiftKeyDown, metaKeyDown)
      {
        canBubble = (typeof(canBubble) == undefined) ? true : canBubble;
        if (element.fireEvent && element.ownerDocument && 
            element.ownerDocument.createEventObject) { // IE
          var evt = createEventObject(element, controlKeyDown, altKeyDown, 
                                      shiftKeyDown, metaKeyDown);    
          element.fireEvent('on' + eventType, evt);
        }
        else {
          var evt = document.createEvent('HTMLEvents');

          try {
            evt.shiftKey = shiftKeyDown;
            evt.metaKey = metaKeyDown;
            evt.altKey = altKeyDown;
            evt.ctrlKey = controlKeyDown;
          } catch (e) {
            // On Firefox 1.0, you can only set these during initMouseEvent
            // or initKeyEvent we'll have to ignore them here
            LOG.exception(e);
          }

          evt.initEvent(eventType, canBubble, true);
          element.dispatchEvent(evt);
        }
      }

      function createEventObject(element, controlKeyDown, altKeyDown, 
                                 shiftKeyDown, metaKeyDown) 
      {
         var evt = element.ownerDocument.createEventObject();
         evt.shiftKey = shiftKeyDown;
         evt.metaKey = metaKeyDown;
         evt.altKey = altKeyDown;
         evt.ctrlKey = controlKeyDown;
         return evt;
      }

      function triggerBySelenium() {
        var elem = document.getElementById('sel1');
        triggerEvent(elem, 'change');
      }

      function triggerByJQuery() {
        $('#sel1').trigger('change');
      }

      $(function() {
        $('#sel1').bind('change', function() {
           alert('jQuery\'s handler!');  
        });
      });
    </script>
  </head>
  <body>
    <select id="sel1" onchange="alert('Native handler!');">
      <option value="1">text 1</option>
      <option value="2">text 2</option>
    </select>
    <br/>
    <a href="#" onclick="triggerBySelenium();">Fire event by Selenium</a><br/>
    <a href="#" onclick="triggerByJQuery();">Fire event by jQuery</a>
  </body>
</html>

如果您单击第一个链接，只会显示一个警报，有什么想法吗？

【问题讨论】：

我将把它留在这里：降级到 1.3.2 就可以了。为什么它在 1.4.x 中不起作用但简而言之，这有点复杂：为了“修复”IE 的更改事件行为，jQuery 实际上不再绑定到 IE 中的change。

标签： javascript jquery dom selenium

【解决方案1】：

试试这个：

    <html>
  <head>
    <script type="text/javascript" 
            src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
    <script type="text/javascript">
      // Selenium's trigger from scripts/htmlutils.js
      function triggerEvent(element, eventType, canBubble, controlKeyDown, 
                            altKeyDown, shiftKeyDown, metaKeyDown)
      {
        canBubble = (typeof(canBubble) == undefined) ? true : canBubble;
        if (element.fireEvent && element.ownerDocument && 
            element.ownerDocument.createEventObject) { // IE
          var evt = createEventObject(element, controlKeyDown, altKeyDown, 
                                      shiftKeyDown, metaKeyDown);    
          element.fireEvent('on' + eventType, evt);
        }
        else {
          var evt = document.createEvent('HTMLEvents');

          try {
            evt.shiftKey = shiftKeyDown;
            evt.metaKey = metaKeyDown;
            evt.altKey = altKeyDown;
            evt.ctrlKey = controlKeyDown;
          } catch (e) {
            // On Firefox 1.0, you can only set these during initMouseEvent
            // or initKeyEvent we'll have to ignore them here
            LOG.exception(e);
          }

          evt.initEvent(eventType, canBubble, true);
          element.dispatchEvent(evt);
        }
      }

      function createEventObject(element, controlKeyDown, altKeyDown, 
                                 shiftKeyDown, metaKeyDown) 
      {
         var evt = element.ownerDocument.createEventObject();
         evt.shiftKey = shiftKeyDown;
         evt.metaKey = metaKeyDown;
         evt.altKey = altKeyDown;
         evt.ctrlKey = controlKeyDown;
         return evt;
      }

      function triggerBySelenium() {
         $('#sel1').trigger('change');
      }

      function triggerByJQuery() {
        $('#sel1').trigger('change');
      }

      $(function() {
        $('#sel1').bind('change', function() {
           alert('jQuery\'s handler!');  
        });
      });
    </script>
  </head>
  <body>
    <select id="sel1" onchange="alert('Native handler!');">
      <option value="1">text 1</option>
      <option value="2">text 2</option>
    </select>
    <br/>
    <a href="#" onclick="triggerBySelenium();">Fire event by Selenium</a><br/>
    <a href="#" onclick="triggerBy();">Fire event by jQuery</a>
  </body>
</html>

【讨论】：

:) Alex，我需要使用原生 IE 函数来调用 jquery 绑定的事件。我需要修复 selenium 的 triggerEvent 函数，或者如果它不是 IE 错误，我们将向 John 开票。 -1