JavaScript事件

2018-03-12  本文已影响0人  挥剑斩浮云

一、JavaScript鼠标事件

JavaScript鼠标事件
鼠标单击事件
<div id="btn">调试代码</div>
<script type="text/javascript"> 
    var e = document.getElementById("btn");
    e.onclick = function () { 
        alert("玩我么？");
    }
</script>
鼠标移入和移出事件
<h1 id="lvye">绿叶学习网</h1>
<script type="text/javascript">
    var e = document.getElementById("lvye");
    e.onmouseover = function () {
        this.style.color = "red";
        this.style.borderColor="red"
    }
    e.onmouseout = function () {
        this.style.color = "black";
        this.style.borderColor = "black"
    }
</script>

分析：this.style.color = "black";
在这里this指向的是e元素节点，也就是说这句代码等价于：
e.style.color = "black";
鼠标按下和松开事件
<div id="main">
    <h1 id="lvye">绿叶学习网</h1>
    <hr />
    <input id="btn" type="button" value="button" />
</div>
<script type="text/javascript">
    var btn = document.getElementById("btn");
    var e = document.getElementById("lvye");
    btn.onmousedown = function () {
        e.style.color = "red";
    }
    btn.onmouseup = function () {
        e.style.color = "black";
    }
</script>

二、JavaScript键盘事件

onkeypress事件
<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <script type="text/javascript">
        function refresh() {
            //判断是否按下R键
            if (window.event.keyCode == 82) {
                location.reload();    //刷新页面
            }
        }
        //调用函数
        document.onkeypress = refresh;
    </script>
</head>
<body>
    <div>欢迎来到绿叶学习网！</div>
</body>
</html>
onkeydown事件

onkeyup事件

<input id="txt" type="text"/>
<div>字符串长度为：<span id="num">0</span></div>
<script type="text/javascript">
    //获取DOM元素节点
    var e = document.getElementById("txt");
    var n = document.getElementById("num");
    //定义文本框的onkeyup事件
    e.onkeyup = function () {
        var str = e.value.toString();
        n.innerHTML = str.length;
    }
</script>

三、JavaScript表单事件

onfocus和onblur事件
onchange事件
<textarea id="txt" rows="5" cols="20"></textarea><br />
输入字符长度为：<span id="num"></span>
<script type="text/javascript">
    var e = document.getElementById("txt");
    var n = document.getElementById("num");
    e.onchange = function () {
        var len = e.value.length;
        n.innerText = len;
    }
</script>
onselect事件
<input id="txt1" type="text" value="欢迎来到绿叶学习网学习JavaScript入门教程" />
<br />
<textarea id="txt2" cols="20" rows="5">欢迎来到绿叶学习网学习JavaScript入门教程</textarea>
<script type="text/javascript">
document.getElementById("txt1").onselect = function() {
    alert("你选中了单行文本框中的内容");
}
document.getElementById("txt2").onselect = function() {
    alert("你选中了多行文本框中的内容");
}
</script>

四、JavaScript编辑事件

复制事件
<div>绿叶学习网成立于2015年4月1日，是一个富有活力的技术学习网站。绿叶学习网为广大网络工作者（网页开发人员、站长等）提供各种精品教程以及最精华资料。</div>
<script type="text/javascript">
document.body.oncopy = function() {
    alert("版权所有，禁止复制！");
    return false; //返回false，表示屏蔽复制功能
}
</script>
剪切事件
<textarea id="txt" cols="20" rows="5">绿叶学习网成立于2015年4月1日，是一个富有活力的技术学习网站。</textarea>
<script type="text/javascript">
var e = document.getElementById("txt");
e.oncut = function() {
    alert("禁止剪切文本框内容！");
    return false;
}
</script>
粘贴事件
<textarea id="txt" cols="20" rows="5"></textarea>
<script type="text/javascript">
    var e = document.getElementById("txt");
    e.onbeforepaste = function () {
        window.clipboardData.setData("text","");  //清空剪贴板
    }
</script>

五、JavaScript页面相关事件

window.通用事件名 = 要执行的JavaScript代码;
onload事件
window.onload=function(){
    ……
}

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <script type="text/javascript">
        var e = document.getElementById("btn");
        e.onclick = function () {
            alert("JavaScript");
        }
    </script>
</head>
<body>
    <input id="btn" type="button" value="提交" />
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <script type="text/javascript">
        window.onload = function () {
            var e = document.getElementById("btn");
            e.onclick = function () {
                alert("JavaScript");
            }
        }
    </script>
</head>
<body>
    <div id="main">
        <input id="btn" type="button" value="提交" />
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <script type="text/javascript">
        function change() {
            var e = document.getElementById("lvye");
            e.style.color = "red";
            e.style.border = "1px solid gray";
        }
    </script>
</head>
<body>
    <h1 id="lvye">绿叶学习网</h1>
    <input type="button" value="改变样式" onclick="change()"/>
</body>
</html>
onresize事件
<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <script type="text/javascript">
        window.onresize = function () {
            alert("窗口大小被改变");
        }
    </script>
</head>
<body>
</body>
</html>
onerror事件
<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
</head>
<body>
    <img src="logo.jpg" onerror="alert('图片没有加载成功！')"/>
</body>
</html>
上一篇 下一篇

猜你喜欢

热点阅读