搜索

首页  >  问答  >  正文

javascript - js中onchange事件绑定怎么传参?

<input type="file" type="file" accept="image/*" onchange="previewImage" multiple/>

onchange里面填写previewImage能在previewImage函数里面获取到一个值(很多人都会写成e),里面有files,这个e是什么?
如果在onchange里面填写previewImage('segmentfault'),在previewImage函数里面获取到只能获取到segmentfault,那个e跑哪儿了?想同时获取怎么办?

还有就是previewImage('segmentfault')previewImage的区别?

previewImage的时候不是只是个引用么,为什么会直接调用?

求推荐一本js的教程或书,现在只会用个jq,用个vue,用各种js库。。但是碰到问题总解决不了,沮丧。。想从基础的学起,求推荐本书

PHPzPHPz2770 天前802

全部回复(3)我来回复

  • 高洛峰

    高洛峰2017-05-19 10:20:17

    previewImage的参数可以是this,这里指的是<input>这个标签。
    通过this.files来操作文件,比如this.files.length是文件的个数,this.files[index]指向对应的文件。
    previewImage的参数可以是也可以是event,指的是change这个事件。

    至于添加事件处理程序,可以
    1.直接把js代码写在引号里,如

    <input type="file" accept="image/*" onchange="alert
    (event.type);" multiple/>
    

    2.onchange = 函数名,函数声明在脚本中。如果"previewImage"不加()是不会执行的吧。

    <input type="file" accept="image/*" onchange="previewImage
    (this)" multiple/>
    <script> function previewImage(obj){
                alert(obj.files.length);
            };</script>
    

    3.DOM0级事件处理程序

    <input type="file" accept="image/*" multiple/>
    <script> document.getElementsByTagName("input")[0].onchange = function(){
                alert(event.type);
            };</script>
    

    4.DOM2级事件处理程序

    <input type="file" accept="image/*"  multiple/>
    <script> document.getElementsByTagName("input")[0].addEventListener("change",function(){
                alert(event.type);
            });</script>`
    或者IE7 8中为`<script> document.getElementsByTagName("input")[0].attachEvent("onchange",function(){
                alert(event.type);
            });</script>
    

    我可能有写错的地方,最好的方法是自己实践一下。
    书我看的是《JavaScript高级程序设计》第三版。

    回复
    0
  • 巴扎黑

    巴扎黑2017-05-19 10:20:17

    e表示event
    可以通过this获取相关files数据;
    推荐《JavaScript高级程序设计》

    回复
    0
  • 伊谢尔伦

    伊谢尔伦2017-05-19 10:20:17

    基础js 推荐犀牛书--JavaScript权威指南(第6版)

    回复
    0
  • 取消回复