在js中如何实现点击多个按钮,响应一个函数?

JavaScript027

在js中如何实现点击多个按钮,响应一个函数?,第1张

传入参数this，每个dom节点多有this<br>function c(self){<br>alert(self.id)<br>}<br><input type='button' id='id1' onclick='c(this)'/>这里传入this，代表当前input<br><input type='button' id='id2' onclick='c(this)'/>这里传入this，代表当前input

其实两个运动是互相不影响的。我给你一个例子，按住a键，右边的红框左移，松开，框停止左移；按住右方向键左边的蓝框右移，松开，框停止右移。

<HTML>

<HEAD>

<TITLE>New Document </TITLE>

</HEAD>

<script>

var redflag=false

var blueflag=false

function moveRed(){

var obj=document.getElementById('red')

if(redflag)

obj.style.left=parseFloat(obj.style.left)-10+'px'

setTimeout('moveRed()',40)

}

function down(event){

var event=event||window.event

if(event.keyCode==65)

redflag=true

if(event.keyCode==39)

blueflag=true

}

function up(event){

var event=event||window.event

if(event.keyCode==65){

redflag=false

}

if(event.keyCode==39){

blueflag=false

}

}

function moveBlue(){

var obj=document.getElementById('blue')

if(blueflag)

obj.style.left=parseFloat(obj.style.left)+10+'px'

setTimeout('moveBlue()',40)

}

</script>

<BODY onload='moveBlue()moveRed()window.document.onkeyup=upwindow.document.onkeydown=down'>

<div id='red' style='position:absolutewidth:200pxheight:200pxborder:1px solid redleft:600px'></div>

<div id='blue'style='position:absolutewidth:200pxheight:200pxborder:1px solid blueleft:10px'></div>

</BODY>

</HTML>

原理

用JS来点击按钮需要分2步，第一步是选中按钮的元素，第二步是使用元素自带的click函数。

例如接下来我将要演示的例子中，仅用

document.getElementById("btn").click()

一行就可以控制按钮点击。

其中document.getElementById("btn")是根究id获取按钮的元素，click()是使按钮被点击一次。

演示

这是我为此问题专门写的在线演示页面点击按钮演示页面。

页面结构如图

首先点击右下角打开控制台

然后输入

document.getElementById("btn").click()

这行代码

按回车运行代码即可弹出一行提示，说明按钮被点击。你可以用鼠标点击一下按钮，也是这个效果。