网页网站您现在的位置是:首页 > 博客日志 > 网页网站

JavaScript 绑定事件时传递参数数据的两种方法

<a href='mailto:'>微wx笑</a>的头像微wx笑2020-03-30 20:00:41网页网站人已围观关键字: JavaScript  

JavaScript 绑定事件时传递参数数据方法一:转自:https://segmentfault.com/a/1190000002440325var data = { name: &#39;Ruchee&#39;, email: &#39;my@ruchee.com&#39;}

JavaScript 绑定事件时传递参数数据eCN编程技术_踩坑日志_进阶指南_无知人生

方法一:

转自:https://segmentfault.com/a/1190000002440325eCN编程技术_踩坑日志_进阶指南_无知人生

var data = {
    name: 'Ruchee',
    email: 'my@ruchee.com'
};
data.handleEvent = function (e) {
    console.log(this);
};
document.getElementById('test_button').addEventListener('click', data, false);

要点:eCN编程技术_踩坑日志_进阶指南_无知人生

1. 绑定事件时传递数据本身eCN编程技术_踩坑日志_进阶指南_无知人生

2. 传递的数据中需要定义有一个 handleEvent 方法来负责事件响应eCN编程技术_踩坑日志_进阶指南_无知人生


eCN编程技术_踩坑日志_进阶指南_无知人生

方法二:

还有一种方法,就是在标签上绑定要传递的数据,例如:eCN编程技术_踩坑日志_进阶指南_无知人生

var image = document.createElement("img");
image.src = ci;//ci为一个URL字符串
image.setAttribute("data-src", ci);
image.addEventListener("click",inputTitlepic);

function inputTitlepic(evt){
  var ipt = document.getElementById("titlepic");
  if (ipt && evt){
    ipt.value = evt.srcElement.getAttribute("data-src");
  }
}

同样你也可以通过以下方式来读取:eCN编程技术_踩坑日志_进阶指南_无知人生

evt.srcElement.dataset.src;

如下图:eCN编程技术_踩坑日志_进阶指南_无知人生

image.pngeCN编程技术_踩坑日志_进阶指南_无知人生


eCN编程技术_踩坑日志_进阶指南_无知人生

本文由 微wx笑 创作,采用 CC BY-NC 4.0 许可协议。 非商业性使用可自由转载、引用、甚至修改,但需署名作者且注明出处。

很赞哦! () 有话说 ()