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 处理 gif动画 的onload 事件的一个 bug
Apr 12 Javascript
基于JQuery的数字改变的动画效果--可用来做计数器
Aug 11 Javascript
jquery eval解析JSON中的注意点介绍
Aug 23 Javascript
jquery.cookie() 方法的使用(读取、写入、删除)
Dec 05 Javascript
node.js中使用node-schedule实现定时任务实例
Jun 03 Javascript
jQuery实现判断滚动条到底部
Jun 23 Javascript
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
Oct 09 Javascript
利用CSS3在Angular中实现动画
Jan 15 Javascript
jQuery判断元素是否显示 是否隐藏的简单实现代码
May 19 Javascript
Jquery组件easyUi实现手风琴(折叠面板)示例
Aug 23 Javascript
浅谈express.js框架中间件(middleware)
Apr 07 Javascript
Vue全局loading及错误提示的思路与实现
Aug 09 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中限制IP段访问、禁止IP提交表单的代码
2011/04/23 PHP
PHP获取短链接跳转后的真实地址和响应头信息的方法
2014/07/25 PHP
php生成固定长度纯数字编码的方法
2015/07/09 PHP
10款PHP开源商城系统汇总介绍
2015/07/23 PHP
PHP按符号截取字符串的指定部分的实现方法
2018/09/10 PHP
Avengerls vs KG BO3 第一场2.18
2021/03/10 DOTA
JSON.stringify 语法实例讲解
2012/03/14 Javascript
jquery 之 $().hover(func1, funct2)使用方法
2012/06/14 Javascript
Extjs4.0设置Ext.data.Store传参的请求方式(默认为GET)
2013/04/02 Javascript
JS保留两位小数 四舍五入函数的小例子
2013/11/20 Javascript
ES6中Math对象新增的方法实例详解
2017/04/25 Javascript
JavaScript限定范围拖拽及自定义滚动条应用(3)
2017/05/17 Javascript
vue基于element-ui的三级CheckBox复选框功能的实现代码
2018/10/15 Javascript
详解angular2 控制视图的封装模式
2018/12/27 Javascript
jQuery实现的中英文切换功能示例
2019/01/11 jQuery
vue cli安装使用less的教程详解
2019/07/12 Javascript
Android 自定义view仿微信相机单击拍照长按录视频按钮
2019/07/19 Javascript
layui实现多图片上传并限制上传的图片数量
2019/09/26 Javascript
详解搭建一个vue-cli的移动端H5开发模板
2020/01/17 Javascript
Python压缩解压缩zip文件及破解zip文件密码的方法
2015/11/04 Python
Python聚类算法之基本K均值实例详解
2015/11/20 Python
Python入门_浅谈for循环、while循环
2017/05/16 Python
python flask 多对多表查询功能
2017/06/25 Python
python itchat实现微信好友头像拼接图的示例代码
2017/08/14 Python
Python3计算三角形的面积代码
2017/12/18 Python
python使用matplotlib画饼状图
2018/09/25 Python
用Python画一个LinkinPark的logo代码实例
2019/09/10 Python
python实现数字炸弹游戏程序
2020/07/17 Python
Python实例教程之检索输出月份日历表
2020/12/16 Python
Jmeter调用Python脚本实现参数互相传递的实现
2021/01/22 Python
详解CSS3选择器的使用方法汇总
2015/11/24 HTML / CSS
html5中为audio标签增加停止按钮动作实现方法
2013/01/04 HTML / CSS
销售总经理岗位职责
2014/03/15 职场文书
工作推荐信范文
2014/05/10 职场文书
优秀大学生自荐信
2015/03/26 职场文书
作弊检讨书范文
2015/05/06 职场文书