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 相关文章推荐
几个高效,简洁的字符处理函数
Apr 12 Javascript
初学JavaScript_03(ExtJs Grid的简单使用)
Oct 02 Javascript
jquery下实现overlay遮罩层代码
Aug 25 Javascript
jQuery提交表单ajax查询实例代码
Oct 07 Javascript
js冒泡法和数组转换成字符串示例代码
Aug 14 Javascript
流量统计器如何鉴别C#:WebBrowser中伪造referer
Jan 07 Javascript
Node.js的包详细介绍
Jan 14 Javascript
jQuery表单美化插件jqTransform使用详解
Apr 12 Javascript
AngularJS extend用法详解及实例代码
Nov 15 Javascript
js使用generator函数同步执行ajax任务
Sep 05 Javascript
vue子传父关于.sync与$emit的实现
Nov 05 Javascript
vue3.0实现点击切换验证码(组件)及校验
Nov 18 Vue.js
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/01/02 PHP
PHP中使用CURL获取页面title例子
2015/01/07 PHP
PHP的数组中提高元素查找与元素去重的效率的技巧解析
2016/03/03 PHP
Yii实现显示静态页的方法
2016/04/25 PHP
Laravel框架创建路由的方法详解
2019/09/04 PHP
document.all的一个比较完整的总结及案例
2013/01/31 Javascript
JS.GetAllChild(element,deep,condition)使用介绍
2013/09/21 Javascript
JavaScript实现关键字高亮功能
2014/11/12 Javascript
javascript数组遍历for与for in区别详解
2014/12/04 Javascript
jQuery在ul中显示某个li索引号的方法
2015/03/17 Javascript
jqTransform美化表单
2015/10/10 Javascript
动态加载JavaScript文件的两种方法
2016/04/22 Javascript
基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)
2016/06/09 Javascript
jQuery实现立体式数字滚动条增加效果
2016/12/21 Javascript
原生JS实现《别踩白块》游戏(兼容IE)
2017/02/20 Javascript
js中json对象和字符串的理解及相互转化操作实现方法
2017/09/22 Javascript
详解JavaScript添加给定的标签选项
2018/09/17 Javascript
微信小程序实现签字功能
2019/12/23 Javascript
jQuery实现的分页插件完整示例
2020/05/26 jQuery
Python 实现随机数详解及实例代码
2017/04/15 Python
Pycharm导入Python包,模块的图文教程
2018/06/13 Python
Python全排列操作实例分析
2018/07/24 Python
Django文件存储 自己定制存储系统解析
2019/08/02 Python
Python+Tensorflow+CNN实现车牌识别的示例代码
2019/10/11 Python
Python对Excel按列值筛选并拆分表格到多个文件的代码
2019/11/05 Python
Python 里最强的地图绘制神器
2021/03/01 Python
利用HTML5中的Canvas绘制一张笑脸的教程
2015/05/07 HTML / CSS
法国高保真音响和家庭影院商店:Son Video
2019/04/26 全球购物
财务主管的岗位职责
2013/12/30 职场文书
同事吵架检讨书
2014/02/05 职场文书
安全环保标语
2014/06/09 职场文书
教师年度考核个人总结
2015/02/12 职场文书
如何让2019年上半年的工作总结更出色!
2019/07/01 职场文书
小学生一年级(书信作文)
2019/08/13 职场文书
Java 数组的使用
2022/05/11 Java/Android
python标准库ElementTree处理xml
2022/05/20 Python