JS创建事件的三种方法(实例代码)


Posted in Javascript onMay 12, 2016

1.普通的定义方式

<input type="button" name="Button" value="确定" 
onclick="Sfont=prompt('请在文本框中输入红色','红色',' 提示框 ');
if(Sfont=='红色'){

form1.style.fontFamily='黑体';


form1.style.color='red';
}"
/>

这是最常见的一种定义方式,直接将JS事件定义在需要的对象之上。相关的变形就是调用方法的形式,如下

<script>
  function show()
    {
      alert("show");
    }
</script>
<input type="button" name="show" onclick="show()"/>

第二种

<script type="text/javascript" for="window" event="onload">
  alert("Welcome!");
</script>
<script type="text/javascript" for="window" event="onunload">
  alert("Thanks!");
</script>

这里定义了加载窗口和卸载窗口时的发生的操作。

如果是针对其他对象的事件,只需要修改for属性的值为对象名,event修改为监视的的事件。如下:

<script type="text/javascript" for="test" event="onclick">
alert("button!");
</script>

第三种:

<input type="button" name="test" value="test"/>
<script>
function te()
{
  alert("test");
}
test.onclick=te;
</script>

这里我们使用注册的形式,将方法注册到指定对象的指定事件。使用对象名来调用。

完整测试代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<script type="text/javascript" for="window" event="onload">
alert("Welcome!");
</script>
<script type="text/javascript" for="window" event="onunload">
alert("Thanks!");
</script>
<form name="form1" method="post" action="">
JS很好学
</form>
<formn ame="form2" method="post" action="">
<input type="button" name="Button" value="确定" onclick="Sfont=prompt('请在文本框中输入红色','红色',' 提示框 ');if(Sfont=='红色'){form1.style.fontFamily='黑体';form1.style.color='red';}"/>
<input type="button" name="test" value="test"/>
<script>
function te()
{
alert("test");
}
test.onclick=te;
</script>

</form>
</body>
</html>

以上这篇JS创建事件的三种方法(实例代码)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery之自动完成组件的深入解析
Jun 19 Javascript
js截取中英文字符串、标点符号无乱码示例解读
Apr 17 Javascript
理解javascript封装
Feb 23 Javascript
Bootstrap CSS组件之面包屑导航(breadcrumb)
Dec 17 Javascript
JS简单获取当前日期时间的方法(如:2017-03-29 11:41:10 星期四)
Mar 29 Javascript
ES6新特性之Object的变化分析
Mar 31 Javascript
详解Angular-Cli中引用第三方库
May 21 Javascript
Angular.JS中select下拉框设置value的方法
Jun 20 Javascript
Javascript 一些需要注意的细节(必看篇)
Jul 08 Javascript
使用react实现手机号的数据同步显示功能的示例代码
Apr 03 Javascript
详解为生产环境编译Angular2应用的方法
Dec 10 Javascript
详解Vue中CSS样式穿透问题
Sep 12 Javascript
jQuery判断checkbox选中状态
May 12 #Javascript
Bootstrap3制作自己的导航栏
May 12 #Javascript
基于Bootstrap重置输入框内容按钮插件
May 12 #Javascript
jquery ajax局部加载方法详解(实现代码)
May 12 #Javascript
分享12个非常实用的JavaScript小技巧
May 11 #Javascript
分享10个优化代码的CSS和JavaScript工具
May 11 #Javascript
Bootstrap组件(一)之菜单
May 11 #Javascript
You might like
php上传功能集后缀名判断和随机命名(强力推荐)
2015/09/10 PHP
ThinkPHP3.1.x修改成功与失败跳转页面的方法
2017/09/29 PHP
用Jquery实现可编辑表格并用AJAX提交到服务器修改数据
2009/12/27 Javascript
跟着Jquery API学Jquery之一 选择器
2010/04/07 Javascript
jsvascript图像处理—(计算机视觉应用)图像金字塔
2013/01/15 Javascript
js/jQuery对象互转(快速操作dom元素)
2013/02/04 Javascript
开发插件的两个方法jquery.fn.extend与jquery.extend
2013/11/21 Javascript
关于JS数组追加数组采用push.apply的问题
2014/06/09 Javascript
jQuery实现网页抖动的菜单抖动效果
2015/08/07 Javascript
jQuery的each循环用法简单示例
2016/06/12 Javascript
基于JS实现9种不同的面包屑和分布式多步骤导航效果
2017/02/21 Javascript
webstorm添加vue.js支持的方法教程
2017/07/05 Javascript
angular4模块中给标签添加背景图的实现方法
2017/09/15 Javascript
微信小程序使用字体图标的方法
2019/05/23 Javascript
JavaScript:ES2019 的新特性(译)
2019/08/08 Javascript
JavaScript键盘事件响应顺序详解
2019/09/30 Javascript
Vue快速实现通用表单验证功能
2019/12/05 Javascript
微信小程序停止其他视频播放当前视频的实例代码
2019/12/25 Javascript
js用正则表达式筛选年月日的实例方法
2021/01/04 Javascript
基于python爬虫数据处理(详解)
2017/06/10 Python
Python最火、R极具潜力 2017机器学习调查报告
2017/12/11 Python
让代码变得更易维护的7个Python库
2018/10/09 Python
opencv+python实现均值滤波
2020/02/19 Python
pygame实现弹球游戏
2020/04/14 Python
Python实现加密的RAR文件解压的方法(密码已知)
2020/09/11 Python
使用BeautifulSoup4解析XML的方法小结
2020/12/07 Python
pyx文件 生成pyd 文件用于 cython调用的实现
2021/03/04 Python
HTML5 Web 存储详解
2016/09/16 HTML / CSS
连锁酒店店长职责范本
2014/02/13 职场文书
新员工试用期自我鉴定
2014/04/17 职场文书
三月学雷锋月活动总结
2014/04/28 职场文书
公司董事长岗位职责
2014/06/08 职场文书
交通志愿者活动总结
2014/06/27 职场文书
2015年党员个人工作总结
2015/05/13 职场文书
MySQL入门命令之函数-单行函数-流程控制函数
2021/04/05 MySQL
HTML中的表单Form实现居中效果
2021/05/25 HTML / CSS