html中button的事件如何实现

html中button的事件如何实现,第1张

事件属性button,是触发事件的时候,获取事件对象获取button的值判断,是按下了鼠标的哪个键。

1、首先创建一个名称为button的html文件,如下图所示。

2、在body中加入onmousedown事件,事件中加入自定义函数,函数中加入事件返回对象。

3、接着加入一个p标签加入id,如下图所示。

4、然后创建一个自定义函数mybutton,如下图所示。

5、自定义函数中通过event。button属性获取整数值,并判断整数值来区分鼠标按键。

6、最后在浏览器中打开文件,在指定区域随意按下鼠标按键,查看结果。

可以写一个为表单内元素赋值的方法,三个按钮上面添加点击事件,点击时调用这个赋值方法,但是传的参数不一样,在方法中根据不同的参数,为表单赋不同模板的值。

不知上面是否写的清楚,我写了一个对应的小demo:

<html>

<head>

<title>demo</title>

<script type="text/javascript" src="jquery-1.8.3.js"></script>

<script type="text/javascript">

function demo(demo){

if(demo ==1){

$("#input1").attr("value","这是模板1")

$("#input2").attr("value",demo)

} else if(demo ==2){

$("#input1").attr("value","这是模板2")

$("#input2").attr("value",demo)

} else if(demo ==3){

$("#input1").attr("value","这是模板3")

$("#input2").attr("value",demo)

}

}

</script>

</head>

<body>

<button onclick="demo(1)">模板1</button>

<button onclick="demo(2)">模板2</button>

<button onclick="demo(3)">模板3</button>

<form>

<input id="input1" type="text"/>

<input id="input2" type="text"/>

</form>

</body>

</html>

以上,希望对你有帮助!


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/6283383.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-19
下一篇 2023-03-19

发表评论

登录后才能评论

评论列表(0条)

保存