使用JavaScript添加JavaScript活动通过图像使用JavaScript

Question

好吧，我会尽量让这个尽可能清晰。我想写一个函数，当被调用时将添加一个onmouseout属性到图像。

在图像被隐藏之前。

<img src="myfile.jpg" onmouseover="function()" /> 

<img src="myfile.jpg" onmouseover="function()" onmouseout="anotherFunction()" /> 

后，我也想用function()来改变图片，然后的onmouseout设置图片回原来的。我知道如何在图像代码中使用onmouseover和onmouseout来更改图片，但是我试图简化这一点，因为我必须对图像进行100次左右的改变，而且我不想多次写出代码。呃我希望那很清楚。

Answer 1

在这里，我们去http://jsfiddle.net/5U9w9/2/

我要更新jsFidle以获得更多评论，并且也会在此更新链接。

的JavaScript

// grab all the required element on the page 
var img_all = document.getElementsByTagName('img'); 

// for every element do this 
for (i=0; i< img_all.length; i++){ 
    var img = img_all[i]; 
    // set the required event on the element 
    // when the event of the element occurs, the associated function will be called with event object as it's argument. 
    // https://developer.mozilla.org/en-US/docs/Mozilla_event_reference 
    //img.addEventListener('mouseover', mouseover_handler, false); 
    AddEvent(img, 'mouseover', mouseover_handler) 

    //mouseout_handler will be called, on mouseout event 
    // img.addEventListener('mouseout', mouseout_handler, false); 
    AddEvent(img, 'mouseout', mouseout_handler) 
} 


function mouseover_handler(e){ 
    // el is and event object and has various properties like clientX, clientY, srcElement, etc. you can check them by console.log(el) 
    console.log(e) 

    // to get the element i'm hovering, use 
    var element = e.srcElement; 

    //element is DOM element and can be manupulated 
    element.style.width="100px"; 
} 

// similarly handler for an another event. 
function mouseout_handler(e){ 
    e.srcElement.style.width="50px"; 
} 

​// cross-browser addEventListner 
function AddEvent(html_element, event_name, event_function) 
{  
    if(html_element.attachEvent) //Internet Explorer 
     html_element.attachEvent("on" + event_name, function() {event_function.call(html_element);}); 
    else if(html_element.addEventListener) // Everything else 
     html_element.addEventListener(event_name, event_function, false); 
} 

更新

• 使用AddEvent在addEventListner()的地方IE支持。（来源：@詹姆斯希尔的回答）

Answer 2

这也许比你想象的更简单：

function SetImageSource(ele, url) { 
    ele.src = url; 
} 

<img src="myfile.jpg" 
    onmouseover="SetImageSource(this, 'someURL')" 
    onmouseout="SetImageSource(this, 'someOtherURL')" /> 

注：联JavaScript并不理想。我建议阅读JS中的事件处理。更具体地说，阅读关于附加到事件。每澄清

<img id="imgMyImage" src="myfile.jpg" 
    onmouseover="SetImageSource(this, 'someURL')" 
    onmouseout="SetImageSource(this, 'someOtherURL')" /> 


function AddEvent(html_element, event_name, event_function) 
{  
    if(html_element.attachEvent) //Internet Explorer 
     html_element.attachEvent("on" + event_name, function() {event_function.call(html_element);}); 
    else if(html_element.addEventListener) // Everything else 
     html_element.addEventListener(event_name, event_function, false); 
} 

AddEvent(document.getElementById('imgMyImage'), 
           'onmouseover', 
           // do something 
           ); 

其他信息

编辑见.addEventListener() on MDN

见.attachEvent() on MSDN