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 相关文章推荐
jQuery $.each的用法说明
Mar 22 Javascript
发布一个基于javascript的动画类 Fx.js
Nov 05 Javascript
巧用jquery解决下拉菜单被Div遮挡的相关问题
Feb 13 Javascript
jQuery封装的屏幕居中提示信息代码
Jun 08 Javascript
vue2.0实现音乐/视频播放进度条组件
Jun 06 Javascript
jQuery中ajax请求后台返回json数据并渲染HTML的方法
Aug 08 jQuery
JavaScript中import用法总结
Jan 20 Javascript
巧妙运用v-model实现父子组件传值的方法示例
Apr 07 Javascript
微信小程序实现多选框全选与取消全选功能示例
May 14 Javascript
微信小程序封装分享与分销功能过程解析
Aug 13 Javascript
layUI使用layer.open,在content打开数据表格,获取值并返回的方法
Sep 26 Javascript
Vue组件跨层级获取组件操作
Jul 27 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
Windows下安装Memcached的步骤说明
2010/04/25 PHP
浅析php数据类型转换
2014/01/09 PHP
php画图实例
2014/11/05 PHP
使用PHP进行微信公众平台开发的示例
2015/08/21 PHP
jquery 批量上传图片实现代码
2010/01/28 Javascript
JavaScript中数组对象的那些自带方法介绍
2013/03/12 Javascript
防止浏览器记住用户名及密码的简单实用方法
2013/04/22 Javascript
js 一个关于图片onload加载的事
2013/11/10 Javascript
Jquery实现的角色左右选择特效
2014/05/21 Javascript
分享28款免费实用的 JQuery 图片和内容滑块插件
2014/12/15 Javascript
JavaScript中常用的六种互动方法示例
2015/03/13 Javascript
基于jquery实现左右按钮点击的图片切换效果
2021/01/27 Javascript
easyui combogrid实现本地模糊搜索过滤多列
2017/05/13 Javascript
Javascript中的async awai的用法
2017/05/17 Javascript
深入理解vue-loader如何使用
2017/06/06 Javascript
详解Angular2组件之间如何通信
2017/06/22 Javascript
vue中使用better-scroll实现滑动效果及注意事项
2018/11/15 Javascript
微信小程序制作扭蛋机代码实例
2019/09/24 Javascript
小程序卡片切换效果组件wxCardSwiper的实现
2020/02/13 Javascript
Python+Pika+RabbitMQ环境部署及实现工作队列的实例教程
2016/06/29 Python
Python3 适合初学者学习的银行账户登录系统实例
2017/08/08 Python
基于python的字节编译详解
2017/09/20 Python
Django后台admin的使用详解
2019/07/08 Python
详解Python图像处理库Pillow常用使用方法
2019/09/02 Python
浅谈PyQt5中异步刷新UI和Python多线程总结
2019/12/13 Python
python通过opencv实现图片裁剪原理解析
2020/01/19 Python
tensorflow实现读取模型中保存的值 tf.train.NewCheckpointReader
2020/02/10 Python
用什么库写 Python 命令行程序(示例代码详解)
2020/02/20 Python
解决windows上安装tensorflow时报错,“DLL load failed: 找不到指定的模块”的问题
2020/05/20 Python
Python自动发送和收取邮件的方法
2020/08/12 Python
css 省略号 css3让多余的字符串消失并附加省略号的实现代码
2013/02/07 HTML / CSS
英国地毯卖家:The Rug Seller
2019/07/18 全球购物
旅游节目策划方案
2014/05/26 职场文书
师德师风自我剖析材料
2014/09/27 职场文书
本地通过nginx配置反向代理的全过程记录
2021/03/31 Servers
python使用torch随机初始化参数
2022/03/22 Python