JavaScript 事件处理函数传递参数

2018-11-29 20:50| 作者: admin| 查看: 112| 评论: 0|来自: 蚂蚁部落

语法上,事件处理函数默认只传递一个参数,也就是事件对象。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
#ant{
  width:120px;
  height:60px;
  text-align:center;
  line-height:60px;
  background-color:#ccc;
}  
</style>  
<script>
window.onload=function(){
  let odiv=document.getElementById("ant");
  odiv.onclick=function(ev){
    this.innerHTML=ev.clientX;
  }
}
</script>
</head>
<body>
<div id="ant"></div>
</body>
</html>

上面代码为div元素注册click事件处理函数。

点击客户区可以将当前鼠标指针在客户区的坐标写入div。

默认情况下,事件处理函数只能接收一个参数,那么就是事件对象。

不过可以转变一下思路,通过闭包方式为实现传参功能。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script>
window.onload=function(){
  let obt=document.getElementById("bt");
  let odiv=document.getElementById("show");
  obt.onclick=(function(a,b){
    return function(ev){
      odiv.innerHTML=a+"的地址为:"+b;
    }
  })("蚂蚁部落","softwhy.com");
}
</script>
</head>
<body>
<div id="show"></div>
<input type="button" id="bt" value="查看效果"/>
</body>
</html>

上面代码通过匿名自执行函数,传递两个参数。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部