jQuery粗略源码解析6 事件和事件对象

1 事件

1.1 事件命名空间

$(".my").on("click",function () {console.log("1")})
      .on("click.a",function () {console.log("2")})
      .on("click.a.b",function () {console.log("3")})
      .trigger("click")//触发1,2,3
      .trigger("click.a")//触发2,3
      .off("click.a.b") .trigger("click")//触发1,2
      .trigger("click!");//只触发1

详解： https://www.haorooms.com/post/jquery_namespaces_eventname

1.2 事件处理

• on(events,[selector],[data],fn)

参数1：一个或多个用空格分隔的事件类型和可选的命名空间。

  $(":root").on("click keydown",function () {console.log("1")})

参数2：过滤后代的选择器，实现事件委托。

<ul>
    <li>1</li><li>2</li><li>3</li><li>4</li><li>5</li>
</ul>
<script>
    $("ul").on("click","li",function () {
        console.log($(this).text());
    })
</script>

参数3：要传递event.data给事件处理函数的数据。

$("ul").on("click",{name:"bolala"},function (e) {
        console.log(e.data.name);
    })

参数4：要执行的函数或者false（取消冒泡和默认行为）。

• off() 移除一个或多个事件的事件处理函数。
• one() 绑定一个一次性的事件处理函数。
  -trigger(type,[data]) 在每一个匹配的元素上触发某类事件。
• triggerHandler(type, [data]) 触发指定的事件类型上所有绑定的处理函数。但不会执行浏览器默认动作，也不会产生事件冒泡。

$(":submit").submit(function () {
        console.log("|haha");
    });
    $("p").click(function () {
        $(":submit").triggerHandler("submit");
//        只触发自定义事件 不执行默认，不冒泡
    })

1.3 切换事件

• hover() 悬停切换
• toggle() 点击切换

  $("p").hover(function () {$(this).toggleClass("active");})
        .next("span")
        .toggle(
            function () {$(this).addClass("active")}, 
            function () {$(this).removeClass("active")})

1.3 简写事件

• 表单类
  ①blur() ：失去焦点
  ②change() ：当元素的值发生改变时，发生 change 事件。该事件仅适用于文本域，以及 textarea 和 select 元素。当用于 select 元素时，change 事件会在选择某个选项时发生。当用于 text field 或 text area 时，该事件会在元素失去焦点时发生。
  ③focus(): 获得焦点时
  ④select()：当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件。
  ⑤ submit()：当提交表单时触发。
• 鼠标类
  ① click() 单击
  ② dbclick() 双击
  ③ mousedown() 到上方并鼠标按下
  ④ mouseup() 到上方并鼠标按键释放
  ⑤ mouseenter() 移入 不冒泡
  ⑥ mouseleave() 移出 不冒泡
  ⑦ mouseover() 移入
  ⑧ mouseout() 移出
  ⑨ mousemove() 鼠标移动时
• 鼠标类
  ① keydown() 键盘按下触发
  ② keypress() 按下插入字符时触发
  ③ keyup() 按键松下时触发
• 窗口类
  ①resize() 调整浏览器窗口的大小时
  ②scroll() 当用户滚动指定的元素时，包括window 对象。
  

  ---

2 事件对象

• eve.currentTarget 冒泡触发的当前元素
• eve.target 最初触发的DOM元素
• eve.relatedTarget 相关元素
• eve.pageX eve.pageY 相对于文档的位置
• eve.result 前一个事件返回的值
• eve.type 事件的类型
• eve.which 鼠标或键盘的键位
• eve.data 事件被绑定时传递的参数
• eve.namespace 指定的命名空间
• eve.preventDefault() 阻止默认事件行为
• eve.isDefaultPrevented() 判断是否阻止
• eve.stopPropagation() 阻止冒泡
• eve.isPropagationStopped() 判断是否阻止冒泡