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 相关文章推荐
用js实现控件的隐藏及style.visibility的使用
Jun 14 Javascript
JQuery实现鼠标滑过显示导航下拉列表
Sep 12 Javascript
JS设置网页图片vspace和hspace属性的方法
Apr 01 Javascript
Bootstrap学习笔记之css样式设计(1)
Jun 07 Javascript
从零开始学习Node.js系列教程之SQLite3和MongoDB用法分析
Apr 13 Javascript
JavaScript生成图形验证码
Aug 24 Javascript
vuex中使用对象展开运算符的示例
Sep 25 Javascript
Vue 使用 Mint UI 实现左滑删除效果CellSwipe
Apr 27 Javascript
vue.js 实现输入框动态添加功能
Jun 25 Javascript
JS/HTML5游戏常用算法之路径搜索算法 随机迷宫算法详解【普里姆算法】
Dec 13 Javascript
Vue路由管理器Vue-router的使用方法详解
Feb 05 Javascript
js实现可爱的气泡特效
Sep 05 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
最小化数据传输――在客户端存储数据
2006/10/09 PHP
让PHP以ROOT权限执行系统命令的方法
2011/02/10 PHP
PHP 将dataurl转成图片image方法总结
2016/10/14 PHP
PHP进阶学习之Geo的地图定位算法详解
2019/06/19 PHP
PHP7新增函数
2021/03/09 PHP
Js的MessageBox
2006/12/03 Javascript
editable.js 基于jquery的表格的编辑插件
2011/10/24 Javascript
javascript中判断一个值是否在数组中并没有直接使用
2012/12/17 Javascript
商城常用滚动的焦点图效果代码简单实用
2013/03/28 Javascript
ANT 压缩(去掉空格/注释)JS文件可提高js运行速度
2013/04/15 Javascript
JQuery实现防止退格键返回的方法
2015/02/12 Javascript
使用react-router4.0实现重定向和404功能的方法
2017/08/28 Javascript
从零开始搭建webpack+react开发环境的详细步骤
2018/05/18 Javascript
JavaScript常见鼠标事件与用法分析
2019/01/03 Javascript
微信小程序之侧边栏滑动实现过程解析(附完整源码)
2019/08/23 Javascript
layui内置模块layim发送图片添加加载动画的方法
2019/09/23 Javascript
[39:18]完美世界DOTA2联赛PWL S3 Forest vs LBZS 第二场 12.17
2020/12/19 DOTA
python中 ? : 三元表达式的使用介绍
2013/10/09 Python
举例讲解Python中is和id的用法
2015/04/03 Python
python编码总结(编码类型、格式、转码)
2016/07/01 Python
Python简单实现socket信息发送与监听功能示例
2018/01/03 Python
tensorflow 使用flags定义命令行参数的方法
2018/04/23 Python
python主要用于哪些方向
2020/07/05 Python
CSS3的Flexbox布局的简明入门指南
2016/04/08 HTML / CSS
Html5导航栏吸顶方案原理与对比实现
2020/06/10 HTML / CSS
小学生自我评价范例
2013/09/24 职场文书
会计专业推荐信
2013/10/29 职场文书
优秀求职信范文分享
2014/01/26 职场文书
体育课外活动总结
2014/07/08 职场文书
经典演讲稿开场白
2014/08/25 职场文书
普通党员整改措施
2014/10/24 职场文书
先进个人总结范文
2015/02/15 职场文书
走进毛泽东观后感
2015/06/04 职场文书
导游词之丹东鸭绿江
2019/10/24 职场文书
tensorflow中的数据类型dtype用法说明
2021/05/26 Python
vue实现拖拽交换位置
2022/04/07 Vue.js