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 相关文章推荐
中国地区三级联动下拉菜单效果分析
Nov 15 Javascript
node.js中的dns.getServers方法使用说明
Dec 08 Javascript
详解AngularJS中的filter过滤器用法
Jan 04 Javascript
JavaScript判断表单为空及获取焦点的方法
Feb 12 Javascript
JS实现六边形3D拖拽翻转效果的方法
Sep 11 Javascript
js+css3制作时钟特效
Oct 16 Javascript
js实现图片轮播效果学习笔记
Jul 26 Javascript
详解最新vue-cli 2.9.1的webpack存在问题
Dec 16 Javascript
js计算两个日期间的天数月的实例代码
Sep 20 Javascript
vue移动端html5页面根据屏幕适配的四种解决方法
Oct 19 Javascript
微信小程序webSocket的使用方法
Feb 20 Javascript
基于JavaScript实现猜数字游戏代码实例
Jul 30 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编写大型网站问题集
2007/03/06 PHP
使用PHP获取汉字的拼音(全部与首字母)
2013/06/27 PHP
在windows平台上构建自己的PHP实现方法(仅适用于php5.2)
2013/07/05 PHP
PHP+MySQL存储数据常见中文乱码问题小结
2016/06/13 PHP
js实现的GridView即表头固定表体有滚动条且可滚动
2014/02/19 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(下)
2015/10/28 Javascript
详解Javascript事件驱动编程
2016/01/03 Javascript
AngularJs自定义服务之实现签名和加密
2016/08/02 Javascript
JavaScript实现的CRC32函数示例
2016/11/23 Javascript
vue 移动端适配方案详解
2018/11/15 Javascript
详解vue移动端项目代码拆分记录
2019/03/15 Javascript
JS利用prototype给类添加方法操作详解
2019/06/21 Javascript
详解Jest结合Vue-test-utils使用的初步实践
2019/06/27 Javascript
使用zrender.js绘制体温单效果
2019/10/31 Javascript
在Django的URLconf中使用多个视图前缀的方法
2015/07/18 Python
Linux中安装Python的交互式解释器IPython的教程
2016/06/13 Python
Python使用min、max函数查找二维数据矩阵中最小、最大值的方法
2018/05/15 Python
Python实用技巧之列表、字典、集合中根据条件筛选数据详解
2018/07/11 Python
python写一个随机点名软件的实例
2019/11/28 Python
节日快乐! Python画一棵圣诞树送给你
2019/12/24 Python
python输出数学符号实例
2020/05/11 Python
Ray-Ban雷朋奥地利官网:全球领先的太阳眼镜品牌
2020/10/12 全球购物
.NET程序员的数据库面试题
2012/10/10 面试题
在C#中如何实现多态
2014/07/02 面试题
大学生个人总结的自我评价
2013/10/05 职场文书
保安拾金不昧表扬信
2014/01/15 职场文书
小学防溺水制度
2014/01/29 职场文书
人事部经理岗位职责
2014/03/07 职场文书
公立医院改革实施方案
2014/03/14 职场文书
环卫工人节活动总结
2014/08/29 职场文书
英语自我介绍演讲稿
2014/09/01 职场文书
授权收款委托书
2014/09/23 职场文书
琅琊山导游词
2015/02/05 职场文书
房屋租赁意向书范本
2015/05/09 职场文书
致短跑运动员加油稿
2015/07/21 职场文书
CentOS7 minimal 最小化安装网络设置过程
2022/12/24 Servers