码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript之元素绑定事件

时间:2019-01-28 23:09:17      阅读:187      评论:0      收藏:0      [点我收藏+]

标签:lan   back   listener   window   ie8   case   func   his   style   

元素绑定事件的方法

Element.addEventListener();
Element.attachEvent();

相同点和不同点

相同点: 都可以为元素绑定事件

不同点:
1.方法名不一样
2.参数个数不一样:addEventListener三个参数,attachEvent两个参数
3.addEventListener 谷歌,火狐,IE11支持,IE8不支持
attachEvent 谷歌火狐不支持,IE11不支持,IE8支持
4.this不同,addEventListener 中的this是当前绑定事件的对象,attachEvent中的this是window。
5.addEventListener中事件的类型(事件的名字)没有on
attachEvent中的事件的类型(事件的名字)有on。

兼容代码:

/*element表示绑定事件的元素
  type表示事件的类型
  fn表示事件处理函数
*/
function addEventListener(element,type,fn) {
  if(element.addEventListener){
    element.addEventListener(type,fn,false);
  }else if(element.attachEvent){
    element.attachEvent("on"+type,fn);
  }else{
    element["on"+type]=fn;
  }
}

为元素解绑事件

  解绑事件:
  
  注意:用什么方式绑定事件,就应该用对应的方式解绑事件
  1.解绑事件
  对象.on事件名字=事件处理函数--->绑定事件
  对象.on事件名字=null;
  2.解绑事件
  对象.addEventListener("没有on的事件类型",命名函数,false);---绑定事件
  对象.removeEventListener("没有on的事件类型",函数名字,false);
  3.解绑事件
  对象.attachEvent("on事件类型",命名函数);---绑定事件
  对象.detachEvent("on事件类型",函数名字);
  

兼容代码:

  function removeEventListener(element,type,fnName) {
    if(element.removeEventListener){
      element.removeEventListener(type,fnName,false);
    }else if(element.detachEvent){
      element.detachEvent("on"+type,fnName);
    }else{
      element["on"+type]=null;
    }
  }

事件冒泡:

事件冒泡:多个元素嵌套,有层次关系,这些元素都注册了相同的事件,如果里面的元素的事件触发了,外面的元素的该事件自动的触发了.

比如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <style>
        #dv1 {
            width: 300px;
            height: 200px;
            background-color: red;
        }

        #dv2 {
            width: 250px;
            height: 150px;
            background-color: green;
        }

        #dv3 {
            width: 200px;
            height: 100px;
            background-color: blue;
        }
    </style>
    <script>


    </script>
</head>
<body>
<div id="dv1">
    <div id="dv2">
        <div id="dv3"></div>
    </div>
</div>

<script src="common.js"></script>
<script>

    my$("dv1").onclick = function () {
        console.log(this.id);
    };
    my$("dv2").onclick = function () {
        console.log(this.id);
    };

    my$("dv3").onclick = function () {
        console.log(this.id);
    };

    document.body.onclick = function () {
        console.log("我是body");
    };
//点击最里面的dv3会发生事件冒泡,从里向外触发点击事件

</script>
</body>
</html>

阻止事件冒泡:

window.event.cancelBubble=true; IE特有的,谷歌支持,火狐不支持

e.stopPropagation(); 谷歌和火狐支持,

事件的三个阶段:

1.事件捕获阶段  :从外向内
2.事件目标阶段  :最开始选择的那个
3.事件冒泡阶段  : 从里向外

为同一个元素绑定不同事件且指向同一个事件处理函数:

比如:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>

</head>
<body>
<input type="button" value="按钮" id="btn"/>
<script src="common.js"></script>
<script>
  my$("btn").onclick = f1;
  my$("btn").onmouseover = f1;
  my$("btn").onmouseout = f1;
  function f1(e) {
    switch (e.type) {
      case "click":
        alert("我是按钮");
        break;
      case "mouseover":
        this.style.backgroundColor = "red";
        break;
      case "mouseout":
        this.style.backgroundColor = "green";
        break;
    }
  }
</script>
</body>
</html>

JavaScript之元素绑定事件

标签:lan   back   listener   window   ie8   case   func   his   style   

原文地址:https://www.cnblogs.com/hzdwwzz/p/10332052.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!