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实现居中弹出层代码
Aug 25 Javascript
juqery 学习之四 筛选查找
Nov 30 Javascript
js 程序执行与顺序实现详解
May 13 Javascript
JavaScript时间操作之年月日星期级联操作
Jan 15 Javascript
学习JavaScript设计模式之迭代器模式
Jan 19 Javascript
JS简单去除数组中重复项的方法
Sep 13 Javascript
微信小程序 教程之注册程序
Oct 17 Javascript
jQuery滚动插件scrollable.js用法分析
May 25 jQuery
vue生成token保存在客户端localStorage中的方法
Oct 25 Javascript
javascript少儿编程关于返回值的函数内容
May 27 Javascript
详解项目升级到vue-cli3的正确姿势
Jan 28 Javascript
详解vue中v-model和v-bind绑定数据的异同
Aug 10 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多个版本的分析解释
2011/07/21 PHP
php生成随机数的三种方法
2014/09/10 PHP
php微信支付之公众号支付功能
2018/05/30 PHP
PHP正则表达式函数preg_replace用法实例分析
2020/06/04 PHP
页面中body onload 和 window.onload 冲突的问题的解决
2009/07/01 Javascript
基于JQUERY的两个ListBox子项互相调整的实现代码
2011/05/07 Javascript
jquery打开直接跳到网页最下面、最低端实现代码
2013/04/22 Javascript
jQuery写的日历(包括日历的样式及功能)
2013/04/23 Javascript
jQuery获取页面元素绝对与相对位置的方法
2015/06/10 Javascript
JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
2016/07/27 Javascript
javascript字符串对象常用api函数小结(连接,替换,分割,转换等)
2016/09/20 Javascript
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
2018/04/26 jQuery
详解React中传入组件的props改变时更新组件的几种实现方法
2018/09/13 Javascript
vue router 源码概览案例分析
2018/10/09 Javascript
JavaScript变量Dom对象的所有属性
2020/04/30 Javascript
Python实现备份文件实例
2014/09/16 Python
初步介绍Python中的pydoc模块和distutils模块
2015/04/13 Python
python绘制简单折线图代码示例
2017/12/19 Python
python对象转字典的两种实现方式示例
2019/11/07 Python
python argparser的具体使用
2019/11/10 Python
Django Haystack 全文检索与关键词高亮的实现
2020/02/17 Python
python实现打砖块游戏
2020/02/25 Python
在django中使用post方法时,需要增加csrftoken的例子
2020/03/13 Python
Python如何使用PIL Image制作GIF图片
2020/05/16 Python
python实现图书馆抢座(自动预约)功能的示例代码
2020/09/29 Python
Django搭建项目实战与避坑细节详解
2020/12/06 Python
css3 伪类选择器快速复习小结
2019/09/10 HTML / CSS
餐饮总经理岗位职责
2014/03/07 职场文书
企业安全生产演讲稿
2014/05/09 职场文书
夫妻分居协议书范文
2014/11/26 职场文书
民事和解协议书格式
2014/11/29 职场文书
幼儿园见习总结
2015/06/23 职场文书
迎新生欢迎词2015
2015/07/16 职场文书
nginx配置proxy_pass中url末尾带/与不带/的区别详解
2021/03/31 Servers
Python合并pdf文件的工具
2021/07/01 Python
vue项目proxyTable配置和部署服务器
2022/04/14 Vue.js