美文网首页
html 绑定dom事件的实现自定义参数

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

作者: 月肃生 | 来源:发表于2019-01-18 17:40 被阅读14次

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

...
<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)
})

相关文章

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

    这个问题的探讨来自我一个朋友他问的一个神奇的问题,像这样... 他得需求是在 按钮 传入自己的参数,大概他是用jq...

  • 自定义事件深入

    1.原生dom绑定系统事件 2.非原生dom绑定自定义事件 Event组件:Event非原生DOM节点,而绑定的c...

  • 事件生僻知识学习笔记

    DOM2 级事件包括: 事件捕获,处于目标,事件冒泡 绑定事件方法: HTML上直接绑定 DOM0级事件处理程序 ...

  • jQuery(事件)

    DOM事件 表单事件 键盘事件 事件的绑定和解绑 事件对象的使用 自定义事件

  • 浅谈DOM的事件绑定

    事件绑定的方式 给 DOM 元素绑定事件分为两大类:在 html 中直接绑定 和 在 JavaScript 中绑定...

  • angular--数据绑定

    数据绑定几种语法: 事件绑定: 属性绑定和插值绑定是一样的: HTML属性和DOM属性的关系: HTML属性绑定:...

  • (七)数据绑定,响应式编程和管道

    (一)数据绑定 1.数据绑定 添加一些键盘事件 (二)DOM属性绑定 DOM属性和HTML属性。(input)上面...

  • Javascript中事件处理程序

    1、在DOM中,直接用onXXX="fun();"进行绑定(HTML中直接绑定) 事件绑定 事件处理程序var f...

  • Angular学习之五(属性绑定)

    事件绑定 Dom属性绑定 Html属性绑定 双向绑定 在app.module.ts中引入import { Form...

  • 1.事件绑定

    被绑定的事件可以是标准的dom事件,也可以是任意的自定义事件。

网友评论

      本文标题:html 绑定dom事件的实现自定义参数

      本文链接:https://www.haomeiwen.com/subject/yqandqtx.html