事件的认识




  
  
  JS Bin






//得到事件——对象 MouseEvent {isTrusted: true, screenX: 594, screenY: 87, clientX: 37, clientY: 21…}
altKey: false    //点时没有按alt键
bubbles: true      //冒泡的
button: 0
buttons: 0
cancelBubble: false
cancelable: true
clientX: 37                      //位置
clientY: 21                //位置
composed: true
ctrlKey: false
currentTarget: null
defaultPrevented: false
detail: 1
eventPhase: 0
fromElement: null
isTrusted: true
layerX: 37
layerY: 21
metaKey: false
movementX: 0
movementY: 0
offsetX: 28                 //点击时鼠标 相对于元素本身的偏移
offsetY: 9             //点击时相对于元素本身的偏移
pageX: 37
pageY: 21
path: Array(5)relatedTarget: null
returnValue: true
screenX: 594
screenY: 87
shiftKey: false
sourceCapabilities: InputDeviceCapabilities
srcElement: button#btn
target: button#btn                            //通过e.target看看点的是谁，等同于this和btn,但是有时候会有区别的。
timeStamp: 14919.125000000002
toElement: button#btn
type: "click"
view: Window
which: 1
x: 37
y: 21
__proto__: MouseEvent

removeEventListener解绑事件的，其中第二个参数也就是函数不能是匿名函数，否则解绑不了的，同理于addEventListener。

IE兼容

IE有：

attachEvent添加
detachEvent删除
全都默认冒泡模式，两个参数，而且事件是'onclick',对比于addEventListener的'click'。这时候，this不是绑定的元素了，而是window对象。

事件对象

刚开始的例子已经得到了事件的对象了，这里比较重要的几个拿出来说说：

target 事件的目标元素
stopPropagation() 取消事件的进一步捕获或者冒泡，就是中断。
preventDefault() 取消事件的默认行为：a链接点击跳转；form表单里的按钮type=submit，点击就会提交，，，先不让它们跳转，提交，先做一些事情，然后才完成默认的。




  
  
  JS Bin





  container
  
    box
    
      target
    
  


  

//"container click..in捕获"
"box click..in捕获"
"target click..in捕获"
"target click..in冒泡"
"box click..in冒泡"
"container click..in冒泡"

//在box中加入stopPropagation()然后，，，
"container click..in捕获"
"box click..in捕获"
"target click..in捕获"
"target click..in冒泡"
"box click..in冒泡"
stopPropagation()会阻止事件向后传递，向后而已，当下没事。




  
  
  JS Bin


baidu

老的IE里的事件获取

用window.event获取，比较奇葩。

常见事件

load
unload
select
changge
submit
resize
scroll
focus
blur

事件代理




  
  
  JS Bin



  box1
   box2




//点击元素出现文本信息，只是选择了box1,box2没有选择。
用$$，反而点击两个都没有输出文本，为什么？
在控制台：
$$('.box')
(2) [div.box, div.box]    //选中了，是个NodeList类数组对象
$$('.box').onclick
undefined                  //没有onclick这个事件！事件只能一个一个去绑定。

如图

这里没有addEventListener和onclick的，不过有forEach。

$$('.box').forEach(function(node){
  node.onclick=function(){
    console.log(node.innerText)
  }
})
//就可以了，先遍历，然后再写。

比较麻烦，能不能绑定在父元素上？

$('.container').onclick=function(e){
  if(e.target.classList.contains('box')){
    console.log(e.target.innerText)
  }
}            //e还是形参，事件发生时才会有意义有值，也就是点击的瞬间，其他时候，是会报错的，没有值的。

再深一步：forEach不一定是万能的，，，




  
  
  JS Bin



  box1
   box2 

  



//这时候add是可以正常输出bix3,box4,box5,,,,,,,
但是控制台输出的innerText就还是原来是box1,box2,没有后来增加的了。
因为forEach一开始只给原本就有的做了遍历，都绑定了事件，后面新增的对象没有绑定啊。

代理模式下呢：




  
  
  JS Bin



  box1
   box2 

  



可正常跟进子元素的变化，同步绑定事件了。没有绑定事件，但是都会向父元素冒泡，父元素绑定了事件啊

事件代理很好，不需要重新绑定事件了，尤其是懒加载啊，或者是子元素会发生变化啊。

事件的冒泡捕获阻止默认代理