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)
})
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 3,543评论 1 11
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,758评论 1 45
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,379评论 0 2
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,202评论 0 1
  • 事件绑定的方式 给 DOM 元素绑定事件分为两大类:在 html 中直接绑定 和 在 JavaScript 中绑定...
    Bruce_zhuan阅读 1,061评论 0 6