这个问题的探讨来自我一个朋友他问的一个神奇的问题,像这样...
...
<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
是改不掉的,毕竟默认参数,然后我传入了自己的参数,给定了默认值,在调用的时候能够取到,这触发了我更深层次的思考,这种绑定方式浏览器是怎么实现的???
传统的绑定方式
- 就是上面那种了
- 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)
})
网友评论