CreateTime--2017年1月15日12:57:57
Author:Marydon
javascript事件及应用
说明：
1.添加javascript事件的两种方式
//方式一
a.在标签上进行声明；
注：
js对应的事件的"javascript"声明可有可无，但是为了规范需要加上声明，即"javascript:";
js事件所对应的值可以直接添加js代码（见下面的onclick事件）
//方式二
b.使用js为该标签绑定事件；
2.事件中的return true/false 与 event.returnValue=true/false
a.return false 与 event.returnValue=false 表示的含义相同；
b."return true;"与"event.returnValue=true;"表示的含义相同。
具体事件
1.onload 事件
说明：页面加载完毕后要执行的操作
//方式1：在js文件中使用 window.onload = function () { } //方式2：在body标签上使用
<body onload="javascript:function1();function2();function3();"> </body>
注意：
a.当onload在标签上声明时，仅仅声明在body标签上时有效，如：在div上声明一个onload事件，虽然不报错，但是该onload事件无效；
b.window.onload事件在js中有效执行的有且只有一个（声明多次没有意义），否则后面的会将前面的覆盖
案例：
window.onload同时执行多个函数的解决方法（解决不能使用多个window.onload的方法）
CreateTime--2016年9月23日10:27:53
方法一：同时调用多个函数(body方式)
程序代码
<html> <body onload="function1();function2();function3();"> </body> </html>
方法二：在JavaScript语句中同时调用多个函数（适用于函数少的情况）
程序代码
<script type="text/javascript">
function f1(){...}
function f2(){...}
function f3(){...}
function f4(){...}
window.onload=function(){
f1();
f2();
f3();
f4();
}
</script>
这种调用方式可以用于不太复杂的JavaScript程序中，如果程序函数很多，逻辑比较复杂，可以考虑用另外一种方式
方法三：自定义函数式多次调用（函数多时，推荐使用）
function addLoadEvent(func) { var oldonload = window.onload; //得到上一个onload事件的函数 if(typeof oldonload != "function") { //判断类型是否为function,注意TYPROF返回的是字符串 window.onload = func; } else { window.onload = function() { oldonload(); //调用前覆盖的onload事件的函数 func(); //调用当前的函数 } } }
使用方法：
function testOnload() { alert(2); }; function testOnload2() { alert(3); }
调用：
addLoadEvent(testOnload);
addLoadEvent(testOnload2);
说明：详细解释见：js-自定义方法或demo-多次调用window.onload.html文件
UpdateTime--2017年1月7日16:27:00
2.onclick 事件
说明：点击时触发的事件
举例：
<input type="checkbox" id="STATUS_CH" onclick="javascript:if (this.checked) $get('FSTATUS').value='1';else $get('FSTATUS').value='0';"/>
UpdateTime--2017年1月12日16:24:38
3.onresize 事件
说明：该事件会在窗口或框架大小改变时触发
window.onresize = function() { alert("resize") }
4.onscroll 事件
说明：页面有滚动条，滚动条滚动时触发，监听的是页面的滚动事件
案例：滚动条滚动到底部时，再次继续加载数据
window.onscroll = function() { //滚动条高度 网页被卷去的高度 var stop = document.body.scrollTop || document.documentElement.scrollTop; //浏览器高度（当前窗口）head标签的内容不会作为正文显示在页面上 var wh = window.innerHeight || document.documentElement.clientHeight; //文本高度（可见元素之和的高度） var bodyHeight = document.body.clientHeight; //alert("stop"+stop+"====wh"+wh) //实现的就是滚动条滚动到底部，再次继续加载数据 if (stop + wh >= bodyHeight) { alert("h1="+(stop+wh)+"h2="+bodyHeight) //alert("加载数据"); } }
5.oncopy 事件
说明：当进行复制时触发
案例：禁用复制功能
a.设置某个具体标签禁止复制
<input id="test" type="text"/>
//方法1:
在标签上添加oncopy事件：
oncopy="javascript:return false;"
即：
<input id="test" type="text" oncopy="javascript:return false;"/>
或
<input id="test" type="text" oncopy="javascript:event.returnValue=false;"/>
//方法2:
绑定oncopy事件
window.onload = function() { document.getElementById("test").oncopy = function(){return false;} //或document.getElementById("test").oncopy = function(){event.returnValue=false;} //或document.getElementById("test").oncopy = new Function("event.returnValue=false"); }
b.禁止复制网页内容
参考链接：http://www.jb51.net/article/18494.htm
//方法1：
在网页中加入以下代码：
<script language="Javascript">
//方法一
document.oncopy = function() {return false;}
//方法二
document.oncopy= new Function("event.returnValue=false");
//方法三
document.oncopy = function() {event.returnValue=false;}
</script>
//方法2:
在body标签上添加oncopy事件：
oncopy="javascript:return false;"
即：
<body oncopy="javascript:return false;"></body>
或
<body oncopy="javascript:event.returnValue=false;"></body>
6.onpaste 事件
说明：进行粘贴时触发
案例：禁用粘贴
在标签上添加onpaste事件：
onpaste="javascript:return false;"
即：
<input id="test" type="text" onpaste="javascript:return false;"/>
7.onselectstart 事件
说明：选取网页内容时触发
案例：禁用选取功能
<div id="test"></div>
//方法1:
在标签上添加onselectstart事件：
onselectstart="javascript:return false;"
即：
<div id="test" onselectstart="javascript:return false;"></div>
//方法2:
绑定onselectstart事件
window.onload = function() { document.getElementById("test").onselectstart = function(){return false;} }
8.oncontextmenu 事件
说明：鼠标右键时触发
案例：禁用右键菜单
在标签上添加oncontextmenu事件：
oncontextmenu="javascript:return false;"
即：
<input id="test" type="text" oncontextmenu="javascript:return false;"/>
UpdateTime--2017年1月19日23:08:06
9.onfocus 事件
说明：光标聚焦时触发
10.onblur 事件
说明：光标失去焦点时触发
11.onsubmit 事件
说明：控制form表单的提交 return false/true;
12.onmouseover 事件
说明：鼠标悬浮时触发
UpdateTime--2017年1月21日18:56:02
13.ondblclick 事件
说明：鼠标双击时触发的事件
举例：
<input type="checkbox" id="userName" ondblclick="javascript:alert('ondblclick事件');"/>
UpdateTime--2017年7月9日11:43:21
14.onbeforeunload 事件
说明：在即将离开当前页面（刷新或关闭）时触发
用法一：在即将离开当前页面（刷新或关闭）时，弹出是否离开确认框
实现方式一
/** * 在即将离开当前页面（刷新或关闭）时，弹出是否离开确认框 */ window.onbeforeunload = function () { return ""; }
实现方式二
/** * 添加监听事件 */ window.addEventListener("beforeunload", function(event) { event.returnValue = ""; });
注意：Internet Explorer 8 及更早 IE 版本不支持 addEventListener() 方法。
当点击关闭该网页时，提示信息，效果展示：
小结：
a.想要窗口关闭前，提示是否离开确认框的必要条件：必须有return ""这行代码；
b.想要在弹出是否离开框里添加想要提示的信息，return "自定义提示信息"。
用法二： 在当前窗口关闭或刷新前，需要执行一些操作
/** * 在当前窗口关闭或刷新前，需要执行一些操作 */ window.onbeforeunload = function () { alert("输入你要执行的代码块"); }
注意：
a.这种方式在IE浏览器可以，chrome浏览器不支持；
b.完全判定浏览器是在关闭的，没有什么完美的方法。如果你要将事务写到这里面去，就更是建议你不要这么做了。意外的情况太多