html 绑定dom事件的实现自定义参数

这个问题的探讨来自我一个朋友他问的一个神奇的问题,像这样...

...
<script>
  function dosomething() {
    console.log('something')  
  }
</script>

...

<button id="btn" onclick="dosomething()">按钮</button>

他得需求是在<button onclick="dosomething(params)">按钮</button>传入自己的参数,大概他是用jquery生成的多个dom节点,然后在每个dom上绑定事件,还得传入自己的参数。

我擦嘞,这种原始的绑定怎么实现啊!经过我一阵思考,我给出了下面的解决方案

<script>
  function dosomething(event, param) {
    console.log(event, param)  
  }
</script>
...
<button id="btn" onclick="dosomething(event, param={name: '张三'})">按钮</button>

首先第一个参数 event是改不掉的,毕竟默认参数,然后我传入了自己的参数,给定了默认值,在调用的时候能够取到,这触发了我更深层次的思考,这种绑定方式浏览器是怎么实现的???

传统的绑定方式

  1. 就是上面那种了
  2. dom.onclick = function(){} 或者dom.addEventListener('click', function(){})

参照第二种咱们来想想第一种是怎么实现的

首先event参数从哪来?一般而言调用方法参数需要传递,为什么click却能够直接拿到,经过我一阵思考于探索,我发现window.event和event竟然是一样的...
那么我猜想浏览器的隐式实现就是

function dosomething(event, param) {
    console.log(event, param)  
  }

...
<button id="btn" onclick2="dosomething()">按钮</button>
...

var clickStr = document.getElementById('btn').getAttribute('onclick2'); // dosomething(event, param={name: '张三'})
document.getElementById('btn').addEventListener('click2', function(event = window.event){
  eval(clickStr)
})

猜你喜欢

转载自blog.csdn.net/weixin_33832340/article/details/87211869