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 相关文章推荐
List Information About the Binary Files Used by an Application
Jun 11 Javascript
node.js中的fs.futimesSync方法使用说明
Dec 17 Javascript
JavaScript中字符串分割函数split用法实例
Apr 07 Javascript
JavaScript中标识符提升问题
Jun 11 Javascript
js仿京东轮播效果 选项卡套选项卡使用
Jan 12 Javascript
利用prop-types第三方库对组件的props中的变量进行类型检测
May 02 Javascript
JS库之Particles.js中文开发手册及参数详解
Sep 13 Javascript
javascript实现日历效果
Jun 17 Javascript
解决layui数据表格Date日期格式的回显Object的问题
Sep 19 Javascript
vue 组件销毁并重置的实现
Jan 13 Javascript
在 Vue 中编写 SVG 图标组件的方法
Feb 24 Javascript
JS eval代码快速解密实例解析
Apr 23 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 不同编码下的字符串长度区分
2009/09/26 PHP
php实现计数器方法小结
2015/01/05 PHP
php生成图片验证码的方法
2016/04/15 PHP
php根据用户名和手机号查询是否存在手机号码
2017/02/16 PHP
Laravel 集成微信用户登录和绑定的实现
2019/12/27 PHP
php生成短网址/短链接原理和用法实例分析
2020/05/29 PHP
javascript打开新窗口同时关闭旧窗口
2009/01/16 Javascript
用JavaScript玩转游戏物理(一)运动学模拟与粒子系统
2010/06/19 Javascript
jquery下onpropertychange事件的绑定方法
2010/08/01 Javascript
实用的Jquery选项卡TAB示例代码
2013/08/28 Javascript
使用JavaScript实现旋转的彩圈特效
2015/06/23 Javascript
js实现圆盘记速表
2015/08/03 Javascript
简单讲解jQuery中的子元素过滤选择器
2016/04/18 Javascript
jQuery UI结合Ajax创建可定制的Web界面
2016/06/22 Javascript
JavaScript中无法通过div.style.left获取值的解决方法
2017/02/19 Javascript
JavaScript正则替换HTML标签功能示例
2017/03/02 Javascript
js/jq仿window文件夹框选操作插件
2017/03/08 Javascript
JS检测数组类型的方法小结
2017/03/14 Javascript
canvas实现环形进度条效果
2017/03/23 Javascript
vue仿淘宝订单状态的tab切换效果
2020/06/23 Javascript
JavaScript实现音乐自动切换和轮播
2017/11/05 Javascript
vue.js获得当前元素的文字信息方法
2018/03/09 Javascript
详解vue 数组和对象渲染问题
2018/09/21 Javascript
vue中使用vue-pdf的方法详解
2020/09/05 Javascript
pyqt5 lineEdit设置密码隐藏,删除lineEdit已输入的内容等属性方法
2019/06/24 Python
python 将视频 通过视频帧转换成时间实例
2020/04/23 Python
基于python计算滚动方差(标准差)talib和pd.rolling函数差异详解
2020/06/08 Python
在Keras中CNN联合LSTM进行分类实例
2020/06/29 Python
HTML5安全介绍之内容安全策略(CSP)简介
2012/07/10 HTML / CSS
Nike法国官方网站:Nike.com FR
2018/07/22 全球购物
店长岗位职责
2015/02/11 职场文书
实施意见格式范本
2015/06/05 职场文书
公文写作:教你写“建议书”
2019/05/07 职场文书
SSM VUE Axios详解
2021/10/05 Vue.js
《吸血鬼:避世 血猎》官宣4.27发售 系列首款大逃杀
2022/04/03 其他游戏
JS实现页面炫酷的时钟特效示例
2022/08/14 Javascript