JS事件的介绍、绑定方式和事件冒泡事件捕获

事件介绍

事件三要素 :
事件源 : 什么元素
事件类型 : 什么时候
事件处理 : 做什么事 (函数)

交互 : 哪个元素在什么时候做什么事
事件 : js用来处理用户交互的机制
元素注册事件的本质 : 就是给对象属性赋值
语法结构 : 事件源.事件类型 = 事件处理函数
事件的工作原理 :

1. 当元素注册事件的时候, 事件处理函数不会执行
2. 当用户触发事件的时候, 浏览器就会捕捉事件源(执行事件处理函数)

onclick 在点击的时候

box.onclick = function() {
   
    console.log(111);
    
}

事件分类(事件类型)

鼠标事件

click : 点击事件
dbclick : 双击 (300ms以内连续发生两次点击事件)
mouseover : 鼠标进入
mouseout : 鼠标滑出
mouseenter : 鼠标进入
mouseleave : 鼠标离开
mousedown : 鼠标按下(左键)
mouseup : 鼠标弹起
mousewheel : 鼠标滚轮滚动

mouseover和mouseenter的区别：
mouseover：只要鼠标指针移入事件所绑定的元素或其子元素，都会触发该事件
mouseenter：只有鼠标移入时间所绑定的元素时，才会触发该事件
如果一个元素没有子元素，那么该元素绑定mouseover和mouseenter效果没有区别
如果绑定了mouseover的元素存在子元素不管鼠标移入该元素还是该元素的子元素都会触发该事件

键盘事件

keyup : 键盘抬起
keydown : 键盘按下
keypress : 键盘按下 (按下去和弹起来两个过程)

表单元素常用的事件

blur : 失去焦点
focus : 获取焦点事件
change : 内容改变事件
select : 被选中事件

其他事件
load：页面加载完毕执行
error：捕获网页中的错误
scroll：元素滚动时执行
resize：浏览器窗口被调整大小执行

事件的注册方式

1. 直接在DOM元素中注册(html事件)
   直接在html标签通过on+事件类型 = "function() {} "来绑定事件
   缺点 : 结构混合在一起

2. 在js代码中直接绑定 (dom0级事件)
   先在js代码中获取元素, 使用点语法注册
   缺点 : 就是不能重复注册同名事件, 否则就会覆盖, 默认冒泡

  one.onclick = function() {
   
                console.log(123);
                one.style.backgroundColor = "red";
            }

3. 使用事件监听函数绑定事件(dom2级事件)
   addEventListener

事件对象

当用户触发某个事件的时候, 浏览器会捕捉到与触发事件相关的一些信息
获取事件对象 : 谷歌火狐 : e, ev, event, 但是在IE8及其以下版本浏览器里面, 不需要形参, 直接使用全局变量 window.event;
兼容的方法：

function(e) {
   
            e = e || window.event;
            }

  var box = document.getElementById("box");
        box.onclick = function(e) {
   
            e = e || window.event;
            console.log(e);
            alert(123);
        }

addEventListener

点语法注册事件的缺点 : 注册多个同名事件, 后者会覆盖前者

  box.onclick = function() {
   
         alert("你好");
     }

    box.onclick = function() {
   
       alert("今天天气真好")
    }//覆盖前面的

使用addEventListener来注册事件 不会覆盖, 而是一次触发

三个参数
type : 事件类型 不要on (click mouseover mouseenter)
listener : 事件处理函数
布尔类型 默认是false, 不传时false
false表示冒泡 true表示捕获

function fun() {
   
console.log(this);       
  alert(888);
 }
 box.addEventListener("click", fun, false)

 box.addEventListener("click", function() {
   
    alert(999);
})

<