JavaScript中的事件模型

时间:2022-06-22 22:35:33

JS中的事件

1、鼠标事件

onclick   ondbclick   onmouseover   onmouseout

2、HTML事件

onload   onunload   onsubmit   onresize  onfocus  onchange   onscroll

3、键盘事件

  1. onkeydown:键盘按下时触发
  2. onkeypress:键盘按下并抬起的瞬间触发
  3. onkeyup:键盘抬起时触发

【注意事项】

  • ① 执行顺序:keydown--keypress--keyup
  • ② keypress只能捕获数字、字母、符号键,不能捕获功能键;
  • ③ 长按时循环执行:keydown--keypress
  • ④ 有keydown,不一定有keyup,当长按时焦点失去时,不再触发keyup.
  • ⑤ keypress区分字母大小写,keydown/keyup不区分大小写

4、事件因子

当触发一个事件时,该事件将向事件所调用的函数中,默认传入一个参数,这个参数就是事件因子,包含了事件的各种详细信息。

 document.onkeydown=function(e){
   console.log(e);
 }

5、如何确定键盘按键

  • ① 在触发函数中,接收事件因子e
e = e || window.event;
  • ② 可以使用 e.key直接取到按下的按键字符(不推荐)
  • ③ 可以使用keyCode/which/charCode取到按键的ASCII码值:
 var code=e.keyCode || e.which || e.charCode;
  //(兼容各种浏览器的写法)
 document.onkeydown=function(e){
    e = e || window.event;
    var code=e.keyCode || e.which || e.charCode;
    console.log(e);
 }

DOM0事件模型

1.内联模型绑定 (行内绑定)

将函数名直接作为HTML标签中事件属性的属性值

 <button onclick="func()">内联模型绑定</button> 

缺点:不符合w3c中关于内容与行为分离的基本规范

2.脚本模型(动态绑定)

通过在js中选中某个节点,然后给节点添加onclick属性

document.getElementById("btn1").onclick=function(){} 

优点:符合w3c中内容与行为分离的基本规范,实现html与js的分离

        缺点:同一个节点,只能添加一次同类型事件。如果添加多次,最后一个生效。

3.DOM0共有的缺点:

      通过DOM0绑定的事件,一旦绑定,无法取消

DOM2事件模型

1.添加DOM2事件绑定

① IE8之前,使用.attachEvent("onclick",函数);

         ② IE8之后,使用.addEventListener("click",函数,true/false);

              参数三:false(默认)表示事件冒泡,传入true表示事件捕获

         ③ 兼容所有浏览器的处理方式

 var btn = document.getElementById("btn2");
 if(btn.attachEvent) {
       btn.attachEvent("onclick", func1);
     } else {
       btn.addEventListener("click", func1);
 }

2.DOM2的优点:

① 同一个节点,可以使用DOM2绑定多个同类型事件
         ② 使用DOM2绑定的事件,有专门的函数取消

3.DOM2取消事件绑定:

① 使用attachEvent绑定,用detachEvent("onclick",func1);取消

         ② 使用addEventListenner绑定,用removeEventListener("click",func1);取消

 document.getElementById("btn3").onclick=function() {
 if(btn.detachEvent) {
        btn.detachEvent("onclick", func1);
     } else {
        btn.removeEventListener("click", func1);
     }
     alert("取消事件绑定");
 }
 

注意: 如果是DOM2绑定的事件需要取消,则绑定事 时,回掉函数必须是函数名,而不能是匿名函数,因为取消事件时,,取消传入函数名进行绑定

js中的事件流模型

1.事件冒泡:

       当触发一个节点的事件时,会从当前节点开始,依次触发其祖先节点的同类型事件,
直到DOM根节点 。

2.事件捕获
       当触发一个节点的事件时,会从DOM根节点开始,依次触发其祖先节点的同类型事件,
知道当前节点自身 。

3.什么时候事件冒泡?事件捕获?

        ①当使用addEventListener绑定事件,第三个参数设为true时表示事件捕获

        ②除此之外的所有事件均为事件冒泡

4.阻止事件冒泡
        ①IE10之前,使用e.cancelBubble = true;

        ②IE10之后,使用 e.stopPropagation();
 function myParagraphEventHandler(e) {
     e = e || window.event;
     if (e.stopPropagation) {
          e.stopPropagation(); //IE10之后
     } else {
          e.cancelBubble = true; //IE10之前
     }
 }

5.阻止默认事件
         ①IE10之前:e.returnValue = false;
         ②IE10之后:e.stopPropagation();

 function eventHandler(e) {
   e = e || window.event;
   // 防止默认行为
   if (e.preventDefault) {
        e.preventDefault(); //IE10之外
    }else {
       e.returnValue = false; //IE10之前
    }
 }