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遮罩层效果 兼容ie firefox jQuery遮罩层
Jul 26 Javascript
解析js中获得父窗口链接getParent方法以及各种打开窗口的方法
Jun 19 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器(优化篇)
Jun 28 Javascript
JavaScript的原型继承详解
Feb 15 Javascript
JQuery控制Radio选中方法分析
May 29 Javascript
Jquery动态添加输入框的方法
May 29 Javascript
bootstrap表格分页实例讲解
Dec 30 Javascript
js简单实现网页换肤功能
Apr 07 Javascript
javascript checkbox/radio onchange不能兼容ie8处理办法
Jun 13 Javascript
node.js基于express使用websocket的方法
Nov 09 Javascript
最简单的JS实现json转csv的方法
Jan 10 Javascript
Javascript实现鼠标移入方向感知
Jun 24 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无限遍历文件夹示例分享
2014/03/04 PHP
Yii实现多数据库主从读写分离的方法
2014/12/29 PHP
PHP实现根据银行卡号判断银行
2015/04/29 PHP
CodeIgniter开发实现支付宝接口调用的方法示例
2016/11/14 PHP
PHP编程实现的TCP服务端和客户端功能示例
2018/04/13 PHP
laravel框架实现去掉URL中index.php的方法
2019/10/12 PHP
PhpStorm 如何优雅的调试Hyperf的方法步骤
2019/11/24 PHP
Javascript 同时提交多个Web表单的方法
2009/02/19 Javascript
TypeScript 学习笔记之基本类型
2015/06/19 Javascript
基于ajax实现文件上传并显示进度条
2015/08/03 Javascript
自己动手写的javascript前端等待控件
2015/10/30 Javascript
HTML5 实现的一个俄罗斯方块实例代码
2016/09/19 Javascript
Javascript中字符串相关常用的使用方法总结
2017/03/13 Javascript
Vue 2.0在IE11中打开项目页面空白的问题解决
2017/07/16 Javascript
通过js控制时间,一秒一秒自己动的实例
2017/10/25 Javascript
使用Vue.js 和Chart.js制作绚丽多彩的图表
2019/06/15 Javascript
Vue中keep-alive组件的深入理解
2020/08/23 Javascript
uniapp实现横向滚动选择日期
2020/10/21 Javascript
vuex页面刷新导致数据丢失的解决方案
2020/12/10 Vue.js
Python中使用platform模块获取系统信息的用法教程
2016/07/08 Python
python基于itchat实现微信群消息同步机器人
2017/02/27 Python
python二维列表一维列表的互相转换实例
2018/07/02 Python
Python嵌套式数据结构实例浅析
2019/03/05 Python
Keras 快速解决OOM超内存的问题
2020/06/11 Python
解决pycharm导入numpy包的和使用时报错:RuntimeError: The current Numpy installation (‘D:\\python3.6\\lib\\site-packa的问题
2020/12/08 Python
python爬虫智能翻页批量下载文件的实例详解
2021/02/02 Python
美国著名童装品牌:OshKosh B’gosh
2016/08/05 全球购物
Java中有几种方法可以实现一个线程?用什么关键字修饰同步方法?stop()和suspend()方法为何不推荐使用?
2015/08/04 面试题
怎么可以提高数据库查询数据的速度
2014/06/28 面试题
一套.net面试题及答案
2016/11/02 面试题
数控专业大学生的自我鉴定
2013/11/13 职场文书
金融学专业大学生职业生涯规划
2014/03/07 职场文书
2014年防汛工作总结
2014/12/08 职场文书
2015年度个人教学工作总结
2015/05/20 职场文书
婚宴父亲致辞
2015/07/27 职场文书
Java并发编程必备之Future机制
2021/06/30 Java/Android