js-事件与行为

事件：用户与计算机进行交互（键盘、鼠标）

事件分类：鼠标类，键盘类，表单类，其它类

　　鼠标类：

　　　　鼠标单击事件：click；

　　　　鼠标双击事件：dbclick；

　　　　鼠标移入事件：mouseover；

 　　　  鼠标按下松开事件：mouseup；

　　　　鼠标按下时发生事件：mousedown；

　　　　鼠标移出事件：mouseout ；

　　　   鼠标移动时发生事件：mousemove；

　　键盘类：

　　　　键盘按下事件：keydown；

　　　　键盘弹起事件：keyup；

　　表单类:

　　　　获取焦点时：focus；

　　　　失去焦点时：blur；

　　　　内容改变时：change；

　　　　输入内容时：input；

　　其他类：

　　　　资源加载：load；（等待所有资源（script标签所有内容及图片）加载完成后执行）

 

注册事件的方式：

（1）通过 dom 元素的属性注册事件

　　　　通过对象名.事件名 = function（）{}    -->匿名函数

　　eg：

 <input type="button" id="btn">点我</button>
    <script>
        // 获取 dom 元素
        var btn = document.getElementById('btn');
        // 通过 dom 元素的属性注册事件
        btn.onclick = function(){          
            console.log("hello word!");
        }
    </script>

（2）通过标签的属性注册事件

 <input type="button" onclick="fun()">点我</button>
    <script> 
       function  fun(){          
            console.log("hello word!");
        }
    </script>

 

事件监听器：

　　　　addEventListener(事件类型，处理函数，是否捕获)           绑定、捕获事件

　　　　removeEventListener(事件类型，处理函数，是否捕获)     解除绑定

　　　　（是否捕获这个参数是boolean类型，默认为false：冒泡；true为捕获）

<style type="text/css">
            div{
                border: 1px solid #000;
            }
            #d1{
                width: 700px;
                height: 700px;
            }
            #d2{
                width: 500px;
                height: 500px;
            }
            #d3{
                width: 300px;
                height: 300px;
            }
</style>

<div id="d1">
    中国
    <div id="d2">
        湖北
        <div id="d3">武汉</div>
    </div>
</div>

<script type="text/javascript">
var d1 = document.getElementById("d1");
var d2 = document.getElementById("d2");
var d3 = document.getElementById("d3");
d1.addEventListener("click",function(event){
     var event = event || window.event;
     alert("中国")
     event.stopPropagation();    //阻止事件冒泡    W3C标准（兼容性的问题：IE8及以下）
     event.cancelBubble = true;  //阻止事件冒泡      IE
},true)
d2.addEventListener("click",function(){
      alert("湖北")
},true)
d3.addEventListener("click",function(){
      alert("武汉")
 },true)
</script>

//结果是只有中国弹出来，其它没有

事件冒泡：系统默认，由最层向最外层进行传递

事件捕获：通过手动更改，由最外层向最里层进行传递

阻止事件冒泡：stopPropagation()

 

行为：当有用户操作时所带来的后果

例如：（1）form表单点击提交按钮提交后，带来的后果是表单提交了

　　　（2）a标签点击以后，带来的后果是页面跳转

　　　（3）当你在网页上点鼠标右键时，带来的后果是会出现一个右键菜单选项

　　以上这些行为都是默认行为，默认行为也称为默认事件，有时候我们是不需要使用这些默认行为的，此时我们就得想办法阻止默认行为

 

　阻止默认行为有三种方法：针对注册事件

　　（1）return false；

<a href="http://www.baidu.com" id="a1">百度</a>
<script type="text/javascript">
var a1 = document.getElementById("a1");
a1.onclick = function(){   
        return false     //常用的

}
</script>

 

　　（2）preventDafault（）；

 

<a href="http://www.baidu.com" id="a1">百度</a> 
<script type="text/javascript">
　　　a1.onclick = function(){
　　　　　　 var event = event || window.event
    　　　　event.preventDefault();   //W3C标准

}
</script>

 

　　（3）returnValue = false；

<a href="http://www.baidu.com" id="a1">百度</a> 
<script type="text/javascript">
　　　a1.onclick = function(){
　　　　　　 var event = event || window.event
    　　　　event.returnValue = false  //IE8及以下使用
 } </script>

如果事件绑定是用addEventListener来实现的，那阻止默认行为必须用e.preventDefault=true。