事件绑定与解绑

一、js的原生事件绑定与解绑

1、js原生事件类型

onclick：单击
onmousedown：鼠标按下
onmouseup：鼠标抬起
onmouseover：鼠标悬浮
onmouseout：鼠标离开
onmousemove：鼠标移动
…
这个还有很多，就不一一列举了

2、原生事件绑定

 <input type="button" value="点击显示" id="btn">
    <p>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rem modi accusamus tempora nemo, libero iure quas tenetur! Doloribus aliquam deserunt, nulla ex eius, aut repellendus, accusamus aspernatur temporibus necessitatibus in!
</p>
<script>
   var btn = document.getElementById("btn");
   var p = document.getElementsByTagName("p")[0];
   btn.onclick = function() {
       var r = Math.floor(Math.random() * 255);
       var g = Math.floor(Math.random() * 255);
       var b = Math.floor(Math.random() * 255);
       p.style.color = `rgb(${r},${g},${b})`;
   }
</script>

可以实现颜色的随机

3、原生事件解绑

<input type="button" value="点击解绑" id="rem">

  <script>
      var rem = document.getElementById("rem");
      rem.onclick = function() {
          btn.onclick = null
      }
  </script>

二、jQuery的事件绑定与解绑

1、jQuery事件

on()
bind()
live()
delegate()

1.on()

on() 方法在被选元素及子元素上添加一个或多个事件处理程序,是目前比较常用的，可以用于事件托管，替代了bind和delegate

<input type="button" value="点击显示" id="btn">
    <p>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rem modi accusamus tempora nemo, libero iure quas tenetur! Doloribus aliquam deserunt, nulla ex eius, aut repellendus, accusamus aspernatur temporibus necessitatibus in!
    </p>

    <script src="./02-xiangmu/views/lib/js/jquery-1.12.4.js"></script>
    <script>
        $("#btn").on("click", function() {
            var r = Math.floor(Math.random() * 255);
            var g = Math.floor(Math.random() * 255);
            var b = Math.floor(Math.random() * 255);
            $("p").css("color", `rgb(${r},${g},${b})`)
        })
        //事件解绑
        $("#btn").off("click")
    </script>

off() 方法通常用于解绑通过 on() 方法添加的事件处理程序。

2.bind()

bind() 方法向被选元素添加一个或多个事件处理程序，不能用于未来的元素（比如script创建的新元素）

<input type="button" value="点击显示" id="btn">
 <p>
     Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rem modi accusamus tempora nemo, libero iure quas tenetur! Doloribus aliquam deserunt, nulla ex eius, aut repellendus, accusamus aspernatur temporibus necessitatibus in!
 </p>

 <script src="./02-xiangmu/views/lib/js/jquery-1.12.4.js"></script>
 <script>
 	// 绑定
      $("#btn").bind("click", function() {
            var r = Math.floor(Math.random() * 255);
            var g = Math.floor(Math.random() * 255);
            var b = Math.floor(Math.random() * 255);
            $("p").css("color", `rgb(${r},${g},${b})`)
        })
	//解绑
	$("#btn").unbind("click")
 </script>

3、delegate()

delegate() 方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。
使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由script创建的新元素），事件托管。

   <ul id="list">
   </ul>
   <script src="./02-xiangmu/views/lib/js/jquery-1.12.4.js"></script>
   <script>
       // 绑定
       for(var i = 0; i < 5; i ++) {
           $(`<li>${i}</li>`).appendTo($("#list"))
       }
       $("#list").delegate("li", "click", function() {
           alert($(this).text());
       });
       // 解绑
       $("#list").undelegate();
   </script>