Question

我在将eventListener中的正确参数放入函数时遇到问题。

  <!DOCTYPE html>
   <html>
    <head>
     <title></title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <script type="text/javascript">         

           window.onload = function() {
            var galleryContainer = document.getElementById('galleryContainer');
            var image = galleryContainer.getElementsByTagName('div');
            //console.log(image);

            var images = new Array();
            images.push(image);

            for(var i = 0; i < images[0].length; i++) {
                images[0][i].addEventListener('click', function() {showImage(this)
                }, false);
               };
           }
    // I dont know with parameter to put into showImage() from the listener.
           function showImage( here is the problem ) {

            var preview = document.getElementById('preview');
            preview.innerhtml = image.innerhtml;
   // I want to put the image into the preview element.

          }
    </script>
</head>
<body>
    <div id="galleryContainer">
        <div>trams</div>
        <div>trams</div>
        <div>trams</div>
        <div>trams</div>
    </div>
    <div id="preview" style="width: 200px; height: 200px; border: 1px solid red"></div>
</body>

Answer 1

试试这段代码：

<!DOCTYPE html>
   <html>
    <head>
     <title></title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <script type="text/javascript">         

           window.onload = function() {
             var galleryContainer = document.getElementById('galleryContainer');
             var images = galleryContainer.getElementsByTagName('div');
             //console.log(images);

             for(var i = 0; i < images.length; i++) {
               images[i].addEventListener('click', showImage, false);
             };
           }
// I dont know with parameter to put into showImage() from the listener.
           function showImage(ev) {
             ev=ev||event; // ev now point to click event object
             var preview = document.getElementById('preview');
             preview.innerHTML = this.innerHTML; // this point to DIV(trams)
           }
    </script>
</head>
<body>
    <div id="galleryContainer">
        <div>trams1</div>
        <div>trams2</div>
        <div>trams3</div>
        <div>trams4</div>
    </div>
    <div id="preview" style="width: 200px; height: 200px; border: 1px solid red"></div>
</body>

工作示例http://jsfiddle.net/Cp6HJ/

Answer 2

window.onload = function() {
        var galleryContainer = document.getElementById('galleryContainer');
        var image = galleryContainer.getElementsByTagName('div');
        //console.log(image);

        var images = new Array();
        images.push(image);

        for(var i = 0; i < images[0].length; i++) {
            var callback = function(item){ return function(){ showImage(item); }; }(images[0][i]);
            images[0][i].addEventListener('click', callback, false);
         };
       };

       function showImage( item ) {
        var preview = document.getElementById('preview');
        preview.innerHTML = item.innerHTML;
      }

Answer 3

将此用于函数定义语句：

function showImage(image) { 
   ...
}

内部html语句中的更正：（注意大写的'H'）

preview.innerHTML = image.innerHTML;

放入正确参数的问题

3 个答案: