js11事件

1.事件

1）发送事情 2）处理事情

2.事件的模式

1）内联模式

function del(o) { // alert(123) console.1og(o);

2）脚本模式

var oBtn = document . querySelector( "#btn"); oBtn.onclick = function () { console. log( "脚本模式111"); } //一种类型的事情,只能绑定-一次 oBtn.onclick = function () { console. log("脚本模式222"); }

//鼠标事件

onclick 单击事件

oBox . onclick = function () { console. log("点击事件");

ondblclick 双击

onmousemove 移动

onmousedown 鼠标按下

onmouseup 抬起

onmouseenter 进入

onmouseleave 离开

onmouseover 进入

onmouseout 离开

onmousewheel 鼠标滚轮事件

 

onmouseenter和onmouseleave遇到子元素不会触发事件

onmouseover和onmouseout遇到子元素会触发事件

//键盘事件

onkeydown

onkeyup

onkeypress：功能键无效，shift，ctrl，alt，ESC，

字符键有效

//html事件

onload

//window.onload

1）dom树结构，加载完成后，并且外部资源也加载完成后，才会完成

2）凡是带有src标签元素，都有onload事件

//DOMContentLoaded dom树结构, 加载完成后, 就立即触发这个事件

onunload:关闭该窗口，刷新后，才会触发

onresize改变窗口大小才触发

onwheel

onscroll

//表单元素

*oninput 输入事件

//oninput搭配防抖 解决多次打印

var oTxt=document . querySelector( " #txt"); // oTxt . oninput=_ . debounce( function( ) console. log(this.value); // }, 600);

*onchange改变输入的内容

输入内容后，失去焦点，才触发

*onselect选中事件

选中内容，并且鼠标松开才触发

*onblur失去焦点

不管有没有内容，只要失去焦点就触发

*onfocus聚焦事件

*onsubmit提交事件

*onreset重置事件

形参 是局部变量，默认undefined 调用时才有值

 

var oBox = document . querySelector(" . box"); oBox . onmousedown = function (evt) { // console. log(window. event); //ie浏览下获取事件对象 // console. log(evt); //事件对象的兼容写法 var e = evt|| window. event; // console.log(e);

//坐标----都属于事件对象的属性

//1). pageX, pageY 鼠标点击的点,到页面的距离 // console.log(e. pageX,e. pageY);

//2). clientX,clientY 鼠标点击的点,到当前浏览器的距离 console.log(e.clientX，e.clientY);

//3). offsetX, offsetY鼠标点击的点，到当前元素的距离 console.log(e.offsetX，e.offsetY);

//4).scrrenX,screenY 鼠标点击的点，到屏幕的距离

console.log(e.scrrenX，e.scrrenY);

//5)e.button 鼠标按键的编号，mousedown

0左键 1滚轮键 2右键

//6)e.ctrlKey

//7)e.shiftKey

//8)e.altKey

//9)e.metaKey

//10)e.keyCode 按键编码

//11)e.charCode 字符编码（结合onkeypress）

//12)e.target目标元素

// offsetLeft , offsetTop //获取当前元素到带有定位父元素的距离,如果父级们都没有定位，就到body的距离

// offsetWidth, offsetHeihgt // offsetWidth =自身的宽高+border+padding

// offsetParent 找干爹I //获取带有定位的父元素,如果父级们，都没有定位。默认获取body