javascript事件

2021-02-06 16:42:25 174

javascript事件

javascript是事件驱动的，发生某种事件后可以触发一段javascript代码的执行，先来看几个名词：用户点击html页面中的按钮，这时会发生一个事件，叫做点击事件，被点击的按钮叫做事件源，点击按钮后弹出一个对话框，点击按钮后发生的行为叫做响应行为。

javascript的常用事件

onclick:点击事件
onchange:域内容被改变的事件
onfocus:获得焦点的事件
onblur:失去焦点的事件
onmouseover:鼠标悬浮的事件
onmouseout:鼠标离开的事件
onload:加载完毕的事件

事件的绑定方式

事件绑定有三种方式：

将事件和响应行为都内嵌到html标签中

      <input type="button" value="点我"  onclick="alert('事件绑定1')"/>

将事件内嵌到html中,响应行为用javascript函数进行封装

      <input type="button" value="点我" onclick="fun()" />
      <script type="text/javascript">
          function fun(){
              alert("事件绑定2");
          }
      </script>

将事件和响应行为与html标签完全分离

      <input id="btn" type="button" value="点我"/>
      <script type="text/javascript">
          //document是一个文档对象
          //通过getElementById的方法可以获取该id的标签对象
          var btn = document.getElementById("btn");
          btn.onclick = function(){
              alert("事件绑定3");
          };
      </script>

this关键字

使用this可以传递html中的标签对象，如下代码使用this将整个input标签作为对象传入到了javascript中，这样可以获取标签中的属性了。

    <input id="btn" type="button" value="点我" onclick="fun(this)"/>
    <script type="text/javascript">
        function fun(obj){
            alert(obj.value);
        }
    </script>

事件的应用

onchange使用onchange事件实现城市和区的二级联动

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>onchange</title>
</head>
<body>

    <select id="city">
        <option value="bj">北京</option>
        <option value="tj">天津</option>
        <option value="sh">上海</option>
    </select>
    <select id="area">
        <option>海淀</option>
        <option>朝阳</option>
    </select>

</body>
<script type="text/javascript">
    var select = document.getElementById("city");
    select.onchange = function(){
        var optionVal = select.value;
        var area = document.getElementById("area");

        if('bj' == optionVal){
            area.innerHTML = "<option>海淀</option><option>朝阳</option>";
        }else if('tj' == optionVal){
            area.innerHTML = "<option>南开</option><option>静海</option>";
        }else if('sh' == optionVal){
            area.innerHTML = "<option>浦东</option><option>黄浦</option>";
        }else{
            alert("error");
        }

    };

</script>
</html>

onfocus和onblur实现当input获得焦点和失去焦点分别给用户一个提示信息。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>onfocus和onblur</title>
</head>
<body>

    <label for="name">姓名：</label>
    <input id="name" type="text" /><span id="nameValid"></span>

</body>


<script type="text/javascript">
    var name = document.getElementById("name");
    name.onfocus = function(){
        //友好提示
        var span = document.getElementById("nameValid");
        span.innerHTML = "姓名长度最小8位";
        span.style.color = "green";
    };
    name.onblur = function(){
        //错误提示
        var span = document.getElementById("nameValid");
        span.innerHTML = "格式不正确";
        span.style.color = "red";
    };
</script>    
</html>

onmouseover和onmouseout实现一个div元素被鼠标移入时变为粉色移出恢复原色

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>onmouseover和onmouseout</title>
<style type="text/css">

    #d1{background-color: blue;width:100px;height: 100px;}

</style>
</head>

<body>

    <div id="d1"></div>

</body>


<script type="text/javascript">
    var div = document.getElementById("d1");
    div.onmouseover = function(){
        this.style.backgroundColor = "pink";
    };
    div.onmouseout = function(){
        this.style.backgroundColor = "blue";
    };
</script>

</html>

onload实现当页面加载完毕后，动态的设置span中的内容

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>onload</title>
<script type="text/javascript">
window.onload = function(){
    var span = document.getElementById("span");
    span.innerHTML = "hello js";
}; 
</script>
</head>
<body>
    <span id="span"></span>
</body>
</html>

阻止事件的默认行为

a标签中有默认的onclick行为，这个行为叫做事件默认行为，可以通过js代码来阻止事件的默认行为，在不同的浏览器中需要使用不同的写法。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>阻止事件的默认行为</title>
<script type="text/javascript">
    //IE:window.event.returnValue = false;
    //W3C:传递过来的对象.preventDefault();
    function fun(e){
        //W3C
        if(e && e.preventDefault){
            alert("W3C");
            e.preventDefault();
        }else{
            alert("IE");
            window.event.returnValue = false;
        }
    }
</script>
</head>
<body>
    <a href="15-onload事件.html" onclick="fun(event)">点我啊</a>
</body>
</html>

阻止事件的传播

如下代码，一个大的div中包裹了一个小的div，对于浏览器来说，小的div覆盖了大div的一部分，当点击小div时，也会触发大div的onclick事件，可以使用js代码来阻止这种事件的传播。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>阻止事件的传播</title>
<style type="text/css">
    #d1{
        width:100px;
        height:100px;
        background-color:orange;
        padding:50px;
    }

    #d2{
        width:100px;
        height:100px;
        background-color:pink;
    }
</style>
<script type="text/javascript">
    //IE:window.event.cancelBubble = false;
    //W3C:传递过来的对象.stopPropagation();


    function fun1(){
        alert("fun1");
    }
    function fun2(e){
        alert("fun2");
        //W3C
        if(e && e.stopPropagation){
            e.stopPropagation();
        }else{
            //IE
            window.event.cancelBubble = false;
        }

    }
</script>
</head>
<body>
    <div id="d1" onclick="fun1();">
        <div id="d2" onclick="fun2(event);">
        </div>
    </div>
</body>
</html>

javascript