JS DOM(二)

---

事件

事件三要素

事件源
事件类型
事件处理函数
	button.onclick = function(){}

事件对象 event

创建方式：当事件触发时由系统自动创建
作用：处理事件相关操作
IE兼容写法:
	e = e || window.event

		事件委托
           应用场景：
              给多个元素绑定事件时，可以选择: 
                 1. 循环遍历所有元素，给每个元素绑定事件
                 2. 将事件委托给上级元素统一处理
                       通过事件目标对象区分不同元素
           好处:
               动态添加元素时， 不用重新绑定事件

		注意: event和事件源有区别

获取光标位置

1、相对于浏览器窗口：
    even.clientX:获取x轴

    even.clientY:获取y轴

2、相对于自身的位置
    even.offsetX

    even.offsetY

3、相对于页面的位置
    even.pageX

    even.pageY

事件类型

      鼠标事件：
        click ：点击事件

        dbclick ：双击事件

        mousedown ：鼠标左键按下事件

        mouseup ：鼠标左键抬起事件

        contextmenu ： 右键单击事件

        mousemove ：鼠标移动

        mouseover ：鼠标移入事件

        mouseout ：鼠标移出事件

        mouseenter ：鼠标移入事件   --与事件冒泡

        mouseleave ：鼠标移出事件   --与事件冒泡
    
      表单事件
         input 内容输入事件
         		blur 失去焦点
         		focus 获取焦点
         change 内容改变事件
         submit  表单提交事件
         
         表单提交事件的作用：
               对表单内容进行验证
         阻止表单默认行为：
            e.preventDefault()
   
      浏览器相关事件
        load 	  页面全部资源加载完毕
        scroll    浏览器滚动的时候触发
        resize    页面大小事件       
   
      键盘事件 
           keydown  键盘按下
           keyup    键盘抬起
           keypress 
           
           组合按键
              ctrlKey  
              shiftKey
              altKey
            		

         事件的绑定方式
            - 属性事件
                <button onclick="">按钮</button >

            - 赋值
                ele.onclick = function () {
                    alert('事件绑定赋值方式')
                }

            - 事件监听方式
                ele.addEventListener(事件类型,事件处理函数)
                 注：事件类型名前不加on
	            兼容性:
	               IE7 8以下版本 
	                ele.attachEvent('on事件类型',事件处理函数) 
                 
       	移除事件
            赋值式: ele.onclick = null
            监听式: ele.addEventListener('click',事件处理函数)
                   ele.removeEventListener('click',事件处理函数)

事件传播

事件冒泡 :由内向外

            addEventListener(事件类型，事件处理函数，true)

事件捕获 :由外向内

            addEventListener(事件类型，事件处理函数，false)

事件传播三个阶段

             事件捕获
             事件目标对象
             事件冒泡