js的onload事件及初始化按钮事件示例代码


Posted in Javascript onSeptember 25, 2013

大家常见的肯定都是<body onload=""> 这种用法.其实,不仅可以在body 上用它还支持多个HTML标签.用法如下:

onload事件当一个页面或是一张图片加载完成时被触发。

所支持的HTML标签:
<body>, <frame>, <frameset>, <iframe>, <img>, <link>, <script>

实例:
第一种方法

<BODY onload="javascript:alert('liuzm.com')"></BODY>

第二种方法
<script>window.onload=function (){alert('liuzm.com')}</script> 
<html> 
<head> 
<title>event test</title> 
</head> 
<body onload="init()"> 
<!-- 绑定方式一:在元素中,通过onXXX(事件)设置绑定方法 --> 
<button id="btn1" onclick="display()" >绑定方式一</button> <!-- 绑定方式二:在Javascript代码中,通过获得元素,为元素的onXXX(事件)设置绑定方法 --> 
<button id="btn2">绑定方式二</button> 

<!-- 绑定方式三:通过for、event为元素绑定事件(IE4+)。for后面是元素id,event是具体事件 --> 
<button id="btn3">绑定方式三</button> 
<!-- 绑定方式四:通过attachEvent为元素绑定事件(IE5+)。第一个参数是事件名,第二个参数是绑定的方法 --> 
<button id="btn4">绑定方式四</button> 
</body> 
<script type="text/javascript"> 
function init() { 
document.getElementById("btn2").onclick = display;//为button2绑定事件 
document.getElementById("btn4").attachEvent("onclick", display);//为button4绑定事件 
}

实例:
function display(event) { 
var targ;//触发事件的对象引用 
if (!event) { 
var event = window.event;//获得当前事件(IE) 
} 
if (event.target) {//IE没有target 
targ = evente.target; 
} else if (event.srcElement) {//适用于IE 
targ = event.srcElement; 
} //对触发事件的对象进行操作 
alert(targ.tagName+"-"+targ.id+"-"+event.x+"-"+event.offsetX); 
targ.disabled="disabled" ; 
} 
</script> 
<script for="btn3" event="onclick"> 
display();//为button3绑定事件 
</script>
Javascript 相关文章推荐
图片自动缩小的js代码,用以防止图片撑破页面
Mar 12 Javascript
JavaScript中函数声明优先于变量声明的实例分析
Mar 01 Javascript
javaScript复制功能调用实现方案
Dec 13 Javascript
js获取视频时长代码
Apr 10 Javascript
javascript中typeof操作符和constucor属性检测
Feb 26 Javascript
jQuery简单实现上下,左右滑动的方法
Jun 01 Javascript
JS中关于事件处理函数名后面是否带括号的问题
Nov 16 Javascript
Bootstrap CSS使用方法
Dec 23 Javascript
springmvc接收jquery提交的数组数据代码分享
Oct 28 jQuery
JavaScript解决浮点数计算不准确问题的方法分析
Jul 09 Javascript
js中对象与对象创建方法的各种方法
Feb 27 Javascript
小程序rich-text组件如何改变内部img图片样式的方法
May 22 Javascript
jquery实现table鼠标经过变色代码
Sep 25 #Javascript
js跨浏览器实现将字符串转化为xml对象的方法
Sep 25 #Javascript
仿百度的关键词匹配搜索示例
Sep 25 #Javascript
jquery 页面滚动到指定DIV实现代码
Sep 25 #Javascript
js实现两个值相加alert出来精确到指定位
Sep 25 #Javascript
Jquery判断$(&quot;#id&quot;)获取的对象是否存在的方法
Sep 25 #Javascript
js读取注册表的键值示例
Sep 25 #Javascript
You might like
php简单判断两个字符串是否相等的方法
2015/07/13 PHP
smarty高级特性之过滤器的使用方法
2015/12/25 PHP
CodeIgniter分页类pagination使用方法示例
2016/03/28 PHP
php版微信公众平台回复中文出现乱码问题的解决方法
2016/09/22 PHP
PHP中类型转换 ,常量,系统常量,魔术常量的详解
2017/10/26 PHP
laravel5.1 ajax post 传值_token示例
2019/10/24 PHP
一个XML格式数据转换为图表的例子
2010/02/09 Javascript
jquery中ajax学习笔记4
2011/10/16 Javascript
根据邮箱的域名跳转到相应的登录页面的代码
2012/02/27 Javascript
js调用webservice中的方法实现思路及代码
2013/02/25 Javascript
jQuery Migrate 1.1.0 Released 注意事项
2014/06/14 Javascript
浅析2种JavaScript继承方式
2015/12/04 Javascript
设计模式中的组合模式在JavaScript程序构建中的使用
2016/05/18 Javascript
JS实现数字格式千分位相互转换方法
2016/08/01 Javascript
Javascript中apply、call、bind的巧妙使用
2016/08/18 Javascript
JS异步文件上传(兼容IE8+)
2017/04/02 Javascript
Vue和Bootstrap的整合思路详解
2017/06/30 Javascript
Win7下搭建python开发环境图文教程(安装Python、pip、解释器)
2016/05/17 Python
Python设计实现的计算器功能完整实例
2017/08/18 Python
使用python的pandas库读取csv文件保存至mysql数据库
2018/08/20 Python
基于Python获取城市近7天天气预报
2019/11/26 Python
Python 线性回归分析以及评价指标详解
2020/04/02 Python
keras 如何保存最佳的训练模型
2020/05/25 Python
Scrapy框架介绍之Puppeteer渲染的使用
2020/06/19 Python
python获取系统内存占用信息的实例方法
2020/07/17 Python
Pytorch之Tensor和Numpy之间的转换的实现方法
2020/09/03 Python
英国著名的茶叶品牌:Whittard of Chelsea
2016/09/22 全球购物
欧尚俄罗斯网上超市:Auchan俄罗斯
2018/05/03 全球购物
什么时候用assert
2015/05/08 面试题
中文系师范生自荐信
2013/10/01 职场文书
法学求职信
2014/06/22 职场文书
员工团队活动方案
2014/08/28 职场文书
确保工程质量承诺书
2015/04/29 职场文书
离婚纠纷代理词
2015/05/23 职场文书
2015年国庆节新闻稿
2015/07/18 职场文书
Ruby序列化和持久化存储 Marshal和Pstore介绍
2022/04/18 Ruby