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 相关文章推荐
javascript 屏蔽鼠标键盘的几段代码
Jan 02 Javascript
原生JS操作网页给p元素添加onclick事件及表格隔行变色
Dec 01 Javascript
javascript的document.referrer浏览器支持、失效情况总结
Jul 18 Javascript
JavaScript中数组成员的添加、删除介绍
Dec 30 Javascript
jQuery实现转动随机数抽奖效果的方法
May 21 Javascript
jQuery事件绑定方法学习总结(推荐)
Nov 21 Javascript
AngularJS动态绑定ng-options的ng-model实例代码
Jun 21 Javascript
angular使用bootstrap方法手动启动的实例代码
Jul 18 Javascript
js设置随机切换背景图片的简单实例
Nov 12 Javascript
《javascript少儿编程》location术语总结
May 27 Javascript
通过实例了解JS 连续赋值
Sep 24 Javascript
如何基于filter实现网站整体变灰功能
Apr 17 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 mcrypt可逆加密算法分析
2011/07/19 PHP
Mac系统下使用brew搭建PHP(LNMP/LAMP)开发环境
2015/03/03 PHP
利用PHP fsockopen 模拟POST/GET传送数据的方法
2015/09/22 PHP
阿里云的WindowsServer2016上部署php+apache
2018/07/17 PHP
nginx 设置多个站跨域
2021/03/09 Servers
复制js对象方法(详解)
2013/07/08 Javascript
jquery实现盒子下拉效果示例代码
2013/09/12 Javascript
JavaScript中的常见问题解决方法(乱码,IE缓存,代理)
2013/11/28 Javascript
jquery 设置style:display的方法
2015/01/29 Javascript
vue.js学习之vue-cli定制脚手架详解
2017/07/02 Javascript
JS计算输出100元钱买100只鸡问题的解决方法
2018/01/04 Javascript
JavaScript中的E-mail 地址格式验证
2018/03/28 Javascript
Node.js API详解之 assert模块用法实例分析
2020/05/26 Javascript
前端 javascript 实现文件下载的示例
2020/11/24 Javascript
[01:25:38]DOTA2-DPC中国联赛 正赛 VG vs LBZS BO3 第一场 1月19日
2021/03/11 DOTA
Pycharm编辑器技巧之自动导入模块详解
2017/07/18 Python
怎么使用pipenv管理你的python项目
2018/03/12 Python
解决Tensorflow安装成功,但在导入时报错的问题
2018/06/13 Python
python实现切割url得到域名、协议、主机名等各个字段的例子
2019/07/25 Python
python TCP包注入方式
2020/05/05 Python
python调用私有属性的方法总结
2020/07/24 Python
python时间序列数据转为timestamp格式的方法
2020/08/03 Python
如何使用python socket模块实现简单的文件下载
2020/09/04 Python
维氏瑞士军刀英国网站:Victorinox英国
2019/07/04 全球购物
澳大利亚购买太阳镜和眼镜网站:Glamoureyes
2020/09/22 全球购物
软件测试英文面试题
2012/10/14 面试题
大学生毕业自我鉴定
2013/11/06 职场文书
给民警的表扬信
2014/01/08 职场文书
关于环保的建议书400字
2014/03/12 职场文书
党员公开承诺书和承诺事项
2014/03/25 职场文书
创先争优演讲稿
2014/09/15 职场文书
黄石寨导游词
2015/02/05 职场文书
2015公务员年度考核评语
2015/03/25 职场文书
保送生自荐信范文
2015/03/26 职场文书
严以用权专题学习研讨会发言材料
2015/11/09 职场文书
Python-OpenCV实现图像缺陷检测的实例
2021/06/11 Python