Event listener

The one below the event binding overwrites the one above! div.onclick=function(){ alert(1); } div.onclick=function(){ alert(2); Div. AddEventListener ('click',function(){alert(1); }); div.addEventListener('click',function(){ alert(2); });Copy the code

Cancel the event listener

Function fn(){alert(' cancel ')} el.addeventListener ('click',fn) el.removeEventListener('click',fn)Copy the code

The event bubbling

<body> <div> <p></p> </div> <script> var div=document.querySelector('div'); var p=document.querySelector('p'); // Execute the child event. Will perform / / event bubbling execution sequence from small to large / / p > div > body > HTML document. The body. The addEventListener (' click ', function () {alert (' body ')}) div.addEventListener('click',function(){ alert('div'); }); p.addEventListener('click',function(){ alert('p'); }); </script> </body>Copy the code
AddEventListener ('ev',fn,[,capture,{}]) The default third argument is flase(not capture) the fourth argument can also pass objects :{} // capture:true/false Whether to execute // during the capture phase Once :true/false Execute only one event // passive:false/true // prevent cancelling the default event True here means that blocking is not allowed (e.g. E.preventdefault ()) div.addEventListener('click',function(){alert('div'); },{once:true,passive:false}); p.addEventListener('click',function(){ alert('p'); });Copy the code

Cancel event bubbling

e.cancelBubble = true;
e.stopPropagation()
Copy the code

Event delegation

<body> <div> <ul> <li> <p></p> </li> <li> <p></p> </li> <li> <p></p> </li> <li> <p></p> </li> </ul> </div> <script> // Var ul=document.querySelector('ul'); Ul.addeventlistener ('click',function(e){// get the event source element // console.log(e.target); // console.log(e.target.tagname)! Capital the if (e. arget. TagName = = 'LI') {e. arget. Style. The background = 'yellow'; } }) </script> </body>Copy the code

The event agent

<body> <div class="box"> <input type="text" id="user" value=" name "/> <textarea id="message"> </textarea> <button Id =" BTN "> Submit message </button> <ul id="list"> </ul> </div> <script btn=document.querySelector('#btn'); var user=document.querySelector('#user'); var message=document.querySelector('#message'); var list=document.querySelector('#list'); List.addeventlistener ('click',function(e){// e.target if(e.target. ClassName =='clos'){var li=e.target.parentNode; // console.log(li); list.removeChild(li); }}) btn.adDeventListener ('click',function(){var li=document.createElement('li'); Li. InnerHTML = ` < h2 class = "user" > ${user. Value} say: < / h2 > < p > ${message. The value} < / p > < a href = "javascript:;" Class ="clos"> delete <span>X</span></a> '; list.insertBefore(li,list.children[0]); }) </script> </body>Copy the code

mouseout/mouseover

Mouseover and mouseout are triggered again when the mouse moves in or out of the child element rangeCopy the code

mouseleave/mouseenter

Mouseenter and mouseleave are unaffected by the scope of child elementsCopy the code

e.pageX/e.pageY

Gets the position of the mouse click relative to the upper left corner of the page. Also gets the position relative to the upper left corner of the page when the page scrollsCopy the code

e.cilentX/e.clientY

Gets the position of the mouse click relative to the display area. Also gets the position relative to the upper left corner of the display page when the page is scrollingCopy the code

Mouse wheel event

/ / Google and ie document. AddEventListener (' mousewheel ', function (e) {/ / e.w heelDelta / / roller up - > / / scroll down - > 120-120 The console. The log (e.w heelDelta)}) / / firefox document. The addEventListener (' DOMMouseScroll 'function (e) {/ / e.d etail / / roller up - > -3 // Scroll down -> 3 console.log(e.dial)})Copy the code
Function toWheel(el,downFn,upFn){el.addeventListener ('mousewheel',function(e){if(e.wheeler delta >0){// UpFn &&upfn. call(el)}else{// downFn &&downfn. call(el)}}) el.adDeventListener ('DOMMouseScroll',function(e){ If (e.dial >0){downFn &&downfn. Call (el)}else{upFn &&upfn. Call (el)}}Copy the code

Custom right-click menu

/ / custom a right-click menu / / contextmenu document. The right mouse button events addEventListener (' contextmenu ', function () {/ / stop the default browser behavior e.p reventDefault () alert(1); })Copy the code

Blocking default behavior

Document. onContextmenu =function(e){return false only when adding events directly; }Copy the code

Double-click the event

El.addeventlistener ('dblclick',function(){alert(' double click')})Copy the code

Drag and drop the case

// mousedown mousedown // mouse over mousemove constantly changing the top/left elements // mouseup mouseupCopy the code
<style>
  div{
    width: 100px;
    height: 100px;
    background: red;
    position: absolute;
  }
</style>
Copy the code
Var startPos={} // 2. Var boxPos={} //3. Add the mousedown event el.adDeventListener ('mousedown',function(e){//4. Record the starting mouse position startpos. x= e.clientx; startPos.y=e.clientY; X = CSS (div,'left'). Y = CSS (div,'top') // 6. Div. AddEventListener ('mousemove',function(e){//7 Var nowPos={// The mouse position during drag x: e.clientx, Var dis={x: nowpos.x - startpos.x, var dis={x: nowpos.x - startpos.x, Y: nowpos.y -startpos.y} // Move distance + initial position of element = latest position of element var newPos={l:dis.x+ boxpos.x, T :dis.y+ boxpos.y} // Modify the style to use mtween.js CSS (div,'top', newpos.t) CSS (div,'left', newpos.l)})})Copy the code

keydown/keyup

/ / keyboard press the document. The addEventListener (' keydown ', function () {the console. The log (' keyboard press ')}) / / keyboard is raised Document. The addEventListener (' keyup ', function () {the console. The log (' keyboard up ')})Copy the code

String splicing

If (e.keycode == 38&&e.clkey){scale+=0.5; div.style.transform='scale('+scale+')'; }Copy the code

Form method

El.addeventlistener ('focus',function(){console.log(' get focus')}) El.addeventlistener ('change',function(){console.log(' content changes ')}) El.addeventlistener ('input',function(){console.log(' when content is modified ')}) e.preventDefault(); Console.log (' submit event ')}) // Reset the form event el.adDeventListener ('reset',function(){console.log(' reset event ')}) Document. The addEventListener (keydown, function (e) {/ / console log (e.k eyCode) if (e.k eyCode = = 13) {/ / lost focus method TXT. The blur (); }})Copy the code