javascript事件-CFANZ编程社区

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() 方法。

　　当点击关闭该网页时，提示信息，效果展示：

javascript事件_javascript

　　小结：

想要窗口关闭前，提示是否离开确认框的必要条件：必须有return ""这行代码；

想要在弹出是否离开框里添加想要提示的信息，return "自定义提示信息"。

　　用法二：在当前窗口关闭或刷新前，需要执行一些操作

/**
 * 在当前窗口关闭或刷新前，需要执行一些操作 
 */
window.onbeforeunload = function () {
    alert("输入你要执行的代码块");
}

　　注意：

这种方式在IE浏览器可以，chrome浏览器不支持；

完全判定浏览器是在关闭的，没有什么完美的方法。如果你要将事务写到这里面去，就更是建议你不要这么做了。意外的情况太多