Почему делает onclick набор свойств со сбоем setAttribute для работы в IE?

Существует БОЛЬШИЕ набор атрибутов, которые Вы не можете установить в IE с помощью .setAttribute () , который включает каждый встроенный обработчик событий.

Посмотрите здесь для деталей:

http://webbugtrack.blogspot.com/2007/08/bug-242-setattribute-doesnt-always-work.html

Сделал Вы пробуете:

    execBtn.setAttribute("onclick", function() { runCommand() });

Запишите встроенную функцию, и интерпретатор достаточно умен, чтобы знать о записи функции. Сделайте это как это, и это предполагает, что это - просто строка (который это технически).

Не относящийся к проблеме onclick, но также и связанный:

Для атрибутов HTML, имя которых сталкивается с зарезервированными словами JavaScript, альтернативное название выбрано, например, <div class=''>, но div.className, или <label for='...'>, но label.htmlFor.

В разумных браузерах, это не влияет setAttribute. Таким образом у геккона и WebKit Вы звонили бы div.setAttribute('class', 'foo'), но в IE необходимо использовать имя свойства JavaScript вместо этого, таким образом div.setAttribute('className', 'foo').

Вы рассмотрели слушателя события вместо того, чтобы установить атрибут? Среди прочего это позволяет Вам передать параметры, который был проблемой, с которой я столкнулся при попытке сделать это. Все еще необходимо сделать это дважды для IE и Mozilla:

function makeEvent(element, callback, param, event) {
    function local() {
        return callback(param);
    }

    if (element.addEventListener) {
        //Mozilla
        element.addEventListener(event,local,false);
    } else if (element.attachEvent) {
        //IE
        element.attachEvent("on"+event,local);
    }
}

makeEvent(execBtn, alert, "hey buddy, what's up?", "click");

Просто позволяют событию быть именем как "щелчок" или "наведение мыши".

Или вы можете использовать jQuery и избежать всех этих проблем:

var execBtn = $("<input>", {
       type: "button",
       id: "execBtn",
       value: "Execute"
    })
    .click(runCommand);        

jQuery также позаботится обо всех кроссбраузерных проблемах.

Я сделал это, чтобы обойти это и двигаться дальше, в моем случае я не использую элемент 'input', вместо этого я использую изображение, когда я пытался установить атрибут «onclick» для этого изображения я столкнулся с той же проблемой, поэтому я попытался обернуть изображение элементом «a» и указать точку отсчета для функции, подобной этой.

var rowIndex = 1;
var linkDeleter = document.createElement('a');
linkDeleter.setAttribute('href', "javascript:function(" + rowIndex + ");");

var imgDeleter = document.createElement('img');
imgDeleter.setAttribute('alt', "Delete");
imgDeleter.setAttribute('src', "Imagenes/DeleteHS.png");
imgDeleter.setAttribute('border', "0");

linkDeleter.appendChild(imgDeleter);

В некоторых случаях перечисленные здесь примеры не работали для меня в Internet Explorer.

Поскольку вам необходимо установить свойство с помощью такого метода (без скобок)

HtmlElement.onclick = myMethod;

это не сработает, если вам нужно передать имя объекта или даже параметры. Для Internet Explorer вы должны создать новый объект во время выполнения:

HtmlElement.onclick = new Function('myMethod(' + someParameter + ')');

Работает также в других браузерах.

Это замечательная функция для кросс-браузерной совместимой привязки событий.

Взял ее с http://js.isite.net.au/snippets/addevent

С ней вы можете просто сделать Events.addEvent(element, event, function); и не беспокоиться!

Например: (http://jsfiddle.net/Zxeka/)

function hello() {
    alert('Hello');
}

var button = document.createElement('input');
button.value = "Hello";
button.type = "button";

Events.addEvent(input_0, "click", hello);

document.body.appendChild(button);

Вот функция:

// We create a function which is called immediately,
// returning the actual function object.  This allows us to
// work in a separate scope and only return the functions
// we require.
var Events = (function() {

  // For DOM2-compliant browsers.
  function addEventW3C(el, ev, f) {
    // Since IE only supports bubbling, for
    // compatibility we can't use capturing here.
    return el.addEventListener(ev, f, false);
  }

  function removeEventW3C(el, ev, f) {
    el.removeEventListener(ev, f, false);
  }

  // The function as required by IE.
  function addEventIE(el, ev, f) {
    // This is to work around a bug in IE whereby the
    // current element doesn't get passed as context.
    // We pass it via closure instead and set it as the
    // context using call().
    // This needs to be stored for removeEvent().
    // We also store the original wrapped function as a
    // property, _w.
    ((el._evts = el._evts || [])[el._evts.length]
        = function(e) { return f.call(el, e); })._w = f;

    // We prepend "on" to the event name.
    return el.attachEvent("on" + ev,
        el._evts[el._evts.length - 1]);
  }

  function removeEventIE(el, ev, f) {
    for (var evts = el._evts || [], i = evts.length; i--; )
      if (evts[i]._w === f)
        el.detachEvent("on" + ev, evts.splice(i, 1)[0]);
  }

  // A handler to call all events we've registered
  // on an element for legacy browsers.
  function addEventLegacyHandler(e) {
    var evts = this._evts[e.type];
    for (var i = 0; i < evts.length; ++i)
      if (!evts[i].call(this, e || event))
        return false;
  }

  // For older browsers.  We basically reimplement
  // attachEvent().
  function addEventLegacy(el, ev, f) {
    if (!el._evts)
      el._evts = {};

    if (!el._evts[ev])
      el._evts[ev] = [];

    el._evts[ev].push(f);

    return true;
  }

  function removeEventLegacy(el, ev, f) {
    // Loop through the handlers for this event type
    // and remove them if they match f.
    for (var evts = el._evts[ev] || [], i = evts.length; i--; )
      if (evts[i] === f)
        evts.splice(i, 1);
  }

  // Select the appropriate functions based on what's
  // available on the window object and return them.
  return window.addEventListener
      ? {addEvent: addEventW3C, removeEvent: removeEventW3C}
      : window.attachEvent
          ? {addEvent: addEventIE, removeEvent: removeEventIE}
          : {addEvent: addEventLegacy, removeEvent: removeEventLegacy};
})();

Если вы не хотите использовать такую большую функцию, эта должна работать почти для всех браузеров, включая IE:

if (el.addEventListener) { 
    el.addEventListener('click', function, false); 
} else if (el.attachEvent) { 
    el.attachEvent('onclick', function); 
} 

В ответ на вопрос Крейга. Вам придется создать новый элемент и скопировать атрибуты старого элемента. Эта функция должна выполнить эту работу: (source)

function changeInputType(oldObject, oType) {
  var newObject = document.createElement('input');
  newObject.type = oType;
  if(oldObject.size) newObject.size = oldObject.size;
  if(oldObject.value) newObject.value = oldObject.value;
  if(oldObject.name) newObject.name = oldObject.name;
  if(oldObject.id) newObject.id = oldObject.id;
  if(oldObject.className) newObject.className = oldObject.className;
  oldObject.parentNode.replaceChild(newObject,oldObject);
  return newObject;
}