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 相关文章推荐
google地图的路线实现代码
Aug 20 Javascript
超级给力的JavaScript的React框架入门教程
Jul 02 Javascript
javascript实现C语言经典程序题
Nov 29 Javascript
JavaScript知识点总结(十六)之Javascript闭包(Closure)代码详解
May 31 Javascript
JavaScript学习小结之使用canvas画“哆啦A梦”时钟
Jul 24 Javascript
JavaScript之RegExp_动力节点Java学院整理
Jun 29 Javascript
基于BootStrap multiselect.js实现的下拉框联动效果
Jul 28 Javascript
微信小程序对接七牛云存储的方法
Jul 30 Javascript
JavaScript学习笔记之DOM操作实例分析
Jan 08 Javascript
在微信小程序中使用mqtt服务的方法
Dec 13 Javascript
bootstrap实现tab选项卡切换
Aug 09 Javascript
jQuery实现动态操作table行
Nov 23 jQuery
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
mac下使用brew配置环境的步骤分享
2011/05/23 PHP
PHP中的Trait 特性及作用
2016/04/03 PHP
JQuery 表格操作(交替显示、拖动表格行、选择行等)
2009/07/29 Javascript
ExtJs3.0中Store添加 baseParams 的Bug
2010/03/10 Javascript
js 未结束的字符串常量错误解决方法
2010/06/13 Javascript
javascript一个无懈可击的实例化XMLHttpRequest的方法
2010/10/13 Javascript
jQuery下扩展插件和拓展函数的写法(匿名函数使用的典型例子)
2010/10/20 Javascript
JS Jquery 遍历,筛选页面元素 自动完成(实现代码)
2013/07/08 Javascript
javascript unicode与GBK2312(中文)编码转换方法
2013/11/14 Javascript
自己动手实现jQuery Callbacks完整功能代码详解
2013/11/25 Javascript
JavaScript实现获取dom中class的方法
2015/02/09 Javascript
Javascript中的数据类型之旅
2015/10/18 Javascript
js实现页面跳转的五种方法推荐
2016/03/10 Javascript
搞定immutable.js详细说明
2016/05/02 Javascript
javascript实现的左右无缝滚动效果
2016/09/19 Javascript
jQuery的deferred对象使用详解
2016/09/25 Javascript
Javascript之深入浅出prototype
2017/02/06 Javascript
JS设计模式之单例模式(一)
2017/09/29 Javascript
node.js支持多用户web终端实现及安全方案
2017/11/29 Javascript
微信小程序 flexbox layout快速实现基本布局的解决方案
2020/03/24 Javascript
js实现星星打分效果
2020/07/05 Javascript
python文本数据相似度的度量
2018/03/12 Python
python3人脸识别的两种方法
2019/04/25 Python
Python scipy的二维图像卷积运算与图像模糊处理操作示例
2019/09/06 Python
Python 的 __str__ 和 __repr__ 方法对比
2020/09/02 Python
解决pytorch 保存模型遇到的问题
2021/03/03 Python
html5 Canvas画图教程(6)—canvas里画曲线之arcTo方法
2013/01/09 HTML / CSS
英国高级百货公司:Harvey Nichols
2017/01/29 全球购物
现场施工员岗位职责
2014/03/10 职场文书
教育实习指导教师评语
2014/12/31 职场文书
2020年元旦晚会策划书模板
2019/12/30 职场文书
解决persistence.xml配置文件修改存放路径的问题
2022/02/24 Java/Android
Python加密技术之RSA加密解密的实现
2022/04/08 Python
Python查找算法的实现 (线性、二分,分块、插值查找算法)
2022/04/24 Python
CSS link与@import的区别和用法解析
2023/05/07 HTML / CSS
SQL中去除重复数据的几种方法汇总(窗口函数对数据去重)
2023/05/08 MySQL