javascript 点击按钮触发事件

JavaScript013

javascript 点击按钮触发事件,第1张

使用onclick（）点击事件触发。

1、设计一个功能页面，HTML代码如下。

2、此时的页面展示效果如下。

3、设计功能函数，实现上图中赋值的功能。

4、给按钮绑定上述函数，点击实现。

5、在页面上点击函数，查看执行效果。

扩展资料：

onclick事件解析：

1、定义和用法：onclick 属性由元素上的鼠标点击触发。

onclick 属性不适用以下元素：<base>、<bdo>、<br>、<head>、<html>、<iframe>、<meta>、<param>、<script>、<style>或 <title>。

2、语法：

<element onclick="script">。

参考资料：

百度百科--onclick

答案

将html代码改为

<input id='btn1' type='button' onclick='test(this)' title=23 value='保存' />

其中加粗的this是相对你的代码增加的部分。

然后在你页面的js中写一个函数如下：

function test(element){

alert(element.id)

}

演示

我为此问题写了一个测试页面，可以点击查看在线测试代码。

这是演示页面的结构：

现在点击保存按钮

弹出的提示就是按钮的ID

请做以下实验，你就会明白了

1. 请求包含有以上代码的页面。

2. 当你在浏览器看到该页面后，点击浏览器菜单栏的 查看--查看源文件，你会看到代码中已不含<%...........%>且已被其中的执行结果所代替，因为<%...........%>中代码为后台（服务器）程序代码（<%.......%>正是后台程序代码标识符），在到达浏览器之前已经被后台编译程序执行。

要想执行后台程序，须在前台代码中向后台发出请求。

例如：

将<%...........%>放在后台页面xxx.jsp文件中

然后在当前页中将dis方法改为

<script type="text/javascript">

<!--

function dis(){

window.open("xxx.jsp")

alert("hello")

}

//-->

</script>