javascript 点击按钮触发事件

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

如图,比方说我有一个函数,而我们需要点击按钮触发指定的函数,这就用到了绑定事件的方法。

如图,假定是点击事件,则在按钮里面添加onclick=函数名即可把函数绑定到按钮上。onclick绑定的是单击事件哦,当然还有很多其他的事件。

如图,绑定事件之后,当我们点击按钮即可触发绑定的函数,非常神奇哦。

当然,也可以给按钮设定一个ID,然后我们获取到带有ID的按钮。

然后在JavaScript中绑定事件也是可以的,这种方法代码比较多,想用哪种看你自己哦。

需要特别注意一点的是,如果用了第二种方法,当要获取id时,如果script脚本写在head里面,则要加上window.onload哦。如果是写在body后面,则不需要写window.onload。

赞一个, 提前学习, 做好预先 , 是个好习惯.

java图形界面主要有AWT, SWING, SWT, JavaFx等技术

JButton  (按钮)是SWING里面很常用的组件. 直接添加按钮到窗口,并不会产生任何交互效果.

要想产生交互效果,就需要了解awt,swing的事件处理机制:

事件:用户对组件的一个 *** 作,称之为一个事件;

事件源:发生事件的组件就是事件源;

事件处理器:负责处理事件的方法;

比如 点击按钮,d出HelloWord,

那么 事件是 点击按钮 ,事件源就是按钮,事件处理器就会d出对话框,显示HelloWord.

常用的事件(Event) 有:

鼠标事件(MouseEvent: 鼠标按下,移入,移除,滚轮..)

键盘事件(KeyEvent: 键盘按下,释放..)

动作事件( ActionEvent:当按钮、菜单项被点击,在JTextField中按Enter键时...触发该事件。)

按钮添加接收器, 不同的事件,接收器不同.

比如ActionEvent 那么他的接收器是ActionListener

KeyEvent 那么他的接收器就是KeyListener

基础知识,大概就是这些.

所以想要JButton产生交互,你就需要给他添加事件处理器,当发生这些事件时,出发该处理器,进行处理.

写2个例子,第一个简单的:点击按钮,d出Hello World

//导入3个图形界面,常用的包

import java.awt.*

import java.awt.event.*

import javax.swing.*

public class ButtonDemo extends JFrame {

 

 public ButtonDemo() {

  

  JButton jbHello = new JButton("Hello")//按钮

  jbHello.addActionListener(new ActionListener() {//给按钮添加事件接收器

   @Override

   public void actionPerformed(ActionEvent e) {//接受到事件后,进行下面的处理

    System.out.println("Hello World")// 控制台打印输出

    JOptionPane.showMessageDialog(null, "Hello World")// d出对话框,显示Hello World

   }

  })

  add(jbHello)//把按钮添加到窗体

  

  // 窗体属性的设置

  setLayout(new FlowLayout())// 窗体流式布局, 按添加顺序从左到右排列组件

  setSize(300, 200)// 宽300像素,高200

  setLocationRelativeTo(null)// 窗体放在显示器中间

  setTitle("HelloWord")// 窗体的标题

  setDefaultCloseOperation(EXIT_ON_CLOSE)// 点击窗体右上角的关闭按钮时,结束程序

  setVisible(true)// 窗体可见

 }

 public static void main(String[] args) {

  new ButtonDemo()

 }

}

看明白了吧, addActionListener是关键

进阶版 :加法计算器.  代码稍微长一点,.但注释很多

参考代码如下

import java.awt.*

import java.awt.event.*

import javax.swing.*

//AddFrame继承自JFrame类, 并且实现了ActionListener 接口

public class AddFrame extends JFrame implements ActionListener {

 // 组件

 JTextField jtf1, jtf2, jtf3// 文本框,用于:显示数字

 JButton jbAdd// 按钮,用于:当点击按钮时,计算出加法的结果

 JButton jbClear// 按钮, 用于,清空数字

 public AddFrame() {// 构造方法

  // 初始化组件

  jtf1 = new JTextField(5)// 长度为5的文本框

  JLabel jl = new JLabel("+")//文字标签

  jtf2 = new JTextField(5)

  jtf3 = new JTextField(6)

  jtf3.setEditable(false)

  jbAdd = new JButton("=")

  jbAdd.addActionListener(this)//因为本类已经实现了ActionListener接口,所以添加事件的接收器就是自己(this)

  jbClear = new JButton("清除")

  jbClear.addActionListener(this)

  

  //把组件,添加到窗体

  add(jtf1)

  add(jl)

  add(jtf2)

  add(jbAdd)

  add(jtf3)

  add(jbClear)

  

  // 窗体属性的设置

  setLayout(new FlowLayout())//窗体流式布局, 按添加顺序从左到右排列组件

  setSize(380, 100)// 宽380像素,高100

  setLocationRelativeTo(null)// 窗体放在显示器中间

  setTitle("加法计算器")// 窗体的标题

  setDefaultCloseOperation(EXIT_ON_CLOSE)// 点击窗体右上角的关闭按钮时,结束程序

  setVisible(true)// 窗体可见

 }

 /*

  *  实现ActionListener接口 就必须重写actionPerformed方法

  */

 @Override

 public void actionPerformed(ActionEvent e) {// 当事件产生后,就会执行actionPerformed里的方法

  JButton jbTemp= (JButton) e.getSource()//得到事件源

  

  if(jbTemp==jbAdd) {//如果是从jbAdd产生的事件.那么执行加法 *** 作

   //因为是简单案例,就不判断和处理,用户乱输入字母汉字等情况,导致的异常了

   int x = Integer.parseInt(jtf1.getText())//从文本框1得到字符串,并转化成数字

   int y = Integer.parseInt(jtf2.getText())

   jtf3.setText(x+y+"")//计算2个数的和,并显示在文本框3上

   

  }else if(jbTemp==jbClear) {//如果事件源是 jbClear,那么清除文本框的文字

   

   jtf1.setText("")

   jtf2.setText("")

   jtf3.setText("")

  }

  

 }

 // main方法

 public static void main(String[] args) {

  new AddFrame()//创建一个AddFrame的实例

 }

}


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

原文地址: http://outofmemory.cn/bake/11449675.html

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

发表评论

登录后才能评论

评论列表(0条)

保存