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 相关文章推荐
兼容ie、firefox的图片自动缩放的css跟js代码分享
Jan 21 Javascript
js 实现在离开页面时提醒未保存的信息(减少用户重复操作)
Jan 16 Javascript
利用进制转换压缩数字函数分享
Jan 02 Javascript
instanceof和typeof运算符的区别详解
Jan 06 Javascript
jquery右下角自动弹出可关闭的广告层
May 08 Javascript
解决jquery插件:TypeError:$.browser is undefined报错的方法
Nov 21 Javascript
react中的ajax封装实例详解
Oct 17 Javascript
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
Nov 10 jQuery
js屏蔽退格键(backspace或者叫后退键与F5)
Feb 10 Javascript
Fetch超时设置与终止请求详解
May 18 Javascript
JavaScript简易计算器制作
Jan 17 Javascript
jdk1.8+vue elementui实现多级菜单功能
Sep 24 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实现把MySQL数据库导出为.sql文件实例(仿PHPMyadmin导出功能)
2014/05/10 PHP
PHP实现QQ登录实例代码
2016/01/14 PHP
PHP 闭包详解及实例代码
2016/09/28 PHP
window.open的功能全解析
2006/10/10 Javascript
jquery自定义属性(类型/属性值)
2013/05/21 Javascript
ExtJS判断IE浏览器类型的方法
2014/02/10 Javascript
javascript 获取iframe里页面中元素值的方法
2014/02/17 Javascript
使用JavaScript实现网页版Pongo设计思路及源代码分享
2014/06/16 Javascript
js倒计时抢购实例
2015/12/20 Javascript
基于JavaScript实现文字超出部分隐藏
2016/02/29 Javascript
JavaScript String(字符串)对象的简单实例(推荐)
2016/08/31 Javascript
浅谈js的ajax的异步和同步请求的问题
2016/10/07 Javascript
nodejs爬虫遇到的乱码问题汇总
2017/04/07 NodeJs
bootstrap表单示例代码分享
2017/05/18 Javascript
Vue.js 踩坑记之双向绑定
2018/05/03 Javascript
Vue 实现树形视图数据功能
2018/05/07 Javascript
JavaScript原型链与继承操作实例总结
2018/08/24 Javascript
nuxt.js中间件实现拦截权限判断的方法
2018/11/21 Javascript
详解package.json版本号规则
2019/08/01 Javascript
[56:14]Fnatic vs OG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python操作MongoDB基础知识
2013/11/01 Python
Python科学计算之Pandas详解
2017/01/15 Python
python针对excel的操作技巧
2018/03/13 Python
python3安装pip3(install pip3 for python 3.x)
2018/04/03 Python
python 对key为时间的dict排序方法
2018/10/17 Python
Python学习笔记之读取文件、OS模块、异常处理、with as语法示例
2019/06/04 Python
python词云库wordcloud的使用方法与实例详解
2020/02/17 Python
Python xpath表达式如何实现数据处理
2020/06/13 Python
Python 读取位于包中的数据文件
2020/08/07 Python
HTML5如何实现元素拖拽
2016/03/11 HTML / CSS
Hotels.com印度:酒店预订
2019/05/11 全球购物
超市开店计划书
2014/04/26 职场文书
2014年效能监察工作总结
2014/11/21 职场文书
新婚姻法离婚协议书范文
2014/11/30 职场文书
蓝天保卫战收官在即 :15行业将开展环保分级评价
2019/07/19 职场文书
Python 实现绘制子图及子图刻度的变换等问题
2021/05/31 Python