JS_事件分类

## 事件对象

    跟事件相关的一系列数据

    e:将来事件发生后，系统给我们传递的代表事件对象，在ie中window.event

    兼容写法：注意变量作用域问题

        var e = e || window.event

        或者：var e = e || event;

    ex: var x = x;会出现undefined，即使是在全局作用域存在！

    target:触发事件的对象;  //this:返回的是绑定事件的元素 == currentTarget

    srcElement:ie6~8使用，非标准

    type:事件类型，不带"on"

    cancelBubble:阻止冒泡 非标准 【赋值为 true 、 false】

    returnValue:标准属性，阻止冒泡

    e.preventDefault()    阻止默认事件

        ex:超链接，单击跳转。

        e.returnValue = false; //ie678支持阻止默认

        return false; //没有兼容性，但是只能在dom0级事件绑定使用

    stopPropagation()   阻止冒泡

    事件代理：原理是利用事件冒泡，给父亲添加事件侦听器，将来操作的子元素。

鼠标事件

        onclick

        onmouseover        onmouseout       【冒泡】

        onmouseenter        onmouseleaver  【不冒泡】

        onfocus        onblur

        onmousemove/onmouseup/onmousedown

-mouseenter:不会冒泡

-mouseover:会冒泡

    键盘事件

        onkeyup

        onkeydown

        onkeypress

keyup,keydown可以识别

        keypress:功能键是无法识别的！ex:control shift 左右箭头

        键盘事件对象的keyCode,即event.keyCode:按键的ascii码     a:65//91

        keyup,keydown: 不能识别大小写   空格：32

        keypress:区分大小写

    event整理：

        clientX clientY         可视区域的x,y坐标

        pageX   pageY          页面文档

        screenX screenY         电脑屏幕

    event整理：

        clientX clientY         可视区域的x,y坐标

        pageX   pageY           页面文档

        screenX screenY         电脑屏幕

        oninput:监听是否有输入的时候

        contextmenu:阻止鼠标右键

box.innerText

box.innerHTML

Bootstrap模态框:JS组件

oninput事件：监听输入，处理<input>，<select>和 <textarea> 元素上的 input 事件。 它还会在contenteditable 或 designMode打开的元素上处理这些事件。

与oninput不同的是， onchange 事件处理程序不一定会针对元素值的每次更改而调用。

let input = document.querySelector('input'); 
let log =document.getElementById('log'); 
input.oninput = handleInput; 
function handleInput(e) { 
  log.textContent = `The field's value is${e.target.value.length} character(s) long.`; 
}

阻止鼠标右键：

noContext = document.getElementById('noContextMenu');
noContext.addEventListener('contextmenu', e => {
  e.preventDefault();
});

p.addEventListener('contextmenu', function(e) {

// console.log("hello");

e.preventDefault();

        });

p.addEventListener('selectstart', (e) => {

e.preventDefault();

        });