事件处理程序的参数与传参

最新推荐文章于 2023-07-01 16:59:36 发布

richest_qi

最新推荐文章于 2023-07-01 16:59:36 发布

阅读量879

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qzw752890913/article/details/106466870

版权

JavaScript 专栏收录该内容

48 篇文章 1 订阅

订阅专栏

先给个例子。

访问事件对象

<body>
    <button onclick="sayHi()">sayHi</button>
    <button class="btn">bless</button>
    <script>
    function sayHi(){
        console.log(window.event === event);
        console.log(event);
        console.log("hello");
    }
    var btn = document.querySelector(".btn");
    btn.onclick = function(e){
        console.log(e);
        console.log("have a nice day");
    }
    </script>
</body>

在这里插入图片描述
<button onclick="sayHi()">sayHi</button>，事件对象event在window上，因此通过window.event访问。
btn.onclick = function(e){}，事件处理函数的第一个参数是事件对象。当然，也可以通过因此通过window.event访问事件对象。
想起跨浏览器的事件处理程序写法。瞧，不论onclick在html里还是js里，getEvent都能够返回事件对象。

<body>
    <button class="btn">bless</button>
    <script>
    var btn = document.querySelector(".btn");
    var EventUtil = {
        addHandler:function(elm,type,handler){
            if(elm.addEventListener){
                elm.addEventListener(type,handler,false);
            }else
             if(elm.attachEvent){
                elm.attachEvent("on"+type,handler);            
            }else{
                elm["on"+type] = handler;
            }
        },
        getEvent:function(event){
            return event||window.event;
        }
    }
    EventUtil.addHandler(btn,"click",function(e){
        var event = EventUtil.getEvent(e);
        console.log(event);
        console.log("have a nice day");
    })
    </script>
</body>

向事件处理程序传参

匿名函数赋给 onclick

事件处理程序是一个匿名函数，它的第一个参数是事件对象，只有这一个参数。

<body>
    <button >sayHi</button>
    <script>
    var b = document.querySelector("button");
    b.onclick = function(e){
        console.log(e.type);
        console.log("hello world");
    }
    </script>
</body>

已声明函数赋给 onclick

事件处理程序是一个已声明函数 doSomething，它的第一个参数是事件对象，只有这一个参数。

<body>
    <button >sayHi</button>
    <script>
    var b = document.querySelector("button");
    function doSomething(e){
        console.log(e.type);
        console.log("hello world");
    }
    b.onclick = doSomething;
</body>

不论是将匿名函数还是已声明函数赋给 onclick， 事件处理程序是一个函数，且只有一个参数，那就是事件对象。

如果想向事件处理程序中传入其他参数，最简单直接的方式就是在事件处理程序中通过调用其他函数，从而传入额外参数。就像这样。

<body>
    <button >sayHi</button>
    <script>
    function doSomething(message,e){
        console.log(`${e.type} occured,and the message is ${message}`)
    }
    var button = document.querySelector("button");
    button.onclick = function(e){
        doSomething("hello world",e);
    }
  </script>
</body>

我们来研究一个稍复杂点儿的，和this指向有关。
向事件处理程序传入额外参数有三种方式。

第一种，就像刚刚那样，在事件处理程序中直接调用TODO.doSomething方法，并传入参数name:Nicholas和事件对象e

<body>
    <button>click me </button>
    <script>
    var TODO = {
        message:"hello world",
        doSomething:function(name,e){
            console.log(`${e.type} occured,and ${name} send a message:${this.message}`);
        }
    }

    var button = document.querySelector("button");
    button.onclick = function(e){
        TODO.doSomething("Nicholas",e);
    }
  </script>

第二种，使用Function.prototype.bind

<body>
    <button>click me </button>
    <script>
    var TODO = {
        message:"hello world",
        doSomething:function(name,e){
            console.log(`${e.type} occured,and ${name} send a message:${this.message}`);
        }
    }

    var button = document.querySelector("button");
    button.onclick = TODO.doSomething.bind(TODO,"Nicholas")
   
  </script>
</body>

第三种，那就是自定义bind，本质上和Function.prototype.bind是一样的

<body>
    <button>click me </button>
    <script>
    var TODO = {
        message:"hello world",
        doSomething:function(name,e){
            console.log(`${e.type} occured,and ${name} send a message:${this.message}`);
        }
    }

    function bind(fn,context){
        var args = Array.prototype.slice.call(arguments,2);
        return function (){
            var finalArgs = args.concat(Array.prototype.slice.call(arguments));
            fn.apply(context,finalArgs);
            // fn.call(context,...finalArgs);
        }
    }
    var button = document.querySelector("button");
    button.onclick = bind(TODO.doSomething,TODO,"Nicholas");
   
  </script>
</body>

richest_qi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
事件处理程序的参数与传参

先给个例子。访问事件对象<body> <button onclick="sayHi()">sayHi</button> <button class="btn">bless</button> <script> function sayHi(){ console.log(window.event === event); console.log(event);
复制链接

扫一扫