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 相关文章推荐
javascript dom代码应用 简单的相册[firefox only]
Jun 12 Javascript
jQuery总体架构的理解分析
Mar 07 Javascript
High Performance JavaScript(高性能JavaScript)读书笔记分析
May 05 Javascript
JQuery获取当前屏幕的高度宽度的实现代码
Jul 12 Javascript
JS的replace方法详细介绍
Nov 09 Javascript
JavaScript严格模式禁用With语句的原因
Oct 20 Javascript
window.onload与$(document).ready()的区别分析
May 30 Javascript
jQuery实现分章节锚点“回到顶部”动画特效代码
Oct 23 Javascript
为何JS操作的href都是javascript:void(0);呢
Nov 12 Javascript
js实现常见的工具条效果
Mar 02 Javascript
Spring Boot+AngularJS+BootStrap实现进度条示例代码
Mar 02 Javascript
JS删除String里某个字符的方法
Jan 06 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
dedecms系统的广告设置代码 基础版本
2010/04/09 PHP
2个自定义的PHP in_array 函数,解决大量数据判断in_array的效率问题
2014/04/08 PHP
PHP会话处理的10个函数
2015/08/11 PHP
PHP CURL或file_get_contents获取网页标题的代码及两者效率的稳定性问题
2015/11/30 PHP
两种php实现图片上传的方法
2016/01/22 PHP
PHP实现多级分类生成树的方法示例
2017/02/07 PHP
tp5.1 框架数据库高级查询技巧实例总结
2020/05/25 PHP
php和js对数据库图片进行等比缩放示例
2014/04/28 Javascript
Jquery全屏相册插件zoomvisualizer具有调节放大与缩小功能
2015/11/02 Javascript
javascript 中select框触发事件过程的分析
2017/08/01 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)
2019/01/24 Javascript
详解如何给React-Router添加路由页面切换时的过渡动画
2019/04/25 Javascript
学习RxJS之JavaScript框架Cycle.js
2019/06/17 Javascript
微信小程序自定义弹窗滚动与页面滚动冲突的解决方法
2019/07/16 Javascript
基于 vue-skeleton-webpack-plugin 的骨架屏实战
2019/08/05 Javascript
js布局实现单选按钮控件
2020/01/17 Javascript
Auto.JS实现抖音刷宝等刷视频app,自动点赞,自动滑屏,自动切换视频功能
2020/05/08 Javascript
JavaScript Event Loop相关原理解析
2020/06/10 Javascript
python中的多线程实例教程
2014/08/27 Python
利用python实现命令行有道词典的方法示例
2017/01/31 Python
离线安装Pyecharts的步骤以及依赖包流程
2020/04/23 Python
python中图像通道分离与合并实例
2020/01/17 Python
最新PyCharm 2020.2.3永久激活码(亲测有效)
2020/11/26 Python
全方位了解CSS3的Regions扩展
2015/08/07 HTML / CSS
HTML5是否真的可以取代Flash
2010/02/10 HTML / CSS
《北京的春节》教学反思
2014/04/07 职场文书
商务助理求职信范文
2014/04/20 职场文书
设计专业自荐信
2014/06/19 职场文书
催款函怎么写
2015/06/24 职场文书
2016幼儿教师自荐信范文
2016/01/28 职场文书
高三化学教学反思
2016/02/22 职场文书
《植物妈妈有办法》教学反思
2016/02/23 职场文书
python tqdm用法及实例详解
2021/06/16 Python
教你使用一行Python代码玩遍童年的小游戏
2021/08/23 Python
java objectUtils 使用可能会出现的问题
2022/02/28 Java/Android
云服务器部署 Web 项目的实现步骤
2022/06/28 Servers