Javascript 输入正确参数的问题_Javascript

Javascript 输入正确参数的问题

javascript

Javascript 输入正确参数的问题,javascript,Javascript,我无法将eventListener中的正确参数放入函数中 <!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript">

我无法将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>

在函数定义语句中使用此选项：

function showImage(image) { 
   ...
}

和内部html语句中的更正：注意大写的“H”

preview.innerHTML=image.innerHTML

请尝试以下代码：

<!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>

工作示例

很可怜，但在他的代码中有：我不知道如何将image元素从eventListener获取到函数showImage。images数组有什么意义？您可以在循环中直接使用前一行中的image变量。这里没有所谓的innerhtml，我认为他的代码不需要太多更改。@Saket我将innerhtml更改为innerHTMLT这非常有效。非常感谢你。你能解释一下什么是ev=ev | |事件吗；does？About ev=ev | |事件：在我的示例中，您将函数showImage注册为所有DIVtram对象的处理程序。当在任何DIVtram浏览器上单击事件发生时，调用函数showImage并发送一个参数事件对象：可以是任意类型：MouseeEvent。。。。但某些浏览器不发送此参数。在这些浏览器中，您可以使用全局事件对象访问事件信息。命令ev=ev | |事件平均值：如果ev未定义且未发送任何参数，则将事件对象存储到ev中。例如，您可以删除这一行。感谢您的快速响应。这很有帮助。

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;
      }