사건의 인식

  
  
  


click me

var btn= document.querySelector('#btn')
btn.onclick = function(e){
  console.log(e)
}                    //e ， ， 。



// ——  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

remove Event Listener가 이벤트를 풀었는데 그 중 두 번째 인자는 함수가 익명 함수일 수 없다는 것이다. 그렇지 않으면 묶을 수 없는add Event Listener와 같다.

IE 호환성

IE 지원:

attachEvent 추가

detach Event는 모든 기본 거품 모드를 삭제합니다. 두 개의 매개 변수이고 이벤트는'onclick'입니다.addEvent Listener의'click'과 비교됩니다.이때this는 연결된 요소가 아니라 window 대상입니다.

이벤트 객체

처음의 예는 이미 사건의 대상을 얻었다. 여기서 비교적 중요한 몇 가지를 꺼내서 말한다.

target 이벤트의 목표 요소

stopPropagation()이 사건의 추가 포획이나 거품을 취소하면 중단됩니다.

preventDefault () 이벤트의 기본 행동을 취소합니다: a 링크를 클릭하여 점프하기;폼에 있는 단추 type=submit, 클릭하면 제출합니다., 먼저 돌리지 못하게 하고, 제출하고, 먼저 일을 하고, 기본값을 완성합니다.

  
  
  



click me

  container
  

    box
    

      target
    
  


var btn= document.querySelector('#btn')
btn.onclick = function(e){
  console.log(e)
}
document.querySelector('.container').addEventListener('click',function(e){
console.log('container click..in ')  
},true)
document.querySelector('.box').addEventListener('click',function(e){
console.log('box click..in ')  
},true)
document.querySelector('.target').addEventListener('click',function(e){
console.log('target click..in ')  
},true)
document.querySelector('.container').addEventListener('click',function(e){
console.log('container click..in ')  
},false)
document.querySelector('.box').addEventListener('click',function(e){
 // e.stopPropagation()
  console.log('box click..in ')  
},false)
document.querySelector('.target').addEventListener('click',function(e){
console.log('target click..in ')  
},false)

  

//"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() ， ， 。

  
  
  


baidu

document.querySelector('a').onclick = 
  function(e){
  e.preventDefault()                   // 
  console.log(this.href)
  if(/baidu.com/.test(this.href)){        // baidu.com
    location.href = this.href            // 
  }
}

오래된 IE의 이벤트 가져오기

윈도우로.이벤트 수령, 진기한 꽃입니다.

흔한 사건

load

unload

select

changge

submit

resize

scroll

focus

blur

이벤트 에이전트

  
  
  



  
box1
   
box2


function $(selector){
  return document.querySelector(selector)
}
function $$(selector){
  return document.querySelectorAll(selector)
}
$('.box').onclick = function(){
  console.log(this.innerText)
}
//$$('.box').onclick = function(){
//  console.log(this.innerText)
//}          // 



// ， box1,box2 。
 $$， ， ？
 ：
$$('.box')
(2) [div.box, div.box]    // ， NodeList 
$$('.box').onclick
undefined                  // onclick ！ 。

그림과 같다
여기에는ddEvent Listener와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가 꼭 만능은 아니지만,

  
  
  



  
box1
   
box2
 

  add

function $(selector){
  return document.querySelector(selector)
}
function $$(selector){
  return document.querySelectorAll(selector)
}
$$('.box').onclick = function(){
  console.log(this.innerText)
}
$$('.box').forEach(function(node){
 node.onclick=function(){
   console.log(node.innerText)
  }
})
var i =3
$('#add').onclick=function(){
  var box =document.createElement('div')
  box.classList.add('box')
  box.innerText = 'box' +(i++)
  $('.container').appendChild(box)
}



// add bix3,box4,box5,,,,,,,
 innerText box1,box2, 。
 forEach ， ， 。

프록시 모드에서는 다음을 수행합니다.

  
  
  



  
box1
   
box2
 

  add

function $(selector){
  return document.querySelector(selector)
}
function $$(selector){
  return document.querySelectorAll(selector)
}
$$('.box').onclick = function(){
  console.log(this.innerText)
}
$('.container').onclick=function(e){
  if(e.target.classList.contains('box')){
    console.log(e.target.innerText)
  }
}                   // 
var i =3
$('#add').onclick=function(){
  var box =document.createElement('div')
  box.classList.add('box')
  box.innerText = 'box' +(i++)
  $('.container').appendChild(box)
}



 ， 。 ， ， 

이벤트 에이전트가 좋아요. 이벤트를 다시 연결할 필요가 없어요. 특히 불러오기를 게을리하거나 하위 요소가 변할 수 있어요.