JavaScript learning note 04

Keyboard and mouse events - Games

1, Event binding

  • Mainstream browser
1,binding
addEventListener(ev, func, false);
    oDiv.addEventListener('click', demo, false);
    oDiv.addEventListener('click', yangyang, false);
    //Events don't have on
2,Untying
removeEventListener(ev, func);
    oDiv.removeEventListener('click', yangyang);
  • Junk browser
1,binding
    attachEvent(ev, func);
        oDiv.attachEvent('onclick', demo);
        //Events with on
2,Untying
    detachEvent(ev, func);
        oDiv.detachEvent('onclick', demo);
  • Compatibility writing
//ev without on
    function addEvent(obj, ev, func)
    {
        if (obj.addEventListener) {
            obj.addEventListener(ev, func, false);
        } else {
            obj.attach('on'+ev, func);
        }
    }

    function removeEvent(obj, ev, func)
    {
        if (obj.removeEventListener) {
            obj.removeEventListener(ev, func, false);
        } else {
            obj.detach('on'+ev, func);
        }
    }

2, Event bubbling

When a child event is triggered, the parent event will be triggered at the same time

How to cancel the event bubble???

See below.

3, Event object

1,Main stream
    oDiv.onlcick = function (ev) {
        alert(ev);
    }
2,Low level browser
    oDiv.onclick = function () {
        alert(window.event);
        alert(event);
    }
3,Compatibility writing
    oDiv.onclick = function (ev) {
        var oEvent = ev || event;
    }
  • Cancel event bubbling (important)
oSon.onclick = function (ev) {
  var oEvent = ev || event;
  oEvent.cancelBubble = true;
  alert('son is son ');
}
Explain:
    1. Cancel cancel
    2. Bubble
    3. cancelBubble is an attribute in the event object
    4. The cancellation event bubble must be written in the child event

4, Mouse events

Get mouse coordinates

document.onmousemove = function (ev) {
  var oEvent = ev || event;
  console.log(oEvent.clientX, oEvent.clientY);
}
1,clientX   X coordinate
2,clientY   Y coordinate

5, Event source object

Event source: element of the current event action

Find event source from event object

Find the original object through the event source

oDiv.onclick = function (ev) {
  var oEvent = ev || event;
  //Google and junk
  //alert(oEvent.srcElement);
  //Firefox only supports this
  //alert(oEvent.target);
  oEvent.srcElement.style.backgroundColor = '#c90';
}

6, Keyboard events

1,Keyboard events  onkeydown
2,oEvent.keyCode        ASCO code corresponding to the key
   window.event.keyCode
3,ctrl       window.event.ctrlKey
4,Prohibit ctrl  + c
document.onkeydown = function (ev) {
  var oEvent = ev || event;
  if (oEvent.ctrlKey && oEvent.keyCode == 67) {
    return false;
  }
}

Seven. Miscellaneous items

  • Right click event oncontextmenu
//Disable right mouse button default action
document.oncontextmenu = function (ev) {
  //return false;
  var oEvent = ev || event;
  //Firefox special
  //oEvent.returnValue  = false;
  //Basically supported
  oEvent.preventDefault();
}
  • Customize the right mouse button menu
document.oncontextmenu = function (ev) {
  var oEvent = ev || event;
  oEvent.preventDefault();
  var x = oEvent.clientX;
  var y = oEvent.clientY;
  oDiv.style.position = 'absolute';
  oDiv.style.left = x + 'px';
  oDiv.style.top = y + 'px';
  oDiv.style.display = 'block';
}
  • window object
Method Explain
window.open('1.html') Open 1.html
window.close(); Close page can only be closed with js if it is opened through js
window.history.back(); Open previous history page
window.history.go(1); Open the next page of history
window.location.href='http://www.baidu.com' Jump to Baidu
window.print(); Printing

- js regularization

Delimiter atomic character pattern modifier

G global global match

Method Explain
str.match(reg) Return matching results
str.search(reg) Returns a subscript that matches the result
str.replace(reg, 'chicken') Matching substitution

- form form

1,Can pass form Of name Value to find this label object
    document.name value
2,You can find all the form Determine a certain one by subscript
    document.forms      //This is a collection of form s
    document.forms[0]
3,Directly through input Of name Value found input
    document.form Of name value.input Of name value
4,js Submission form
    document.form Of name value.submit();
  • Drop-down box
1,onchange      Triggered when the value of the dropdown box changes
oSel.onchange = function () {
        //console.log(oSel.value);
        console.log(oSel.options[this.selectedIndex].value);
    }

Tags: Firefox Attribute Google

Posted on Fri, 20 Mar 2020 16:34:23 -0400 by mass