<javascript>事件-蒲公英云

<javascript>事件

事件通常分为：事件源和响应行为。
事件在触发后弹出响应块与函数配合使用，这样我们可以通过发生的事件来驱动函数执行.

1、js的常用事件

常见事件

onclick:点击事件
onchange:域内容被改变的事件
需求：实现二级联动
            <select id="city">
                <option value="bj">北京</option>
                <option value="tj">天津</option>
                <option value="sh">上海</option>
            </select>
            <select id="area">
                <option>海淀</option>
                <option>朝阳</option>
                <option>东城</option>
            </select>
            <script type="text/javascript">
                var select = document.getElementById("city");
                select.onchange = function(){
                    var optionVal = select.value;
                    switch(optionVal){
                        case 'bj':
                            var area = document.getElementById("area");
                            area.innerHTML = "<option>海淀</option><option>朝阳</option><option>东城</option>";
                            break;
                        case 'tj':
                            var area = document.getElementById("area");
                            area.innerHTML = "<option>南开</option><option>西青</option><option>河西</option>";
                            break;
                        case 'sh':
                            var area = document.getElementById("area");
                            area.innerHTML = "<option>浦东</option><option>杨浦</option>";
                            break;
                        default:
                            alert("error");
                    }
                };              
            </script>

onfoucus:获得焦点的事件
onblur:失去焦点的事件
需求： 当输入框获得焦点的时候，提示输入的内容格式
        当输入框失去焦点的时候，提示输入有误
            <label for="txt">name</label>
            <input id="txt" type="text" /><span id="action"></span>
            <script type="text/javascript">
                var txt = document.getElementById("txt");
                txt.onfocus = function(){
                    //友好提示
                    var span = document.getElementById("action");
                    span.innerHTML = "用户名格式最小8位";
                    span.style.color = "green";
                };
                txt.onblur = function(){
                    //错误提示
                    var span = document.getElementById("action");
                    span.innerHTML = "对不起 格式不正确";
                    span.style.color = "red";
                };
            </script>

鼠标未获取焦点
为获取焦点
鼠标获取焦点
获取焦点时

onmouseover:鼠标悬浮的事件
onmouseout:鼠标离开的事件
需求：div元素 鼠标移入变为绿色 移出恢复原色
            #d1{background-color: red;width:200px;height: 200px;}
            <div id="d1"></div>
            <script type="text/javascript">
                var div = document.getElementById("d1");
                div.onmouseover = function(){
                    this.style.backgroundColor = "green";
                };
                div.onmouseout = function(){
                    this.style.backgroundColor = "red";
                };
            </script>

鼠标移出
鼠标移入

onload:加载完毕的事件
    等到页面加载完毕在执行onload事件所指向的函数
            <span id="span"></span>
            <script type="text/javascript">
                window.onload = function(){
                    var span = document.getElementById("span");
                    alert(span);
                    span.innerHTML = "hello js";
                };
            </script>

2、事件的绑定方式

(1)将事件和响应行为都内嵌到html标签中
            <input type="button" value="button"  onclick="alert('xxx')"/>
(2)将事件内嵌到html中而响应行为用函数进行封装
            <input type="button" value="button" onclick="fn()" />
            <script type="text/javascript">
                function fn(){
                    alert("yyy");
                }
            </script>
(3)将事件和响应行为 与html标签完全分离
            <input id="btn" type="button" value="button"/>
            <script type="text/javascript">
                var btn = document.getElementById("btn");
                btn.onclick = function(){
                    alert("zzz");
                };
            </script>

\*this关键字*

this经过事件的函数进行传递的是html标签对象
            <input id="btn" name="mybtn" type="button" value="button123" onclick="fn(this)"/>
            <script type="text/javascript">
                function fn(obj){
                    alert(obj.name);        //mybtn
                    alert(obj.value);       //button123
                }
            </script>

3、阻止事件的默认行为

①IE：window.event.returnValue = false;
W3c: 传递过来的事件对象.preventDefault();
//ie：window.event.returnValue = false;
//W3c：传递过来的事件对象.preventDefault();
        //W3c标准
        if(e&&e.preventDefault){
            alert("w3c");
            e.preventDefault();
        //IE标签
        }else{
            alert("ie");
            window.event.returnValue = false;
        }
②//通过事件返回false也可以阻止事件的默认行为
        <a href="http://www.baidu.com" onclick="return false">点击我吧</a>

4、阻止事件的传播

IE：window.event.cancelBubble = true;
W3c: 传递过来的事件对象.stopPropagation();
        //w3c标签
        if(e&&e.stopPropagation){
            alert("w3c");
            e.stopPropagation();
        //IE标签
        }else{
            alert("ie");
            window.event.cancelBubble = true;
        }