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 相关文章推荐
FF IE兼容性的修改小结
Sep 02 Javascript
JavaScript DOM学习第八章 表单错误提示
Feb 19 Javascript
jquery获取复选框被选中的值
Apr 10 Javascript
JavaScript使用FileSystemObject对象写入文本文件内容的方法
Aug 05 Javascript
JS实现获取键盘按下的按键并显示在页面上的方法
Nov 04 Javascript
Javascript中字符串相关常用的使用方法总结
Mar 13 Javascript
js控制文本框禁止输入特殊字符详解
Apr 07 Javascript
浅谈JS对html标签的属性的干预以及对CSS样式表属性的干预
Jun 25 Javascript
Node.js系列之安装配置与基本使用(1)
Aug 30 Javascript
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
Sep 03 jQuery
layui 数据表格+分页+搜索+checkbox+缓存选中项数据的方法
Sep 21 Javascript
nestjs返回给前端数据格式的封装实现
Feb 22 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实现像JSP,ASP里Application那样的全局变量
2007/01/12 PHP
php接口数据加密、解密、验证签名
2015/03/12 PHP
php打乱数组二维数组多维数组的简单实例
2016/06/17 PHP
php文件包含目录配置open_basedir的使用与性能详解
2017/04/03 PHP
ThinkPHP实现简单登陆功能
2017/04/28 PHP
解决laravel 5.1报错:No supported encrypter found的办法
2017/06/07 PHP
PHP使用栈解决约瑟夫环问题算法示例
2017/08/27 PHP
设定php简写功能的方法
2019/11/28 PHP
玩转jQuery按钮 请告诉我你最喜欢哪些?
2012/01/08 Javascript
Ext JS添加子组件的误区探讨
2013/06/28 Javascript
jquery 漂亮的删除确认和提交无刷新删除示例
2013/11/13 Javascript
jquery实现图片按比例缩放示例
2014/07/01 Javascript
jQuery 操作input中radio的技巧
2016/07/18 Javascript
JQuery Ajax 异步操作之动态添加节点功能
2017/05/24 jQuery
JS原型继承四步曲及原型继承图一览
2017/11/28 Javascript
echarts实现词云自定义形状的示例代码
2019/02/20 Javascript
koa+jwt实现token验证与刷新功能
2019/05/30 Javascript
vue-form表单验证是否为空值的实例详解
2019/10/29 Javascript
Python cookbook(数据结构与算法)找到最大或最小的N个元素实现方法示例
2018/02/13 Python
Python入门必须知道的11个知识点
2018/03/21 Python
详解python3中tkinter知识点
2018/06/21 Python
在python中只选取列表中某一纵列的方法
2018/11/28 Python
python 用 xlwings 库 生成图表的操作方法
2019/12/22 Python
利用Tensorflow构建和训练自己的CNN来做简单的验证码识别方式
2020/01/20 Python
利用HTML5 Canvas制作一个简单的打飞机游戏
2015/05/11 HTML / CSS
爱尔兰家电数码商城:Currys PC World爱尔兰
2016/07/23 全球购物
独特的礼品和创新的科技产品:The Grommet
2018/02/24 全球购物
别名指示符是什么
2012/10/08 面试题
DTD的含义以及作用
2014/01/26 面试题
实习单位鉴定评语
2014/04/26 职场文书
环卫工人慰问信
2015/02/15 职场文书
道歉信怎么写
2015/05/12 职场文书
婚庆司仪开场白
2015/05/29 职场文书
JS异步堆栈追踪之为什么await胜过Promise
2021/04/28 Javascript
Go使用协程交替打印字符
2021/04/29 Golang
Pyhton模块和包相关知识总结
2021/05/12 Python